From 117fd15fa157891c5e609c271e08e0c40d5aaff5 Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Fri, 27 Mar 2020 18:05:21 -0400 Subject: [PATCH] Hot swap screen share, breaks if swapped before connect --- public/chat.html | 6 +++++ public/js/chat.js | 62 ++++++++++++++++++++++++++++++++++------------- 2 files changed, 51 insertions(+), 17 deletions(-) diff --git a/public/chat.html b/public/chat.html index 2b0d99a..514d2f0 100644 --- a/public/chat.html +++ b/public/chat.html @@ -59,6 +59,12 @@
End Call
+
+ +
Share Screen
+
diff --git a/public/js/chat.js b/public/js/chat.js index fed1abb..4472d6b 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -69,17 +69,6 @@ var VideoChat = { }); }, - requestScreenStream: function (event) { - navigator.mediaDevices.getDisplayMedia({ - video: true, - audio: true - }).then(stream => { - VideoChat.onMediaStream(stream); - }).catch(error => { - logIt(error); - logIt('No media stream for us.'); - }); - }, // The onMediaStream function receives the media stream as an argument. onMediaStream: function (stream) { @@ -365,11 +354,6 @@ Snackbar.show({ }); -// auto get media -// VideoChat.requestScreenStream(); -VideoChat.requestMediaStream(); - - //Neomorphic buttons $(".HoverState").hide(); $(document).ready(function () { @@ -381,4 +365,48 @@ $(document).ready(function () { $(".HoverState").hide(); }); }); -//Neomorphic buttons \ No newline at end of file + + +var mode = "camera"; + +function swap() { + const swapIcon = document.getElementById("swap-icon"); + const swapText = document.getElementById("swap-text"); + if (mode === "camera") { + mode = "screen"; + swapIcon.classList.remove("fa-desktop"); + swapIcon.classList.add("fa-camera"); + swapText.innerText = "Share Webcam"; + navigator.mediaDevices.getDisplayMedia({ + video: true, + audio: true + }).then(function (stream) { + switchStreamHelper(stream); + }); + } else { + mode = "camera"; + swapIcon.classList.remove("fa-camera"); + swapIcon.classList.add("fa-desktop"); + swapText.innerText = "Share Screen"; + navigator.mediaDevices.getUserMedia({ + video: true, + audio: true + }).then(function (stream) { + switchStreamHelper(stream); + }); + } +} + +function switchStreamHelper(stream) { + let videoTrack = stream.getVideoTracks()[0]; + var sender = VideoChat.peerConnection.getSenders().find(function (s) { + return s.track.kind === videoTrack.kind; + }); + sender.replaceTrack(videoTrack); + VideoChat.localStream = videoTrack; + VideoChat.localVideo.srcObject = stream; +} + + +// auto get media +VideoChat.requestMediaStream();