github.com/pion/webrtc/v4@v4.0.1/examples/play-from-disk-renegotiation/index.html (about)

     1  <html>
     2    <!--
     3  		SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
     4  		SPDX-License-Identifier: MIT
     5  	-->
     6    <head>
     7      <title>play-from-disk-renegotiation</title>
     8    </head>
     9  
    10    <body>
    11      <button onclick="window.addVideo()"> Add Video </button><br />
    12      <button onclick="window.removeVideo()"> Remove Video </button><br />
    13  
    14  
    15      <h3> Video </h3>
    16      <div id="remoteVideos"></div> <br />
    17  
    18      <h3> Logs </h3>
    19      <div id="logs"></div>
    20    </body>
    21  
    22    <script>
    23      let activeVideos = 0
    24      let pc = new RTCPeerConnection({
    25        iceServers: [
    26          {
    27            urls: 'stun:stun.l.google.com:19302'
    28          }
    29        ]
    30      })
    31      pc.ontrack = function (event) {
    32        var el = document.createElement(event.track.kind)
    33        el.srcObject = event.streams[0]
    34        el.autoplay = true
    35        el.controls = true
    36  
    37        event.track.onmute = function(event) {
    38          el.parentNode.removeChild(el);
    39        }
    40  
    41        document.getElementById('remoteVideos').appendChild(el)
    42      }
    43  
    44      let doSignaling = method => {
    45        pc.createOffer()
    46          .then(offer => {
    47            pc.setLocalDescription(offer)
    48  
    49            return fetch(`/${method}`, {
    50              method: 'post',
    51              headers: {
    52                'Accept': 'application/json, text/plain, */*',
    53                'Content-Type': 'application/json'
    54              },
    55              body: JSON.stringify(offer)
    56            })
    57          })
    58          .then(res => res.json())
    59          .then(res => pc.setRemoteDescription(res))
    60          .catch(alert)
    61      }
    62  
    63      // Create a noop DataChannel. By default PeerConnections do not connect
    64      // if they have no media tracks or DataChannels
    65      pc.createDataChannel('noop')
    66      doSignaling('createPeerConnection')
    67  
    68      window.addVideo = () => {
    69        if (pc.getTransceivers().length <= activeVideos) {
    70          pc.addTransceiver('video')
    71          activeVideos++
    72        }
    73  
    74        doSignaling('addVideo')
    75      };
    76  
    77      window.removeVideo = () => {
    78        doSignaling('removeVideo')
    79      };
    80    </script>
    81  </html>