[mirotalkc2c] - feat(screen): show camera as picture-in-picture over the shared screen

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.4.83 - Environment Configuration
+# MiroTalk C2C v.1.4.84 - Environment Configuration
 # ====================================================
 
 # App environment

README.md

@@ -73,14 +73,23 @@ Open [http://localhost:8080](http://localhost:8080) - done!
 <details>
 <summary>🖼️ Camera backgrounds</summary>
 
-In **Settings > Video > Background**, select **Off**, **Blur**, or **Image**. PNG, JPEG, and WebP images up to 10 MB are processed locally in your browser and are not uploaded. Effects appear in the camera preview, outgoing camera video, and camera recordings. Screen sharing is unaffected; the selected effect resumes when returning to the camera. Background changes are blocked while recording.
+In **Settings > Video > Background**, select **Off**, **Blur**, or **Image**. PNG, JPEG, and WebP images up to 10 MB are processed locally in your browser and are not uploaded. Effects appear in the camera preview, outgoing camera video, and camera recordings. Screen sharing is unaffected unless the camera is shown over the shared screen (see below); the selected effect resumes when returning to the camera. Background changes are blocked while recording.
 
 Effects require WebGL2 and canvas stream capture; blur also requires canvas filter support. MediaPipe Tasks Vision 0.10.21 and its WASM files are lazy-loaded from jsDelivr, and the selfie segmentation model (version 1) is loaded from Google Storage. These hosts must be reachable and allowed by any custom CSP, including WASM execution. Processing failures fall back to the original camera.
 
 Effect output is capped at 1280 x 720 and 15 FPS. Off uses the original camera without processing. Performance varies by device, and background tabs may throttle rendering. Image selections are not persisted across page reloads.
 
 </details>
 
+<details>
+<summary>🎥 Camera while sharing screen</summary>
+
+In **Settings > Video > Camera while sharing screen**, pick a corner (**Bottom right**, **Bottom left**, **Top right**, **Top left**) to show your camera as a picture-in-picture bubble over your shared screen, or **Off** (default) to share the screen only. The bubble is drawn in your browser and sent together with the screen as a single video, so the other participant and recordings see it without any extra setup. The corner can be changed while sharing; turning it on mid-share applies the next time you share.
+
+The bubble is shown only if your camera is on when you start sharing, and keeps the selected camera background effect. The composed video is capped at 1920 x 1080 and 30 FPS, uses a bit more CPU than plain screen sharing, and needs canvas stream capture (it falls back to the plain screen when unavailable). Desktop browsers only.
+
+</details>
+
 <details>
 <summary>🐳 Docker</summary>
 

backend/server.js

@@ -7,7 +7,7 @@
  * @link    Live demo: https://c2c.mirotalk.com
  * @license Open source: AGPLv3 | Commercial/closed source (official channel): https://docs.mirotalk.com/sites/c2c/
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.83
+ * @version 1.4.84
  */
 
 require('dotenv').config();

frontend/html/client.html

@@ -54,6 +54,7 @@
         <script defer src="../js/fix-webm-duration.js"></script>
         <script defer src="../js/recording.js"></script>
         <script defer src="../js/background-effects.js"></script>
+        <script defer src="../js/screen-camera.js"></script>
         <script defer src="../js/client.js"></script>
         <script defer src="../js/translate.js"></script>
         <script defer src="../js/noise-processor.js"></script>
@@ -273,6 +274,16 @@ <h1>Preparing your call</h1>
                         </button>
                         <div id="backgroundImageName" class="background-image-name" hidden></div>
                     </div>
+                    <div id="screenCameraDiv" class="settings-field" hidden>
+                        <label for="screenCameraSelect">Camera while sharing screen</label>
+                        <select id="screenCameraSelect">
+                            <option value="off">Off</option>
+                            <option value="bottom-right">Bottom right</option>
+                            <option value="bottom-left">Bottom left</option>
+                            <option value="top-right">Top right</option>
+                            <option value="top-left">Top left</option>
+                        </select>
+                    </div>
                 </div>
 
                 <div class="settings-section">

frontend/js/client.js

@@ -7,7 +7,7 @@
  * @link    Live demo: https://c2c.mirotalk.com
  * @license Open source: AGPLv3 | Commercial/closed source (official channel): https://docs.mirotalk.com/sites/c2c/
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.83
+ * @version 1.4.84
  */
 
 const savedTheme = window.localStorage.getItem('home-theme');
@@ -62,6 +62,8 @@ const backgroundEffectLoading = document.getElementById('backgroundEffectLoading
 const backgroundImageInput = document.getElementById('backgroundImageInput');
 const backgroundImageBtn = document.getElementById('backgroundImageBtn');
 const backgroundImageName = document.getElementById('backgroundImageName');
+const screenCameraDiv = document.getElementById('screenCameraDiv');
+const screenCameraSelect = document.getElementById('screenCameraSelect');
 const videoQualitySelect = document.getElementById('videoQualitySelect');
 const videoFpsDiv = document.getElementById('videoFpsDiv');
 const videoFpsSelect = document.getElementById('videoFpsSelect');
@@ -210,6 +212,7 @@ let noiseSuppressionRequest = 0;
 let noiseSuppressionConstraints = Promise.resolve();
 let microphoneRequest = 0;
 let cameraEffects = null;
+let screenComposer = null; // draws the camera over the shared screen, when enabled
 // Devices actually in use, to restore the selects when a swap fails or a fallback device was opened
 let activeVideoDeviceId = null;
 let activeAudioDeviceId = null;
@@ -1399,6 +1402,10 @@ function handleEvents() {
         screenShareBtn.onclick = async () => {
             await toggleScreenSharing();
         };
+        screenCameraDiv.hidden = !ScreenCameraComposer.supported();
+        screenCameraSelect.onchange = () => {
+            setScreenCameraPosition(screenCameraSelect.value);
+        };
     } else {
         elemDisplay(initScreenShareBtn, false);
         elemDisplay(screenShareBtn, false);
@@ -1664,6 +1671,7 @@ function handleBackgroundError(processor, error) {
     const track = processor.cameraTrack;
     backgroundEffectSelect.value = 'off';
     if (localMediaStream?.getVideoTracks()[0] === processor.outputTrack) attachCameraBackgroundTrack(track);
+    if (screenComposer?.cameraTrack === processor.outputTrack) screenComposer.setCameraTrack(track);
     stopCameraEffects(false);
     updateBackgroundControls();
     popupMessage('warning', 'Camera background', 'Background effects unavailable. Continuing without effects.');
@@ -1807,7 +1815,14 @@ async function toggleScreenSharing() {
                 newStream,
                 '✅ Noise suppression applied to screen sharing audio'
             );
+            handleScreenTrackEnded(newStream.getVideoTracks()[0]);
+            newStream = await composeScreenWithCamera(newStream);
         } else {
+            if (screenComposer) {
+                // Release the camera shown over the screen before opening it again
+                stopScreenComposer();
+                stopCameraEffects();
+            }
             newStream = await getBestUserMedia(constraints);
             newStream = await applyNoiseSuppressionWithLogging(
                 newStream,
@@ -1816,8 +1831,11 @@ async function toggleScreenSharing() {
         }
 
         if (newStream) {
-            stopCameraEffects();
-            localMediaStream?.getVideoTracks().forEach((track) => track.stop());
+            // The camera keeps running while it is drawn over the screen
+            if (!screenComposer) {
+                stopCameraEffects();
+                localMediaStream?.getVideoTracks().forEach((track) => track.stop());
+            }
             if (isScreenStreaming) {
                 if (hasVideoTrack(newStream)) camera = detectCameraFacingMode(newStream);
                 newStream = await prepareCameraBackground(newStream);
@@ -1851,6 +1869,63 @@ async function toggleScreenSharing() {
     }
 }
 
+/**
+ * Go back to the camera when sharing is stopped from the browser UI ("Stop sharing")
+ * @param {MediaStreamTrack} track the screen video track
+ */
+function handleScreenTrackEnded(track) {
+    track?.addEventListener(
+        'ended',
+        () => {
+            if (isScreenStreaming) toggleScreenSharing();
+        },
+        { once: true }
+    );
+}
+
+function getScreenCameraPosition() {
+    const position = localStorageConfig.video.settings.screen_camera;
+    return typeof ScreenCameraComposer !== 'undefined' && ScreenCameraComposer.isPosition(position) ? position : 'off';
+}
+
+function setScreenCameraPosition(position) {
+    localStorageConfig.video.settings.screen_camera = position;
+    saveLocalStorageConfig();
+    if (screenComposer) {
+        screenComposer.setPosition(position);
+    } else if (isScreenStreaming && position !== 'off') {
+        popupMessage('toast', 'Camera while sharing screen', 'Applies the next time you share your screen', 'top');
+    }
+}
+
+/**
+ * Draw the camera over the shared screen, if enabled and the camera is on
+ * @param {MediaStream} screenStream
+ * @returns {Promise<MediaStream>} the composed stream, or the screen stream as is
+ */
+async function composeScreenWithCamera(screenStream) {
+    const position = getScreenCameraPosition();
+    const cameraTrack = localMediaStream?.getVideoTracks()[0];
+    if (position === 'off' || !isMyVideoActiveBefore || cameraTrack?.readyState !== 'live') return screenStream;
+    if (!ScreenCameraComposer.supported()) return screenStream;
+    const composer = new ScreenCameraComposer(position);
+    try {
+        const stream = await composer.start(screenStream, cameraTrack);
+        screenComposer = composer;
+        return stream;
+    } catch (err) {
+        console.warn('[Warning] Unable to show the camera over the shared screen', err);
+        composer.stop(false);
+        return screenStream;
+    }
+}
+
+function stopScreenComposer() {
+    const composer = screenComposer;
+    screenComposer = null;
+    composer?.stop();
+}
+
 function changeCamera(deviceId = false) {
     if (backgroundEffectsBusy || isScreenStreaming) return;
     if (recording && recording.isStreamRecording()) {
@@ -2353,6 +2428,7 @@ function loadLocalStorageConfig() {
     switchNoiseSuppression.checked = localStorageConfig?.audio?.settings?.noise_suppression ?? false;
     switchMaxVideoQuality.checked = localStorageConfig.video.settings.best_quality;
     switchKeepAspectRatio.checked = localStorageConfig.video.settings.aspect_ratio;
+    screenCameraSelect.value = getScreenCameraPosition();
     if (localStorageConfig.video.init.hide) initHideMeBtn.click();
     if (
         !localStorageConfig.video.settings.best_quality &&