[mirotalksfu] - add screen query param

README.md

@@ -175,8 +175,8 @@ Set the inbound rules:
 $ curl -X POST "http://localhost:3010/api/v1/meeting" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json"
 $ curl -X POST "https://sfu.mirotalk.org/api/v1/meeting" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json"
 # The response will give you a entrypoint / URL for the direct join to the meeting.
-$ curl -X POST "http://localhost:3010/api/v1/join" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalksfu","audio":"0","video":"0","notify":"0"}'
+$ curl -X POST "http://localhost:3010/api/v1/join" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalksfu","audio":"0","video":"0","screen":"0","notify":"0"}'
-$ curl -X POST "https://sfu.mirotalk.org/api/v1/join" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalksfu","audio":"0","video":"0","notify":"0"}'
+$ curl -X POST "https://sfu.mirotalk.org/api/v1/join" -H "authorization: mirotalksfu_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalksfu","audio":"0","video":"0","screen":"0","notify":"0"}'
 ```
 
 </details>
@@ -187,7 +187,7 @@ $ curl -X POST "https://sfu.mirotalk.org/api/v1/join" -H "authorization: mirotal
 <br/>
 
 -   You can `join` directly to `room` by going to
--   https://sfu.mirotalk.org/join?room=test&name=mirotalksfu&audio=0&video=0&notify=0
+-   https://sfu.mirotalk.org/join?room=test&name=mirotalksfu&audio=0&video=0&screen=0&notify=0
 
     | Params | Type    | Description     |
     | ------ | ------- | --------------- |
@@ -195,6 +195,7 @@ $ curl -X POST "https://sfu.mirotalk.org/api/v1/join" -H "authorization: mirotal
     | name   | string  | user name       |
     | audio  | boolean | audio stream    |
     | video  | boolean | video stream    |
+    | screen | boolean | screen stream   |
     | notify | boolean | welcome message |
 
 </details>

app/api/join/join.js

@@ -17,6 +17,7 @@ function getResponse() {
             name: 'mirotalksfu',
             audio: true,
             video: true,
+            screen: true,
             notify: true,
         }),
     });

app/api/join/join.php

@@ -20,6 +20,7 @@ $data = array(
     "name"   => "mirotalksfu",
     "audio"  => true,
     "video"  => true,
+    "screen" => true,
     "notify" => true,
 );
 $data_string = json_encode($data);

app/api/join/join.py

@@ -14,6 +14,7 @@ data = {
     "name": "mirotalksfu",
     "audio": "true",
     "video": "true",
+    "screen": "true",
     "notify": "true",
 }
 

app/api/join/join.sh

@@ -6,5 +6,5 @@ MIROTALK_URL="https://sfu.mirotalk.org/api/v1/join"
 curl $MIROTALK_URL \
     --header "authorization: $API_KEY" \
     --header "Content-Type: application/json" \
-    --data '{"room":"test","name":"mirotalksfu","audio":"1","video":"1","notify":"1"}' \
+    --data '{"room":"test","name":"mirotalksfu","audio":"1","video":"1","screen":"1""notify":"1"}' \
     --request POST

app/src/Server.js

@@ -171,9 +171,9 @@ app.get(['/newroom'], (req, res) => {
 app.get('/join/', (req, res) => {
     if (hostCfg.authenticated && Object.keys(req.query).length > 0) {
         log.debug('Direct Join', req.query);
-        // http://localhost:3010/join?room=test&name=mirotalksfu&audio=1&video=1&notify=1
+        // http://localhost:3010/join?room=test&name=mirotalksfu&audio=1&video=1&screen=1&notify=1
-        const { room, name, audio, video, notify } = req.query;
+        const { room, name, audio, video, screen, notify } = req.query;
-        if (room && name && audio && video && notify) {
+        if (room && name && audio && video && screen && notify) {
             return res.sendFile(view.room);
         }
     }

app/src/ServerApi.js

@@ -31,6 +31,8 @@ module.exports = class ServerApi {
             data.audio +
             '&video=' +
             data.video +
+            '&screen=' +
+            data.screen +
             '&notify=' +
             data.notify
         );

public/js/Room.js

@@ -43,9 +43,9 @@ let isEnumerateAudioDevices = false;
 let isEnumerateVideoDevices = false;
 let isAudioAllowed = false;
 let isVideoAllowed = false;
+let isScreenAllowed = getScreen();
 let isAudioVideoAllowed = false;
 let joinRoomWithoutAudioVideo = true;
-let isScreenAllowed = false;
 let initAudioButton = null;
 let initVideoButton = null;
 let initAudioVideoButton = null;
@@ -252,10 +252,23 @@ function appenChild(device, el) {
 // API CHECK
 // ####################################################
 
+function getScreen() {
+    let qs = new URLSearchParams(window.location.search);
+    let screen = qs.get('screen');
+    if (screen) {
+        screen = screen.toLowerCase();
+        let queryScreen = screen === '1' || screen === 'true';
+        if (queryScreen != null && (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia))
+            return queryScreen;
+    }
+    return false;
+}
+
 function getNotify() {
     let qs = new URLSearchParams(window.location.search);
     let notify = qs.get('notify');
     if (notify) {
+        notify = notify.toLowerCase();
         let queryNotify = notify === '1' || notify === 'true';
         if (queryNotify != null) return queryNotify;
     }
@@ -460,6 +473,10 @@ async function shareRoom(useNavigator = false) {
                 };
                 shareRoomByEmail(message);
             }
+            // share screen on join
+            if (isScreenAllowed) {
+                rc.shareScreen();
+            }
         });
         makeRoomQR();
     }
@@ -518,6 +535,7 @@ function joinRoom(peer_name, room_id) {
             peer_info,
             isAudioAllowed,
             isVideoAllowed,
+            isScreenAllowed,
             roomIsReady,
         );
         handleRoomClientEvents();

public/js/RoomClient.js

@@ -81,6 +81,7 @@ class RoomClient {
         peer_info,
         isAudioAllowed,
         isVideoAllowed,
+        isScreenAllowed,
         successCallback,
     ) {
         this.remoteAudioEl = remoteAudioEl;
@@ -96,6 +97,7 @@ class RoomClient {
 
         this.isAudioAllowed = isAudioAllowed;
         this.isVideoAllowed = isVideoAllowed;
+        this.isScreenAllowed = isScreenAllowed;
         this.producerTransport = null;
         this.consumerTransport = null;
         this.device = null;
@@ -242,7 +244,15 @@ class RoomClient {
         }
         this.refreshParticipantsCount();
         console.log('Participants Count:', participantsCount);
-        notify && participantsCount == 1 ? shareRoom() : sound('joined');
+        // notify && participantsCount == 1 ? shareRoom() : sound('joined');
+        if (notify && participantsCount == 1) {
+            shareRoom();
+        } else {
+            if (this.isScreenAllowed) {
+                this.shareScreen();
+            }
+            sound('joined');
+        }
     }
 
     async loadDevice(routerRtpCapabilities) {
@@ -563,6 +573,9 @@ class RoomClient {
             this.setVideoOff(this.peer_info, false);
             this.sendVideoOff();
         }
+        // if (this.isScreenAllowed) {
+        //     this.shareScreen();
+        // }
     }
 
     // ####################################################
@@ -1231,6 +1244,42 @@ class RoomClient {
         }
     }
 
+    // ####################################################
+    // SHARE SCREEN ON JOIN
+    // ####################################################
+
+    shareScreen() {
+        if (!this.isMobileDevice && (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia)) {
+            this.sound('open');
+            // startScreenButton.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) {
+                    startScreenButton.click();
+                    console.log('10 ----> Screen is on');
+                } else {
+                    console.log('10 ----> Screen is on');
+                }
+            });
+        } else {
+            console.log('10 ----> Screen is off');
+        }
+    }
+
     // ####################################################
     // EXIT ROOM
     // ####################################################