added video source switching

Media-4-Machine-Laboratory · Apr 19, 2023 · 84cf88a · 84cf88a
1 parent 6be5a51
commit 84cf88a
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 30 deletions.
diff --git a/python/www/flask/static/webrtc.js b/python/www/flask/static/webrtc.js
@@ -196,12 +196,38 @@ function playStream(url, videoElement) {
 function sendStream(url, deviceId) {
   console.log(`sending stream ${url}  (deviceId=${deviceId})`);
 
-  connections[url] = {};
-
-  connections[url].type = 'outbound';
-  connections[url].deviceId = deviceId;
-  connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+	if( url in connections && connections[url].type == 'outbound' ) {
+		// replace the outbound stream in the existing connection
+		replaceStream(url, deviceId);
+		return false;
+	}
+	else {
+		// create a new outbound connection
+		connections[url] = {};
+
+		connections[url].type = 'outbound';
+		connections[url].deviceId = deviceId;
+		connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+
+		connections[url].websocket = new WebSocket(url);
+		connections[url].websocket.addEventListener('message', onServerMessage);
+
+		return true;
+	}
+}
 
-  connections[url].websocket = new WebSocket(url);
-  connections[url].websocket.addEventListener('message', onServerMessage);
+function replaceStream(url, deviceId) {
+	console.log(`replacing stream for outbound WebRTC connection to ${url}`);
+	console.log(`old device ID:  ${connections[url].deviceId}`);
+	console.log(`new device ID:  ${deviceId}`);
+
+	var constraints = {'audio': false, 'video': { deviceId: deviceId }};
+
+	navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+		const [videoTrack] = stream.getVideoTracks();
+		const sender = connections[url].webrtcPeer.getSenders().find((s) => s.track.kind === videoTrack.kind);
+		console.log('found sender:', sender);
+		sender.replaceTrack(videoTrack);
+		connections[url].deviceId = deviceId;
+	}).catch(reportError);
 }
diff --git a/python/www/flask/templates/index.html b/python/www/flask/templates/index.html
@@ -24,8 +24,8 @@
       };
 
       send = function() {
-        sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value);
-        play(); // autoplay browser stream
+        if( sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value) )
+          play(); // autoplay browser stream
       }
 
       window.onload = function() {

diff --git a/python/www/html/index.html b/python/www/html/index.html
@@ -12,8 +12,8 @@
       };
 
       send = function() {
-        sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value);
-        play(); // autoplay browser stream
+        if( sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value) )
+          play(); // autoplay browser stream
       }
 
       window.onload = function() {

diff --git a/python/www/html/webrtc.js b/python/www/html/webrtc.js
@@ -133,12 +133,38 @@ function playStream(url, videoElement) {
 function sendStream(url, deviceId) {
   console.log(`sending stream ${url}  (deviceId=${deviceId})`);
 
-  connections[url] = {};
-
-  connections[url].type = 'outbound';
-  connections[url].deviceId = deviceId;
-  connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+	if( url in connections && connections[url].type == 'outbound' ) {
+		// replace the outbound stream in the existing connection
+		replaceStream(url, deviceId);
+		return false;
+	}
+	else {
+		// create a new outbound connection
+		connections[url] = {};
+
+		connections[url].type = 'outbound';
+		connections[url].deviceId = deviceId;
+		connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+
+		connections[url].websocket = new WebSocket(url);
+		connections[url].websocket.addEventListener('message', onServerMessage);
+
+		return true;
+	}
+}
 
-  connections[url].websocket = new WebSocket(url);
-  connections[url].websocket.addEventListener('message', onServerMessage);
+function replaceStream(url, deviceId) {
+	console.log(`replacing stream for outbound WebRTC connection to ${url}`);
+	console.log(`old device ID:  ${connections[url].deviceId}`);
+	console.log(`new device ID:  ${deviceId}`);
+
+	var constraints = {'audio': false, 'video': { deviceId: deviceId }};
+
+	navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+		const [videoTrack] = stream.getVideoTracks();
+		const sender = connections[url].webrtcPeer.getSenders().find((s) => s.track.kind === videoTrack.kind);
+		console.log('found sender:', sender);
+		sender.replaceTrack(videoTrack);
+		connections[url].deviceId = deviceId;
+	}).catch(reportError);
 }
diff --git a/python/www/recognizer/static/webrtc.js b/python/www/recognizer/static/webrtc.js
@@ -196,12 +196,38 @@ function playStream(url, videoElement) {
 function sendStream(url, deviceId) {
   console.log(`sending stream ${url}  (deviceId=${deviceId})`);
 
-  connections[url] = {};
-
-  connections[url].type = 'outbound';
-  connections[url].deviceId = deviceId;
-  connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+	if( url in connections && connections[url].type == 'outbound' ) {
+		// replace the outbound stream in the existing connection
+		replaceStream(url, deviceId);
+		return false;
+	}
+	else {
+		// create a new outbound connection
+		connections[url] = {};
+
+		connections[url].type = 'outbound';
+		connections[url].deviceId = deviceId;
+		connections[url].webrtcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] };
+
+		connections[url].websocket = new WebSocket(url);
+		connections[url].websocket.addEventListener('message', onServerMessage);
+
+		return true;
+	}
+}
 
-  connections[url].websocket = new WebSocket(url);
-  connections[url].websocket.addEventListener('message', onServerMessage);
+function replaceStream(url, deviceId) {
+	console.log(`replacing stream for outbound WebRTC connection to ${url}`);
+	console.log(`old device ID:  ${connections[url].deviceId}`);
+	console.log(`new device ID:  ${deviceId}`);
+
+	var constraints = {'audio': false, 'video': { deviceId: deviceId }};
+
+	navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+		const [videoTrack] = stream.getVideoTracks();
+		const sender = connections[url].webrtcPeer.getSenders().find((s) => s.track.kind === videoTrack.kind);
+		console.log('found sender:', sender);
+		sender.replaceTrack(videoTrack);
+		connections[url].deviceId = deviceId;
+	}).catch(reportError);
 }
diff --git a/python/www/recognizer/templates/index.html b/python/www/recognizer/templates/index.html
@@ -13,20 +13,21 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/static/select2.min.css">
 
-    <script type='text/javascript' src="/static/jquery-3.6.3.min.js"></script>
-    <script type='text/javascript' src='/static/bootstrap.bundle.min.js'></script>
-    <script type='text/javascript' src="/static/select2.min.js"></script>
+    <script type='text/javascript' src='https://webrtc.github.io/adapter/adapter-latest.js'></script>
     <script type='text/javascript' src='/static/webrtc.js'></script>
     <script type='text/javascript' src='/static/rest.js'></script>
     <script type='text/javascript' src='/static/debounce.js'></script>
+    <script type='text/javascript' src="/static/jquery-3.6.3.min.js"></script>
+    <script type='text/javascript' src='/static/bootstrap.bundle.min.js'></script>
+    <script type='text/javascript' src="/static/select2.min.js"></script>
     <script type='text/javascript'>
       play = function() {
         playStream(document.getElementById('play-stream').value, document.getElementById('video-player'));
       };
 
       send = function() {
-        sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value);
-        play(); // autoplay browser stream
+        if( sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value) )
+          play(); // autoplay browser stream
       }
 
       window.onload = function() {