From 6a3319c8f2c93a693e9fea892991b3494c8c0fb4 Mon Sep 17 00:00:00 2001 From: Nirbheek Chauhan Date: Mon, 26 Sep 2022 16:53:43 +0530 Subject: [PATCH] examples: Support multiple video streams in JS webrtc sendrecv Part-of: --- .../gst-examples/webrtc/sendrecv/js/index.html | 2 +- .../gst-examples/webrtc/sendrecv/js/webrtc.js | 23 ++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/subprojects/gst-examples/webrtc/sendrecv/js/index.html b/subprojects/gst-examples/webrtc/sendrecv/js/index.html index 2c5f65e..b6915bf 100644 --- a/subprojects/gst-examples/webrtc/sendrecv/js/index.html +++ b/subprojects/gst-examples/webrtc/sendrecv/js/index.html @@ -23,7 +23,7 @@ -

Status: unknown

diff --git a/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js b/subprojects/gst-examples/webrtc/sendrecv/js/webrtc.js index 02d1ea0..d403a1b 100644 --- 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() { -- 2.7.4