diff options
| author | Nirbheek Chauhan <nirbheek@centricular.com> | 2022-09-26 16:53:43 +0530 |
|---|---|---|
| committer | GStreamer Marge Bot <gitlab-merge-bot@gstreamer-foundation.org> | 2022-09-27 19:48:56 +0000 |
| commit | 6a3319c8f2c93a693e9fea892991b3494c8c0fb4 (patch) | |
| tree | 59951338e78738e98899ac6e646187304f72902e | |
| parent | 0aa9d8ade653a2c6af3867e0935801cda4fa4e6c (diff) | |
examples: Support multiple video streams in JS webrtc sendrecv
Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/3079>
| -rw-r--r-- | subprojects/gst-examples/webrtc/sendrecv/js/index.html | 2 | ||||
| -rw-r--r-- | subprojects/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 2c5f65ee7c..b6915bf362 100644 --- 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 02d1ea046e..d403a1bb27 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() { |