| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <html>
- <!--
- SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
- SPDX-License-Identifier: MIT
- -->
- <head>
- <title>play-from-disk-renegotiation</title>
- </head>
- <body>
- <button onclick="window.addVideo()"> Add Video </button><br />
- <button onclick="window.removeVideo()"> Remove Video </button><br />
- <h3> Video </h3>
- <div id="remoteVideos"></div> <br />
- <h3> Logs </h3>
- <div id="logs"></div>
- </body>
- <script>
- let activeVideos = 0
- let pc = new RTCPeerConnection({
- iceServers: [
- {
- urls: 'stun:stun.l.google.com:19302'
- }
- ]
- })
- pc.ontrack = function (event) {
- var el = document.createElement(event.track.kind)
- el.srcObject = event.streams[0]
- el.autoplay = true
- el.controls = true
- event.track.onmute = function(event) {
- el.parentNode.removeChild(el);
- }
- document.getElementById('remoteVideos').appendChild(el)
- }
- let doSignaling = method => {
- pc.createOffer()
- .then(offer => {
- pc.setLocalDescription(offer)
- return fetch(`/${method}`, {
- method: 'post',
- headers: {
- 'Accept': 'application/json, text/plain, */*',
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(offer)
- })
- })
- .then(res => res.json())
- .then(res => pc.setRemoteDescription(res))
- .catch(alert)
- }
- // Create a noop DataChannel. By default PeerConnections do not connect
- // if they have no media tracks or DataChannels
- pc.createDataChannel('noop')
- doSignaling('createPeerConnection')
- window.addVideo = () => {
- if (pc.getTransceivers().length <= activeVideos) {
- pc.addTransceiver('video')
- activeVideos++
- }
- doSignaling('addVideo')
- };
- window.removeVideo = () => {
- doSignaling('removeVideo')
- };
- </script>
- </html>
|