Start to request screen sharing

assets/3rdparty/getScreenId.js

@@ -0,0 +1,222 @@
+// Last time updated on June 08, 2018
+
+// Latest file can be found here: https://cdn.webrtc-experiment.com/getScreenId.js
+
+// Muaz Khan         - www.MuazKhan.com
+// MIT License       - www.WebRTC-Experiment.com/licence
+// Documentation     - https://github.com/muaz-khan/getScreenId.
+
+// ______________
+// getScreenId.js
+
+/*
+getScreenId(function (error, sourceId, screen_constraints) {
+    // error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
+    // sourceId == null || 'string' || 'firefox'
+    
+    if(navigator.getDisplayMedia) {
+        navigator.getDisplayMedia(screen_constraints).then(onSuccess, onFailure);
+    }
+    else {
+        navigator.mediaDevices.getUserMedia(screen_constraints).then(onSuccess)catch(onFailure);
+    }
+
+}, 'pass second parameter only if you want system audio');
+*/
+
+(function() {
+    window.getScreenId = function(callback, custom_parameter) {
+        if(navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob)) {
+            // microsoft edge => navigator.getDisplayMedia(screen_constraints).then(onSuccess, onFailure);
+            callback({
+                video: true
+            });
+            return;
+        }
+
+        // for Firefox:
+        // sourceId == 'firefox'
+        // screen_constraints = {...}
+        if (!!navigator.mozGetUserMedia) {
+            callback(null, 'firefox', {
+                video: {
+                    mozMediaSource: 'window',
+                    mediaSource: 'window'
+                }
+            });
+            return;
+        }
+
+        window.addEventListener('message', onIFrameCallback);
+
+        function onIFrameCallback(event) {
+            if (!event.data) return;
+
+            if (event.data.chromeMediaSourceId) {
+                if (event.data.chromeMediaSourceId === 'PermissionDeniedError') {
+                    callback('permission-denied');
+                } else {
+                    callback(null, event.data.chromeMediaSourceId, getScreenConstraints(null, event.data.chromeMediaSourceId, event.data.canRequestAudioTrack));
+                }
+
+                // this event listener is no more needed
+                window.removeEventListener('message', onIFrameCallback);
+            }
+
+            if (event.data.chromeExtensionStatus) {
+                callback(event.data.chromeExtensionStatus, null, getScreenConstraints(event.data.chromeExtensionStatus));
+
+                // this event listener is no more needed
+                window.removeEventListener('message', onIFrameCallback);
+            }
+        }
+
+        if(!custom_parameter) {
+            setTimeout(postGetSourceIdMessage, 100);
+        }
+        else {
+            setTimeout(function() {
+                postGetSourceIdMessage(custom_parameter);
+            }, 100);
+        }
+    };
+
+    function getScreenConstraints(error, sourceId, canRequestAudioTrack) {
+        var screen_constraints = {
+            audio: false,
+            video: {
+                mandatory: {
+                    chromeMediaSource: error ? 'screen' : 'desktop',
+                    maxWidth: window.screen.width > 1920 ? window.screen.width : 1920,
+                    maxHeight: window.screen.height > 1080 ? window.screen.height : 1080
+                },
+                optional: []
+            }
+        };
+
+        if(!!canRequestAudioTrack) {
+            screen_constraints.audio = {
+                mandatory: {
+                    chromeMediaSource: error ? 'screen' : 'desktop',
+                    // echoCancellation: true
+                },
+                optional: []
+            };
+        }
+
+        if (sourceId) {
+            screen_constraints.video.mandatory.chromeMediaSourceId = sourceId;
+
+            if(screen_constraints.audio && screen_constraints.audio.mandatory) {
+                screen_constraints.audio.mandatory.chromeMediaSourceId = sourceId;
+            }
+        }
+
+        return screen_constraints;
+    }
+
+    function postGetSourceIdMessage(custom_parameter) {
+        if (!iframe) {
+            loadIFrame(function() {
+                postGetSourceIdMessage(custom_parameter);
+            });
+            return;
+        }
+
+        if (!iframe.isLoaded) {
+            setTimeout(function() {
+                postGetSourceIdMessage(custom_parameter);
+            }, 100);
+            return;
+        }
+
+        if(!custom_parameter) {
+            iframe.contentWindow.postMessage({
+                captureSourceId: true
+            }, '*');
+        }
+        else if(!!custom_parameter.forEach) {
+            iframe.contentWindow.postMessage({
+                captureCustomSourceId: custom_parameter
+            }, '*');
+        }
+        else {
+            iframe.contentWindow.postMessage({
+                captureSourceIdWithAudio: true
+            }, '*');
+        }
+    }
+
+    var iframe;
+
+    // this function is used in RTCMultiConnection v3
+    window.getScreenConstraints = function(callback) {
+        loadIFrame(function() {
+            getScreenId(function(error, sourceId, screen_constraints) {
+                if(!screen_constraints) {
+                    screen_constraints = {
+                        video: true
+                    };
+                }
+
+                callback(error, screen_constraints.video);
+            });
+        });
+    };
+
+    function loadIFrame(loadCallback) {
+        if (iframe) {
+            loadCallback();
+            return;
+        }
+
+        iframe = document.createElement('iframe');
+        iframe.onload = function() {
+            iframe.isLoaded = true;
+
+            loadCallback();
+        };
+        iframe.src = 'https://www.webrtc-experiment.com/getSourceId/'; // https://wwww.yourdomain.com/getScreenId.html
+        iframe.style.display = 'none';
+        (document.body || document.documentElement).appendChild(iframe);
+    }
+
+    window.getChromeExtensionStatus = function(callback) {
+        // for Firefox:
+        if (!!navigator.mozGetUserMedia) {
+            callback('installed-enabled');
+            return;
+        }
+
+        window.addEventListener('message', onIFrameCallback);
+
+        function onIFrameCallback(event) {
+            if (!event.data) return;
+
+            if (event.data.chromeExtensionStatus) {
+                callback(event.data.chromeExtensionStatus);
+
+                // this event listener is no more needed
+                window.removeEventListener('message', onIFrameCallback);
+            }
+        }
+
+        setTimeout(postGetChromeExtensionStatusMessage, 100);
+    };
+
+    function postGetChromeExtensionStatusMessage() {
+        if (!iframe) {
+            loadIFrame(postGetChromeExtensionStatusMessage);
+            return;
+        }
+
+        if (!iframe.isLoaded) {
+            setTimeout(postGetChromeExtensionStatusMessage, 100);
+            return;
+        }
+
+        iframe.contentWindow.postMessage({
+            getChromeExtensionStatus: true
+        }, '*');
+    }
+})();

assets/js/common/utils.js

@@ -792,3 +792,30 @@ function IsFullScreen(){
 function checkEmojiCode(s) {
 	return s.match(/^:[a-zA-Z0-9]+:$/) != null
 }
+
+/**
+ * Request user screen as stream
+ * 
+ * @return {Promise<MediaStream>}
+ */
+function requestUserScreen() {
+	return new Promise((onSuccess, onFailure) => {
+		getScreenId(function (error, sourceId, screen_constraints) {
+			
+			if(error != null)
+				return onFailure(error)
+			
+			// error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
+			// sourceId == null || 'string' || 'firefox'
+			
+			if(navigator.getDisplayMedia) {
+				navigator.getDisplayMedia(screen_constraints).then(onSuccess, onFailure);
+			}
+			else {
+				navigator.mediaDevices.getUserMedia(screen_constraints).then(onSuccess).catch(onFailure);
+			}
+		
+		});
+	})
+	
+}

assets/js/components/calls/window.js

@@ -254,6 +254,9 @@ class CallWindow extends CustomEvents {
 			// Parse list of menu entries
 			for(const entry of menuEntries) {
 
+				if(entry.needVideo && !this.allowVideo)
+					continue
+
 				const a = createElem2({
 					appendTo: menuEntriesTarget,
 					type: "li",
@@ -666,14 +669,33 @@ class CallWindow extends CustomEvents {
 	 * Start to send this client audio & video
 	 * 
 	 * @param {boolean} includeVideo
+	 * @param {boolean} shareScreen
 	 */
-	async startStreaming(includeVideo) {
+	async startStreaming(includeVideo, shareScreen = false) {
 
-		// First, query user media
+		let videoConstraints = this.conv.can_have_video_call && includeVideo;
-		const stream = await navigator.mediaDevices.getUserMedia({
+
-			video: this.conv.can_have_video_call && includeVideo,
+		let stream;
-			audio: true
+
-		})
+		// Get user screen
+		if(includeVideo && shareScreen) {
+			stream = await requestUserScreen(true)
+
+			const second_stream = await navigator.mediaDevices.getUserMedia({
+				audio: true
+			})
+
+			stream.addTrack(second_stream.getAudioTracks()[0])
+		}
+
+		// Use regular webcam
+		else {
+			// First, query user media
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: videoConstraints,
+				audio: true,
+			})
+		}
 		this.mainStream = stream;
 
 		if(includeVideo)

system/config/dev.config.php

@@ -162,6 +162,9 @@ class Dev {
 
 		//Simple peer
 		array("path" => "3rdparty/simplepeer/simplepeer.min.js", "uglifyjs" => false),
+
+		// Share screen
+		"3rdparty/getScreenId.js",
 	);
 
 	/**