sfu-ws/index.html

<!DOCTYPE html>
<html>
  <!--
    SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
    SPDX-License-Identifier: MIT
  -->

  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h3> Local Video </h3>
    <video id="localVideo" width="160" height="120" autoplay muted></video> <br />

    <h3> Remote Video </h3>
    <div id="remoteVideos"></div> <br />

    <h3> Logs </h3>
    <div id="logs"></div>


  </body>

  <script>
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
      let pc = new RTCPeerConnection()
      pc.ontrack = function (event) {
        if (event.track.kind === 'audio') {
          return
        }

        let el = document.createElement(event.track.kind)
        el.srcObject = event.streams[0]
        el.autoplay = true
        el.controls = true
        document.getElementById('remoteVideos').appendChild(el)

        event.track.onmute = function(event) {
          el.play()
        }

        event.streams[0].onremovetrack = ({track}) => {
          if (el.parentNode) {
            el.parentNode.removeChild(el)
          }
        }
      }

      document.getElementById('localVideo').srcObject = stream
      stream.getTracks().forEach(track => pc.addTrack(track, stream))

      let ws = new WebSocket("{{.}}")
      pc.onicecandidate = e => {
        if (!e.candidate) {
          return
        }

        ws.send(JSON.stringify({event: 'candidate', data: JSON.stringify(e.candidate)}))
      }

      ws.onclose = function(evt) {
        window.alert("Websocket has closed")
      }

      ws.onmessage = function(evt) {
        let msg = JSON.parse(evt.data)
        if (!msg) {
          return console.log('failed to parse msg')
        }

        switch (msg.event) {
          case 'offer':
            let offer = JSON.parse(msg.data)
            if (!offer) {
              return console.log('failed to parse answer')
            }
            pc.setRemoteDescription(offer)
            pc.createAnswer().then(answer => {
              pc.setLocalDescription(answer)
              ws.send(JSON.stringify({event: 'answer', data: JSON.stringify(answer)}))
            })
            return

          case 'candidate':
            let candidate = JSON.parse(msg.data)
            if (!candidate) {
              return console.log('failed to parse candidate')
            }

            pc.addIceCandidate(candidate)
        }
      }

      ws.onerror = function(evt) {
        console.log("ERROR: " + evt.data)
      }
    }).catch(window.alert)
  </script>
</html>