[mirotalk] - add screen query param

.env.template

@@ -22,5 +22,5 @@ TURN_PASSWORD=YourNumbPassword
 
 API_KEY_SECRET=mirotalk_default_secret
 
-# Heroku
-# https://devcenter.heroku.com/articles/config-vars
+# Auto deploy on Railway
+# https://railway.app/new/template/mirotalk?referralCode=mirotalk

README.md

@@ -70,8 +70,8 @@
 <br/>
 
 -   You can `join` directly to `room` by going to:
--   https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=0&video=0&notify=0
--   https://mirotalk.herokuapp.com/join?room=test&name=mirotalk&audio=0&video=0&notify=0
+-   https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=0&video=0&screen=0&notify=0
+-   https://mirotalk.herokuapp.com/join?room=test&name=mirotalk&audio=0&video=0&screen=0&notify=0
 
     | Params | Type    | Description     |
     | ------ | ------- | --------------- |
@@ -79,6 +79,7 @@
     | name   | string  | user name       |
     | audio  | boolean | audio stream    |
     | video  | boolean | video stream    |
+    | screen | boolean | screen stream   |
     | notify | boolean | welcome message |
 
 </details>

app/src/server.js

@@ -169,17 +169,18 @@ app.get('/join/', (req, res) => {
     if (Object.keys(req.query).length > 0) {
         log.debug('Request Query', req.query);
         /* 
-            http://localhost:3000/join?room=test&name=mirotalk&audio=1&video=1&notify=1
-            https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=1&video=1&notify=1
-            https://mirotalk.herokuapp.com/join?room=test&name=mirotalk&audio=1&video=1&notify=1
+            http://localhost:3000/join?room=test&name=mirotalk&audio=1&video=1&screen=1&notify=1
+            https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=1&video=1&screen=1&notify=1
+            https://mirotalk.herokuapp.com/join?room=test&name=mirotalk&audio=1&video=1&screen=1&notify=1
         */
         let roomName = req.query.room;
         let peerName = req.query.name;
         let peerAudio = req.query.audio;
         let peerVideo = req.query.video;
+        let peerScreen = req.query.screen;
         let notify = req.query.notify;
         // all the params are mandatory for the direct room join
-        if (roomName && peerName && peerAudio && peerVideo && notify) {
+        if (roomName && peerName && peerAudio && peerVideo && peerScreen && notify) {
             return res.sendFile(view.client);
         }
     }

public/js/client.js

@@ -89,6 +89,7 @@ let swalBackground = 'rgba(0, 0, 0, 0.7)'; // black - #16171b - transparent ...
 let peerGeo;
 let peerConnection;
 let myPeerName = getPeerName();
+let isScreenEnabled = getScreenEnabled();
 let notify = getNotify();
 let useAudio = true;
 let useVideo = true;
@@ -581,6 +582,21 @@ function getPeerName() {
     return qs.get('name');
 }
 
+/**
+ * Is screen enabled on join room
+ * @returns {boolean} true/false
+ */
+function getScreenEnabled() {
+    let qs = new URLSearchParams(window.location.search);
+    let screen = qs.get('screen');
+    if (screen) {
+        screen = screen.toLowerCase();
+        let queryPeerScreen = screen === '1' || screen === 'true';
+        return queryPeerScreen;
+    }
+    return false;
+}
+
 /**
  * Check if there is peer connections
  * @returns {boolean} true/false
@@ -673,6 +689,8 @@ function handleServerInfo(config) {
     console.log('Peers count', peers_count);
     if (notify && peers_count == 1) {
         welcomeUser();
+    } else {
+        checkShareScreen();
     }
 }
 
@@ -734,13 +752,15 @@ function whoAreYou() {
  */
 function checkPeerAudioVideo() {
     let qs = new URLSearchParams(window.location.search);
-    let audio = qs.get('audio').toLowerCase();
-    let video = qs.get('video').toLowerCase();
+    let audio = qs.get('audio');
+    let video = qs.get('video');
     if (audio) {
+        audio = audio.toLowerCase();
         let queryPeerAudio = audio === '1' || audio === 'true';
         if (queryPeerAudio != null) handleAudio(audioBtn, false, queryPeerAudio);
     }
     if (video) {
+        video = video.toLowerCase();
         let queryPeerVideo = video === '1' || video === 'true';
         if (queryPeerVideo != null) handleVideo(videoBtn, false, queryPeerVideo);
     }
@@ -815,6 +835,8 @@ function welcomeUser() {
             };
             shareRoomByEmail(message);
         }
+        // share screen on join room
+        checkShareScreen();
     });
 }
 
@@ -1365,6 +1387,36 @@ function loadLocalMedia(stream) {
     handleVideoToImg('myVideo', 'myVideoToImgBtn');
 }
 
+/**
+ * Check if screen is shared on join room
+ */
+function checkShareScreen() {
+    if (!isMobileDevice && isScreenEnabled && (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia)) {
+        playSound('newMessage');
+        // screenShareBtn.click(); // Chrome - Opera - Edge - Brave
+        // handle error: getDisplayMedia requires transient activation from a user gesture on Safari - FireFox
+        Swal.fire({
+            background: swalBackground,
+            position: 'center',
+            icon: 'question',
+            text: 'Do you want to share your screen?',
+            showDenyButton: true,
+            confirmButtonText: `Yes`,
+            denyButtonText: `No`,
+            showClass: {
+                popup: 'animate__animated animate__fadeInDown',
+            },
+            hideClass: {
+                popup: 'animate__animated animate__fadeOutUp',
+            },
+        }).then((result) => {
+            if (result.isConfirmed) {
+                screenShareBtn.click();
+            }
+        });
+    }
+}
+
 /**
  * Load Remote Media Stream obj
  * @param {object} stream media stream audio - video