github.com/pion/webrtc/v4@v4.0.1/examples/whip-whep/index.html (about)

     1  <html>
     2  
     3    <!--
     4  		SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
     5  		SPDX-License-Identifier: MIT
     6  	-->
     7    <head>
     8      <title>whip-whep</title>
     9    </head>
    10  
    11    <body>
    12      <button onclick="window.doWHIP()">Publish</button>
    13      <button onclick="window.doWHEP()">Subscribe</button>
    14      <h3> Video </h3>
    15      <video id="videoPlayer" autoplay muted controls style="width: 500"> </video>
    16  
    17  
    18      <h3> ICE Connection States </h3>
    19      <div id="iceConnectionStates"></div> <br />
    20    </body>
    21  
    22    <script>
    23      let peerConnection = new RTCPeerConnection()
    24  
    25      peerConnection.oniceconnectionstatechange = () => {
    26        let el = document.createElement('p')
    27        el.appendChild(document.createTextNode(peerConnection.iceConnectionState))
    28  
    29        document.getElementById('iceConnectionStates').appendChild(el);
    30      }
    31  
    32      window.doWHEP = () => {
    33        peerConnection.addTransceiver('video', { direction: 'recvonly' })
    34  
    35        peerConnection.ontrack = function (event) {
    36          document.getElementById('videoPlayer').srcObject = event.streams[0]
    37        }
    38  
    39        peerConnection.createOffer().then(offer => {
    40          peerConnection.setLocalDescription(offer)
    41  
    42          fetch(`/whep`, {
    43            method: 'POST',
    44            body: offer.sdp,
    45            headers: {
    46              Authorization: `Bearer none`,
    47              'Content-Type': 'application/sdp'
    48            }
    49          }).then(r => r.text())
    50            .then(answer => {
    51              peerConnection.setRemoteDescription({
    52                sdp: answer,
    53                type: 'answer'
    54              })
    55            })
    56        })
    57      }
    58  
    59      window.doWHIP = () => {
    60        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    61          .then(stream => {
    62            document.getElementById('videoPlayer').srcObject = stream
    63            stream.getTracks().forEach(track => peerConnection.addTrack(track, stream))
    64  
    65            peerConnection.createOffer().then(offer => {
    66              peerConnection.setLocalDescription(offer)
    67  
    68              fetch(`/whip`, {
    69                method: 'POST',
    70                body: offer.sdp,
    71                headers: {
    72                  Authorization: `Bearer none`,
    73                  'Content-Type': 'application/sdp'
    74                }
    75              }).then(r => r.text())
    76                .then(answer => {
    77                  peerConnection.setRemoteDescription({
    78                    sdp: answer,
    79                    type: 'answer'
    80                  })
    81                })
    82            })
    83        })
    84      }
    85    </script>
    86  </html>