[mirotalk] - add widgets, update dep
This commit is contained in:
Miroslav Pejic
+1
-1
@@ -45,7 +45,7 @@ dependencies: {
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.5.48
|
||||
* @version 1.5.49
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
Generated
+62
-62
@@ -1,16 +1,16 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.48",
|
||||
"version": "1.5.49",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.48",
|
||||
"version": "1.5.49",
|
||||
"license": "AGPL-3.0",
|
||||
"dependencies": {
|
||||
"@mattermost/client": "10.9.0",
|
||||
"@ngrok/ngrok": "1.5.1",
|
||||
"@ngrok/ngrok": "1.5.2",
|
||||
"@sentry/node": "^10.1.0",
|
||||
"axios": "^1.11.0",
|
||||
"chokidar": "^4.0.3",
|
||||
@@ -29,7 +29,7 @@
|
||||
"jsdom": "^26.1.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"nodemailer": "^7.0.5",
|
||||
"openai": "^5.11.0",
|
||||
"openai": "^5.12.0",
|
||||
"qs": "^6.14.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"swagger-ui-express": "^5.0.1",
|
||||
@@ -232,33 +232,33 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok/-/ngrok-1.5.1.tgz",
|
||||
"integrity": "sha512-sfcgdpiAJHqmuO3e6QjQGbavIrR3E72do/NAsnGhm+7SGstLj1aM3Sd8mkfTORb2Hj7ATMuoBYuED5ylKuRQCg==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok/-/ngrok-1.5.2.tgz",
|
||||
"integrity": "sha512-gN7KKdLTKer+wBSk9s9eDx53MUFdcnXNHsXxiC5sJLLD5HY9JRMSn6UzcCqnk7IgeIgCgw5h1k6YDqhjx6lmtg==",
|
||||
"license": "(MIT OR Apache-2.0)",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@ngrok/ngrok-android-arm64": "1.5.1",
|
||||
"@ngrok/ngrok-darwin-arm64": "1.5.1",
|
||||
"@ngrok/ngrok-darwin-universal": "1.5.1",
|
||||
"@ngrok/ngrok-darwin-x64": "1.5.1",
|
||||
"@ngrok/ngrok-freebsd-x64": "1.5.1",
|
||||
"@ngrok/ngrok-linux-arm-gnueabihf": "1.5.1",
|
||||
"@ngrok/ngrok-linux-arm64-gnu": "1.5.1",
|
||||
"@ngrok/ngrok-linux-arm64-musl": "1.5.1",
|
||||
"@ngrok/ngrok-linux-x64-gnu": "1.5.1",
|
||||
"@ngrok/ngrok-linux-x64-musl": "1.5.1",
|
||||
"@ngrok/ngrok-win32-arm64-msvc": "1.5.1",
|
||||
"@ngrok/ngrok-win32-ia32-msvc": "1.5.1",
|
||||
"@ngrok/ngrok-win32-x64-msvc": "1.5.1"
|
||||
"@ngrok/ngrok-android-arm64": "1.5.2",
|
||||
"@ngrok/ngrok-darwin-arm64": "1.5.2",
|
||||
"@ngrok/ngrok-darwin-universal": "1.5.2",
|
||||
"@ngrok/ngrok-darwin-x64": "1.5.2",
|
||||
"@ngrok/ngrok-freebsd-x64": "1.5.2",
|
||||
"@ngrok/ngrok-linux-arm-gnueabihf": "1.5.2",
|
||||
"@ngrok/ngrok-linux-arm64-gnu": "1.5.2",
|
||||
"@ngrok/ngrok-linux-arm64-musl": "1.5.2",
|
||||
"@ngrok/ngrok-linux-x64-gnu": "1.5.2",
|
||||
"@ngrok/ngrok-linux-x64-musl": "1.5.2",
|
||||
"@ngrok/ngrok-win32-arm64-msvc": "1.5.2",
|
||||
"@ngrok/ngrok-win32-ia32-msvc": "1.5.2",
|
||||
"@ngrok/ngrok-win32-x64-msvc": "1.5.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-android-arm64": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-android-arm64/-/ngrok-android-arm64-1.5.1.tgz",
|
||||
"integrity": "sha512-2Tokwi5GVWNLw3JEoM0Ieb/ypALniZu6fciUTgpuByutbKxOjvahD4fYOKwW3KMdV9bCb3XGGtWJCZXfRPPq1g==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-android-arm64/-/ngrok-android-arm64-1.5.2.tgz",
|
||||
"integrity": "sha512-v81VbxxAgg2W7jbjhEcn8K9R2aUf0h1AuTx+8tDlw3L4H1YEmbmllIpBAGgMjHRBxLZKOo5GBi0k7oS+VRM5TA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -272,9 +272,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-darwin-arm64": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-arm64/-/ngrok-darwin-arm64-1.5.1.tgz",
|
||||
"integrity": "sha512-HNOhrPDP+nJJY7Bh45DOeh6jmcGASWINGbUuseZM0C8psQMp7crPywjRh0inkRegUrb4K8y06sfmgt2fmsF6jQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-arm64/-/ngrok-darwin-arm64-1.5.2.tgz",
|
||||
"integrity": "sha512-8CVzS9AveYpNhWbydm7cJ6XqmVg29/VRKF15l4kJ2djlNoJxuGSibgM9A627dWRdnJyj5uhmU3VzsgeU8t+/3g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -288,9 +288,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-darwin-universal": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-universal/-/ngrok-darwin-universal-1.5.1.tgz",
|
||||
"integrity": "sha512-EsMxYC/tY+ZqhjbeZtVq5MFIuD8SEPgAlHINEszsHd8ZRICc2U9Xl15CbDrew3pcfEg/ZVFrOH9CyC4aZ/V/cA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-universal/-/ngrok-darwin-universal-1.5.2.tgz",
|
||||
"integrity": "sha512-mEMH1OxN6RxnqRSWb4xY9RqbtdlCpv+WlRKxq4lVy8JVsxEyFNnzVQ0jn+iuiy981jCXjokctzJeGMvECuSQBQ==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -301,9 +301,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-darwin-x64": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-x64/-/ngrok-darwin-x64-1.5.1.tgz",
|
||||
"integrity": "sha512-H/x1BsYpAoTMhOtv4oYvwY6WHqbY0MsJ1XFcJQgrpAIjgmYqlwsnsUMHvEdBB/KY9kXF9DPgKUdRMfJwUIpwGA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-darwin-x64/-/ngrok-darwin-x64-1.5.2.tgz",
|
||||
"integrity": "sha512-rGdcADw4NtMSU7SHUTly7uvMVYX6eMeMCppKyL5g3CSlEQntKf3AWs/89ah2TBWJA2WVl0UgGLkXp4xs1tg9eQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -317,9 +317,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-freebsd-x64": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-freebsd-x64/-/ngrok-freebsd-x64-1.5.1.tgz",
|
||||
"integrity": "sha512-dY2W6HUv7e2xkpdfVj7fIk+5qmvrC7kVu6PJWJ8/rshW1FrU7qMcpnU53JvoQJRZzUf5k8xMNdx30zai/8mqYA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-freebsd-x64/-/ngrok-freebsd-x64-1.5.2.tgz",
|
||||
"integrity": "sha512-WgY54qUekaUGa5+lFvzYUMjlzf22IEXuZHhxnzJM2/gMqa7gjU8N5W4U8XNDjVW/oz6DekrzIjuoAEPO+2icDg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -333,9 +333,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-linux-arm-gnueabihf": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm-gnueabihf/-/ngrok-linux-arm-gnueabihf-1.5.1.tgz",
|
||||
"integrity": "sha512-JvbI/IIycw4Qq02ysyOBsSK5E0bZDgRqXSslHLTwuDAfw14lmrq2U0QkBeEOL8qwJ7wCwCH1PEOJacUyrqa9bg==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm-gnueabihf/-/ngrok-linux-arm-gnueabihf-1.5.2.tgz",
|
||||
"integrity": "sha512-azMxr/TGEeFU4JAUbSu5MO2aZEvdq+TzcxiLw6d+yhdEtNAjDW9TOyCczTrIZPOG5fP8G3lcCd8TP7mVIWdOnw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -349,9 +349,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-linux-arm64-gnu": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-gnu/-/ngrok-linux-arm64-gnu-1.5.1.tgz",
|
||||
"integrity": "sha512-yLFAlqTYYvH7QRg589HJarQGw1QrKQZcHiw0gm175eCqc+jpUG/Zcf8wohCTIJVLylMIzjDzVFSUsXC7UtMJdQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-gnu/-/ngrok-linux-arm64-gnu-1.5.2.tgz",
|
||||
"integrity": "sha512-79eFCxio4rM0ICRBXx/CVvbXDeWk1Jxr7szkezEYWtHaL+gXivrtS1QjtMnJpGY1GJlLTQL+49w2lGydqPOJQA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -365,9 +365,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-linux-arm64-musl": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-musl/-/ngrok-linux-arm64-musl-1.5.1.tgz",
|
||||
"integrity": "sha512-momB/ZjjrxaGYOZ3YPAw1kT4DAfWT1x3dAHL0YoSVfNCpc8Fw0189ZAcxGn0hUFqkGDmSARS9o8b7hYd1b41oA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-arm64-musl/-/ngrok-linux-arm64-musl-1.5.2.tgz",
|
||||
"integrity": "sha512-ou9Z7iPQJIQ0RX5bdBhb3y7GwYRt+X0G9tenyRzKLXXvs0XfUUcg/23aBP61hmdRvBq7xpliV1PnvEVBgUIYMg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -381,9 +381,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-linux-x64-gnu": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-gnu/-/ngrok-linux-x64-gnu-1.5.1.tgz",
|
||||
"integrity": "sha512-fmMaz0b1Ry2CDLLn0mV8b9nLxqm0taQ2jYyn+C9OrazYNMT4XYYDKRQSm4UEaNoakdnoH+f2FsrWi/712GFxAQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-gnu/-/ngrok-linux-x64-gnu-1.5.2.tgz",
|
||||
"integrity": "sha512-VI1mmtl3Ie5uXTVAR9thPiMNMsCWeqkjBUbHAyk2vZ2OXR4Vs2DGjOPXK+wTl/hjF29FXoxunjhMy6caF9ht0Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -397,9 +397,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-linux-x64-musl": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-musl/-/ngrok-linux-x64-musl-1.5.1.tgz",
|
||||
"integrity": "sha512-6Ajl9wpJSlvukl4WrkIw+WxVwAr7WTGnE35Voec6CERWtKMsO/F+BOSu3pfAa6iwxGK//JBpsTT1IwLLw7b2xQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-linux-x64-musl/-/ngrok-linux-x64-musl-1.5.2.tgz",
|
||||
"integrity": "sha512-F4j9EyC/0R3IgYSd+OER4bC8bxuBubvj33e24GvQnRF/IQaKhpybkvQbz54fnvsL7y0j2BB42NAIm2CFtk7tCw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -413,9 +413,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-win32-arm64-msvc": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-arm64-msvc/-/ngrok-win32-arm64-msvc-1.5.1.tgz",
|
||||
"integrity": "sha512-JUH2yZxDPQGmQNT1d2KIu64u2k/R6uG1kEIXjcbsoff37v9aI6nUlzldRWB/wFSYkpZ4W/EuovM4Epar+fQOxQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-arm64-msvc/-/ngrok-win32-arm64-msvc-1.5.2.tgz",
|
||||
"integrity": "sha512-0OMXNjWElM1MQX7lMBnpRtafS9+3ybauqGD4m2dZcIm6hFvexsJFwNgx0mCa5aKxe2mQ4zNarEUd+SqG2Aa4/g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -429,9 +429,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-win32-ia32-msvc": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-ia32-msvc/-/ngrok-win32-ia32-msvc-1.5.1.tgz",
|
||||
"integrity": "sha512-zS1JsMTJHnY+lPJFUwKnB5fzPm4GZCKeeZLehHrXP0LpQaKN8Y/vywqDGhuC0WtymvWE88+oreMV/6hQdviLSA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-ia32-msvc/-/ngrok-win32-ia32-msvc-1.5.2.tgz",
|
||||
"integrity": "sha512-hdvhnr7Br4XhUblpW67v5XP6FyoQwJ2xSbwas4KW4hZ3F4cw0m6sqXpssRfmqg3/5HJony1H5B2jLi0x4J7uOw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@@ -445,9 +445,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ngrok/ngrok-win32-x64-msvc": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-x64-msvc/-/ngrok-win32-x64-msvc-1.5.1.tgz",
|
||||
"integrity": "sha512-HegRwV9Gchh4p7K7sC6SPpWmFRwDEgwPByrb8tkuWDyP+EWNgpt3GKp8OAIK2xdWWHnN5VIwMa9u3COE/e5S8w==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@ngrok/ngrok-win32-x64-msvc/-/ngrok-win32-x64-msvc-1.5.2.tgz",
|
||||
"integrity": "sha512-aHuMiRti9Taow9DlYLGVmu9CXtXD/v4CBQWpZlmt7VGuK1KsTWWLaGIBFVp6UXnyW87b0A+KC69Kn/Xjylw+sg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -4045,9 +4045,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/openai": {
|
||||
"version": "5.11.0",
|
||||
"resolved": "https://registry.npmjs.org/openai/-/openai-5.11.0.tgz",
|
||||
"integrity": "sha512-+AuTc5pVjlnTuA9zvn8rA/k+1RluPIx9AD4eDcnutv6JNwHHZxIhkFy+tmMKCvmMFDQzfA/r1ujvPWB19DQkYg==",
|
||||
"version": "5.12.0",
|
||||
"resolved": "https://registry.npmjs.org/openai/-/openai-5.12.0.tgz",
|
||||
"integrity": "sha512-vUdt02xiWgOHiYUmW0Hj1Qu9OKAiVQu5Bd547ktVCiMKC1BkB5L3ImeEnCyq3WpRKR6ZTaPgekzqdozwdPs7Lg==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"openai": "bin/cli"
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.48",
|
||||
"version": "1.5.49",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
@@ -42,7 +42,7 @@
|
||||
"homepage": "https://github.com/miroslavpejic85/mirotalk",
|
||||
"dependencies": {
|
||||
"@mattermost/client": "10.9.0",
|
||||
"@ngrok/ngrok": "1.5.1",
|
||||
"@ngrok/ngrok": "1.5.2",
|
||||
"@sentry/node": "^10.1.0",
|
||||
"axios": "^1.11.0",
|
||||
"chokidar": "^4.0.3",
|
||||
@@ -61,7 +61,7 @@
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"js-yaml": "^4.1.0",
|
||||
"nodemailer": "^7.0.5",
|
||||
"openai": "^5.11.0",
|
||||
"openai": "^5.12.0",
|
||||
"qs": "^6.14.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"swagger-ui-express": "^5.0.1",
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@ let brand = {
|
||||
},
|
||||
about: {
|
||||
imageUrl: '../images/mirotalk-logo.gif',
|
||||
title: 'WebRTC P2P v1.5.48',
|
||||
title: 'WebRTC P2P v1.5.49',
|
||||
html: `
|
||||
<button
|
||||
id="support-button"
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.5.48
|
||||
* @version 1.5.49
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -11242,7 +11242,7 @@ function showAbout() {
|
||||
Swal.fire({
|
||||
background: swBg,
|
||||
position: 'center',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.48',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.49',
|
||||
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
|
||||
customClass: { image: 'img-about' },
|
||||
html: `
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# MiroTalk Widgets
|
||||
|
||||
This directory contains embeddable example widgets for MiroTalk that can be integrated into any website or application.
|
||||
@@ -0,0 +1,738 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk - Support Widget</title>
|
||||
<style>
|
||||
.widget-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.widget-container:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #00e676;
|
||||
margin-right: 8px;
|
||||
animation: pulse 2s infinite;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: #00e676;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: #ff5252;
|
||||
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.online-text {
|
||||
color: #00e676;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.offline-text {
|
||||
color: #ff5252;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: fadeInUp 0.6s ease 0.1s both;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #e0e0e0;
|
||||
animation: fadeInUp 0.6s ease 0.2s both;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeInUp 0.6s ease 0.3s both;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #333;
|
||||
margin: 0 6px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: #bbb;
|
||||
animation: fadeInUp 0.6s ease 0.4s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #333 0%, #444 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: linear-gradient(135deg, #444 0%, #555 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 230, 118, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
animation: fadeInUp 0.6s ease 0.5s both;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #00e676;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.widget-container {
|
||||
width: 300px;
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.widget-container {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.widget-container {
|
||||
width: 260px;
|
||||
padding: 18px;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -26px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 18px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.widget-container {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.online-text,
|
||||
.offline-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.widget-container {
|
||||
width: 220px;
|
||||
padding: 14px;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -22px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation adjustments */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.widget-container {
|
||||
padding: 12px;
|
||||
width: 280px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.widget-container {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget-container">
|
||||
<!-- Online indicator -->
|
||||
<div class="online-indicator">
|
||||
<div class="status-dot" aria-hidden="true"></div>
|
||||
<div class="online-text">We are online</div>
|
||||
<div class="offline-text">We are offline</div>
|
||||
<div class="close-btn" onclick="closeWidget()" aria-label="Close widget" role="button" tabindex="0">
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main heading -->
|
||||
<h2 class="main-heading">Need a hand?</h2>
|
||||
|
||||
<!-- Subheading -->
|
||||
<p class="subheading">
|
||||
Hop on a <span style="font-weight: bold">Free 1:1 or Group Consultation</span> with a MiroTalk Expert
|
||||
right now!
|
||||
</p>
|
||||
|
||||
<!-- Expert images -->
|
||||
<div class="expert-images">
|
||||
<img src="https://i.pravatar.cc/40?img=1" class="expert-img" alt="Expert consultant 1" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=2" class="expert-img" alt="Expert consultant 2" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=3" class="expert-img" alt="Expert consultant 3" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="connect-text">connect in < 10 seconds</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<button class="btn" onclick="startAudioCall()" aria-label="Start audio call with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M6.6,10.8c1.3,2.6,3.5,4.8,6.1,6.1l2-2c0.4-0.4,1-0.5,1.5-0.3c1.6,0.5,3.3,0.8,5,0.8c0.6,0,1,0.4,1,1V21c0,0.6-0.4,1-1,1C10.1,22,2,13.9,2,4c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1c0,1.7,0.3,3.4,0.8,5C7.1,9.8,7,10.4,6.6,10.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Audio Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="startVideoCall()" aria-label="Start video call with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4v-11l-4 4z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Video Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="startScreenShare()" aria-label="Start screen sharing with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Screen Share</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="joinRoom()" aria-label="Join support room">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Join Room</span>
|
||||
</button>
|
||||
|
||||
<div class="footer-text">
|
||||
Powered by <a href="#" class="footer-link" onclick="openMiroTalk()">MiroTalk</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const indicator = document.querySelector('.online-indicator');
|
||||
const statusDot = document.querySelector('.status-dot');
|
||||
const onlineText = document.querySelector('.online-text');
|
||||
const offlineText = document.querySelector('.offline-text');
|
||||
|
||||
const domain = 'p2p.mirotalk.com'; // Replace with your MiroTalk server domain
|
||||
|
||||
const roomId = 'test'; // Replace with desired room ID
|
||||
|
||||
const userName = 'guest-' + Math.floor(Math.random() * 10000);
|
||||
|
||||
let isOnline = true; // Replace with actual online status check logic
|
||||
|
||||
checkOnlineStatus(roomId);
|
||||
|
||||
function updateStatusUI(online) {
|
||||
isOnline = online;
|
||||
|
||||
if (online) {
|
||||
statusDot.classList.add('online');
|
||||
statusDot.classList.remove('offline');
|
||||
onlineText.style.display = 'inline';
|
||||
offlineText.style.display = 'none';
|
||||
} else {
|
||||
statusDot.classList.add('offline');
|
||||
statusDot.classList.remove('online');
|
||||
onlineText.style.display = 'none';
|
||||
offlineText.style.display = 'inline';
|
||||
}
|
||||
|
||||
console.log('Room active status:', online);
|
||||
}
|
||||
|
||||
async function checkOnlineStatus(roomId) {
|
||||
return updateStatusUI(isOnline); // For testing, assume always online comment this line to enable real status check
|
||||
|
||||
try {
|
||||
// Enable HOST_PROTECTED mode or OIDC mode on the MiroTalk server otherwise this will return always Unauthorized
|
||||
const response = await fetch(`https://${domain}/isRoomActive`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ roomId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const online = data.message && data.message !== 'Unauthorized';
|
||||
updateStatusUI(online);
|
||||
} catch (error) {
|
||||
console.warn('Failed to check room status:', error.message);
|
||||
updateStatusUI(false);
|
||||
}
|
||||
}
|
||||
|
||||
function closeWidget() {
|
||||
const widget = document.querySelector('.widget-container');
|
||||
widget.style.animation = 'fadeOut 0.3s ease forwards';
|
||||
setTimeout(() => {
|
||||
widget.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function alertOffline() {
|
||||
alert('Sorry, support is currently offline.');
|
||||
}
|
||||
|
||||
function startAudioCall() {
|
||||
if (isOnline) {
|
||||
console.log('Starting audio call...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=1&video=0&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function startVideoCall() {
|
||||
if (isOnline) {
|
||||
console.log('Starting video call...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=0&video=1&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function startScreenShare() {
|
||||
if (isOnline) {
|
||||
console.log('Starting screen share...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=0&video=0&screen=1`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function joinRoom() {
|
||||
if (isOnline) {
|
||||
console.log('Joining room...');
|
||||
window.open(`https://${domain}/join?room=${roomId}`, '_blank');
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function openMiroTalk() {
|
||||
window.open(`https://${domain}`, '_blank');
|
||||
}
|
||||
|
||||
// Add keyboard navigation support
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeWidget();
|
||||
}
|
||||
});
|
||||
|
||||
// Add fade out animation to CSS
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(0.9); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk - Simple Iframe Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe
|
||||
id="mirotalkIframe"
|
||||
allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write; web-share; autoplay"
|
||||
src="https://p2p.mirotalk.com/newcall"
|
||||
style="height: 100vh; width: 100vw; border: 0px"
|
||||
></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk P2P Iframe Demo</title>
|
||||
|
||||
<script src="https://p2p.mirotalk.com/js/iframe.js" defer></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const domain = 'p2p.mirotalk.com';
|
||||
const options = {
|
||||
room: 'test',
|
||||
name: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
avatar: 0,
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
token: null,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
parentNode: document.querySelector('#meet'),
|
||||
};
|
||||
const api = new IframeApi(domain, options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="meet"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user