[mirotalk] - add screen share before join

public/js/client.js

@@ -265,6 +265,7 @@ let countTime; // conference count time
 // init audio-video
 let initAudioBtn;
 let initVideoBtn;
+let initScreenShareBtn;
 // init Devices select
 let initVideo;
 let initVideoSelect;
@@ -436,6 +437,8 @@ let lS = new LocalStorage();
  */
 function getHtmlElementsById() {
     countTime = getId('countTime');
+    // init buttons
+    initScreenShareBtn = getId('initScreenShareBtn');
     // Init devices select
     initVideo = getId('initVideo');
     initVideoSelect = getId('initVideoSelect');
@@ -582,6 +585,8 @@ function getHtmlElementsById() {
 function setButtonsToolTip() {
     // not need for mobile
     if (isMobileDevice) return;
+    // init buttons
+    setTippy(initScreenShareBtn, 'Toggle screen sharing', 'top');
     // main buttons
     setTippy(shareRoomBtn, 'Invite others to join', 'right-start');
     setTippy(audioBtn, 'Stop the audio', 'right-start');
@@ -2968,10 +2973,14 @@ function setScreenShareBtn() {
         buttons.main.showScreenBtn
     ) {
         isScreenSharingSupported = true;
+        initScreenShareBtn.addEventListener('click', async (e) => {
+            await toggleScreenSharing();
+        });
         screenShareBtn.addEventListener('click', async (e) => {
             await toggleScreenSharing();
         });
     } else {
+        initScreenShareBtn.style.display = 'none';
         screenShareBtn.style.display = 'none';
         elemDisplay(getId('screenFpsDiv'), false);
     }
@@ -4106,6 +4115,16 @@ async function toggleScreenSharing() {
             await stopLocalVideoTrack();
             await refreshMyLocalStream(screenMediaPromise);
             await refreshMyStreamToPeers(screenMediaPromise);
+
+            if (initStream) {
+                stopTracks(initStream);
+                initStream = screenMediaPromise;
+                const newStream = new MediaStream([initStream.getVideoTracks()[0]]);
+                initVideo.style.display = 'block';
+                initVideo.classList.toggle('mirror');
+                initVideo.srcObject = newStream;
+            }
+
             myVideo.classList.toggle('mirror');
             setScreenSharingStatus(isScreenStreaming);
             if (myVideoAvatarImage && !useVideo)
@@ -4125,8 +4144,12 @@ async function toggleScreenSharing() {
  * @param {boolean} status of screen sharing
  */
 function setScreenSharingStatus(status) {
+    initScreenShareBtn.className = status ? className.screenOff : className.screenOn;
     screenShareBtn.className = status ? className.screenOff : className.screenOn;
+    setTippy(initScreenShareBtn, status ? 'Stop screen sharing' : 'Start screen sharing', 'right-start');
     setTippy(screenShareBtn, status ? 'Stop screen sharing' : 'Start screen sharing', 'right-start');
+    disable(initVideoSelect, status);
+    disable(initVideoBtn, status);
 }
 
 /**
@@ -7523,3 +7546,12 @@ function elemDisplay(elem, yes) {
 function sanitizeXSS(src) {
     return JSON.parse(filterXSS(JSON.stringify(src)));
 }
+
+/**
+ * Disable element
+ * @param {object} elem
+ * @param {boolean} disabled
+ */
+function disable(elem, disabled) {
+    elem.disabled = disabled;
+}

public/views/client.html

@@ -91,6 +91,7 @@ access to use this app.
             ></video>
             <button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
             <button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
+            <button id="initScreenShareBtn" class="fas fa-desktop"></button>
             <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
             <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
             <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>