diff --git a/backend/gradio_webrtc/webrtc.py b/backend/gradio_webrtc/webrtc.py index 16ce932..2dcd676 100644 --- a/backend/gradio_webrtc/webrtc.py +++ b/backend/gradio_webrtc/webrtc.py @@ -762,6 +762,10 @@ class WebRTC(Component): "waiting": "", **(button_labels or {}), } + if video_chat is True: + # ensure modality and mode when video_chat is True + self.modality = "audio-video" + self.mode = "send-receive" if track_constraints is None and modality == "audio": track_constraints = { "echoCancellation": True, @@ -797,10 +801,7 @@ class WebRTC(Component): } self.track_constraints = track_constraints self.event_handler: Callable | StreamHandler | None = None - if video_chat is True: - # ensure modality and mode when video_chat is True - self.modality = "audio-video" - self.mode = "send-receive" + super().__init__( label=label, every=every, diff --git a/frontend/Index.svelte b/frontend/Index.svelte index f98e791..efd7f12 100644 --- a/frontend/Index.svelte +++ b/frontend/Index.svelte @@ -68,7 +68,22 @@ {scale} {min_width} allow_overflow={false}> - + gradio.dispatch("clear")} + on:play={() => gradio.dispatch("play")} + on:pause={() => gradio.dispatch("pause")} + on:upload={() => gradio.dispatch("upload")} + on:stop={() => gradio.dispatch("stop")} + on:end={() => gradio.dispatch("end")} + on:start_recording={() => gradio.dispatch("start_recording")} + on:stop_recording={() => gradio.dispatch("stop_recording")} + on:tick={() => gradio.dispatch("tick")} + on:error={({ detail }) => gradio.dispatch("error", detail)} + i18n={gradio.i18n} + stream_handler={(...args) => gradio.client.stream(...args)} + {on_change_cb} {rtc_configuration} + on:tick={() => gradio.dispatch("tick")} + on:error={({ detail }) => gradio.dispatch("error", detail)}> {:else}= 0.6" } }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.anpm.alibaba-inc.com/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/cropperjs": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz", @@ -2396,6 +2410,20 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.anpm.alibaba-inc.com/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/es-define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", @@ -3246,6 +3274,20 @@ "node": ">=0.10.0" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.anpm.alibaba-inc.com/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/immutable": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", @@ -3390,6 +3432,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.anpm.alibaba-inc.com/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true, + "license": "MIT" + }, "node_modules/isexe": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", @@ -3511,6 +3560,44 @@ "resolved": "https://registry.npmjs.org/lazy-brush/-/lazy-brush-1.0.1.tgz", "integrity": "sha512-xT/iSClTVi7vLoF8dCWTBhCuOWqsLXCMPa6ucVmVAk6hyNCM5JeS1NLhXqIrJktUg+caEYKlqSOUU4u3cpXzKg==" }, + "node_modules/less": { + "version": "4.2.2", + "resolved": "https://registry.anpm.alibaba-inc.com/less/-/less-4.2.2.tgz", + "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=6" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "source-map": "~0.6.0" + } + }, + "node_modules/less/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.anpm.alibaba-inc.com/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/lightningcss": { "version": "1.27.0", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.27.0.tgz", @@ -3772,6 +3859,32 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.anpm.alibaba-inc.com/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.anpm.alibaba-inc.com/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "license": "ISC", + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/marked": { "version": "12.0.2", "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz", @@ -3848,6 +3961,20 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.anpm.alibaba-inc.com/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -4017,6 +4144,24 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/needle": { + "version": "3.3.1", + "resolved": "https://registry.anpm.alibaba-inc.com/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, "node_modules/next-tick": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", @@ -4072,6 +4217,16 @@ "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", "dev": true }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.anpm.alibaba-inc.com/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parse-srcset": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", @@ -4173,6 +4328,17 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.anpm.alibaba-inc.com/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/pirates": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", @@ -4241,6 +4407,14 @@ "asap": "~2.0.3" } }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.anpm.alibaba-inc.com/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -4615,8 +4789,7 @@ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, - "optional": true, - "peer": true + "optional": true }, "node_modules/saxes": { "version": "6.0.0", diff --git a/frontend/package.json b/frontend/package.json index 5534875..82a2022 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,8 +23,9 @@ }, "devDependencies": { "@gradio/preview": "0.12.0", + "less": "^4.2.2", "prettier": "3.3.3", - "vite-plugin-commonjs": "^0.10.4" + "vite-plugin-commonjs": "^0.10.4" }, "exports": { "./package.json": "./package.json", diff --git a/frontend/shared/VideoChat.svelte b/frontend/shared/VideoChat.svelte index d4ba9fd..773dc41 100644 --- a/frontend/shared/VideoChat.svelte +++ b/frontend/shared/VideoChat.svelte @@ -1,56 +1,568 @@ -
whatever i need
+
+ + {#if !webcam_accessed} +
+ access_webcam()} /> +
+ {/if} +
+
+
+
+
+
+
+
cameraListShow = false}> + {#if cameraOff} + + {:else} + + {/if} + {#if stream_state === "closed"}
{/if} +
+ {#each available_video_devices as device, i} +
handle_device_change(device.deviceId)}>{device.label}
+ {#if selected_video_device && device.deviceId === selected_video_device.deviceId}
{/if} + {/each} +
+
+
micListShow = false}> + {#if micMuted} + {:else} + {/if} + {#if stream_state === "closed"}
{/if} +
+ {#each available_audio_devices as device, i} +
handle_device_change(device.deviceId)}>{device.label}
+ {#if selected_audio_device && device.deviceId === selected_audio_device.deviceId}
{/if} + {/each} +
+
+
+ {#if volumeMuted} + + {:else} + + {/if} +
+
+
+
+ {#if videoShowType === 'picture-in-picture'} + + {:else} + + {/if} +
+
+
+
+
+ +
+
- + &.picture-in-picture { + .local-video-container, .remote-video-container { + position: absolute; + top: 50%; + left: 50%; + width: 10px; + height: 10px; + border-radius: 32px; + overflow: hidden; + transition: all 0.3s; + } + .local-video-container { + z-index: 1; + } + .local-video, .remote-video { + width: 100%; + height: 100%; + object-fit: cover; + } + } + &.side-by-side { + display: flex; + justify-content: space-between; + align-items: center; + .local-video-container, .remote-video-container { + position: static; + width: 49%; + height: 100%; + flex-shrink: 0; + flex-grow: 0; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(20px); + border-radius: 32px; + } + .local-video, .remote-video { + width: 100%; + height: 100%; + object-fit: contain; + } + } + .actions { + position: absolute; + .action-group { + border-radius: 12px; + background: rgba(88, 87, 87, 0.5); + padding: 2px; + backdrop-filter: blur(8px); + .action { + cursor: pointer; + width: 42px; + height: 42px; + border-radius: 8px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .corner { + position: absolute; + right: 3px; + bottom: 3px; + width: 6px; + height: 6px; + border-top: 3px transparent solid; + border-left: 3px transparent solid; + border-bottom: 3px #fff solid; + border-right: 3px #fff solid; + } + // &:hover { + // .selectors { + // display: block !important; + // } + // } + .selectors { + position:absolute; + top: 0; + left: calc(100%); + margin-left: 3px; + border-radius: 12px; + width: max-content; + overflow: hidden; + background: rgba(90, 90, 90, 0.5); + backdrop-filter: blur(8px); + .selector { + cursor: pointer; + height: 42px; + line-height: 42px; + color: #fff; + font-size: 14px; + &:hover { + background: #67666A; + } + padding-left: 15px; + padding-right: 50px; + &.active { + .active-icon { + display: block; + } + } + .active-icon { + position: absolute; + right: 10px; + width: 40px; + height: 40px;; + + } + } + + } + } + .action:hover { + background: #67666A; + } + } + .action-group + .action-group { + margin-top: 10px; + } + } + } + .player-controls { + height: 15%; + position: relative; + } + + } + \ No newline at end of file diff --git a/frontend/shared/background.png b/frontend/shared/background.png new file mode 100644 index 0000000..49dbf8d Binary files /dev/null and b/frontend/shared/background.png differ