projects / platform / upstream / gstreamer.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0aa9d8a)
examples: Support multiple video streams in JS webrtc sendrecv
authorNirbheek Chauhan <nirbheek@centricular.com>
Mon, 26 Sep 2022 11:23:43 +0000 (16:53 +0530)
committerGStreamer Marge Bot <gitlab-merge-bot@gstreamer-foundation.org>
Tue, 27 Sep 2022 19:48:56 +0000 (19:48 +0000)
Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/3079>

subprojects/gst-examples/webrtc/sendrecv/js/index.html patch | blob | history
subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js patch | blob | history

diff --git a/subprojects/gst-examples/webrtc/sendrecv/js/index.html b/subprojects/gst-examples/webrtc/sendrecv/js/index.html
index 2c5f65e..b6915bf 100644 (file)
--- a/subprojects/gst-examples/webrtc/sendrecv/js/index.html
+++ b/subprojects/gst-examples/webrtc/sendrecv/js/index.html
@@ -23,7 +23,7 @@
   </head>
 
   <body>
-    <div><video id="stream" autoplay playsinline>Your browser doesn't support video</video></div>
+    <div id="video"></div>
     <div>Status: <span id="status">unknown</span></div>
     <div><textarea id="text" cols=40 rows=4></textarea></div>
     <br/>
diff --git a/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js b/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js
index 02d1ea0..d403a1b 100644 (file)
--- a/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js
+++ b/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js
@@ -64,7 +64,13 @@ function handleIncomingError(error) {
 }
 
 function getVideoElement() {
-    return document.getElementById("stream");
+    var div = document.getElementById("video");
+    var video_tag = document.createElement("video");
+    video_tag.textContent = "Your browser doesn't support video";
+    video_tag.autoplay = true;
+    video_tag.playsinline = true;
+    div.appendChild(video_tag);
+    return video_tag
 }
 
 function setStatus(text) {
@@ -91,11 +97,8 @@ function resetVideo() {
             }
         });
 
-    // Reset the video element and stop showing the last received frame
-    var videoElement = getVideoElement();
-    videoElement.pause();
-    videoElement.src = "";
-    videoElement.load();
+    // Remove all video players
+    document.getElementById("video").innerHTML = "";
 }
 
 // SDP offer received from peer, set remote description and create an answer
@@ -264,10 +267,10 @@ function websocketServerConnect() {
 }
 
 function onRemoteTrack(event) {
-    if (getVideoElement().srcObject !== event.streams[0]) {
-        console.log('Incoming stream');
-        getVideoElement().srcObject = event.streams[0];
-    }
+    var videoElem = getVideoElement();
+    if (event.track.kind === 'audio')
+        videoElem.style = 'display: none;';
+    videoElem.srcObject = new MediaStream([event.track]);
 }
 
 function errorUserMediaHandler() {
Domain: Multimedia / Media Common;