index.html 1.52 KB
Newer Older
1 2 3 4 5 6 7 8
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
    <center>
Jakub Adam's avatar
Jakub Adam committed
9 10
      HLS: <video id="hls_video" autoplay></video>
      WebRTC: <video id="webrtc_video" autoplay></video>
11 12
    </center>

Jakub Adam's avatar
Jakub Adam committed
13 14 15
    <script type="module">
      import * as mss from './mss.js'

16
      if(Hls.isSupported()) {
Jakub Adam's avatar
Jakub Adam committed
17
        var hls_video = document.getElementById('hls_video');
Jakub Adam's avatar
Jakub Adam committed
18 19 20
        var hls = new Hls({
          liveDurationInfinity: true
        });
21
        hls.loadSource('hls/playlist.m3u8');
Jakub Adam's avatar
Jakub Adam committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
        hls.attachMedia(hls_video);
      }

      var client = new mss.Client()
      var webrtc = new RTCPeerConnection()

      client.onoffer = async (msg) => {
        try {
          console.log(msg.sdp)
          await webrtc.setRemoteDescription({ type: 'offer', sdp: msg.sdp })
          var answer = await webrtc.createAnswer()
          console.log(answer)
          webrtc.setLocalDescription(answer)
          client.answer(answer.sdp)
        } catch (err) {
          console.log(err.message)
        }
      }
      client.oncandidate = (c) => {
        console.log(c)
        webrtc.addIceCandidate(c)
43
      }
Jakub Adam's avatar
Jakub Adam committed
44 45 46 47 48 49 50 51 52 53 54 55 56

      webrtc.onicecandidate = (c) => {
        if (c.candidate) {
          client.candidate(c.candidate)
        }
      }
      webrtc.ontrack = (event) => {
        console.log(event)
        var webrtc_video = document.getElementById("webrtc_video")
        webrtc_video.srcObject = event.streams[0];
      }

      client.connect()
57 58 59
    </script>
  </body>
</html>