index.html 2.12 KB
Newer Older
1 2 3 4
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
5
    <link rel="stylesheet" href="style.css">
6 7 8
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
    <div id="header">
      <img src="COLLABORA_01_MONO.png">
    </div>
    <div id="videos">
      <div class="display_container">
        <video id="hls_video" autoplay></video>
        <div>HLS</div>
      </div>
      <div class="display_container">
        <video id="webrtc_video" autoplay></video>
        <div>WebRTC</div>
      </div>
    </div>
    <div id="footer">
      <img src="gStreamer.svg">
    </div>
25

Jakub Adam's avatar
Jakub Adam committed
26 27 28
    <script type="module">
      import * as mss from './mss.js'

29
      if(Hls.isSupported()) {
Jakub Adam's avatar
Jakub Adam committed
30
        var hls_video = document.getElementById('hls_video');
Jakub Adam's avatar
Jakub Adam committed
31 32 33
        var hls = new Hls({
          liveDurationInfinity: true
        });
34 35 36 37 38 39 40 41 42 43 44

        hls.on(Hls.Events.ERROR, (e, data) => {
          if (data.type == "networkError") {
            setTimeout(() => {
              hls.recoverMediaError()
              hls.loadSource('hls/playlist.m3u8')
            }, 1000)
          }
          console.log(data)
        })

Jakub Adam's avatar
Jakub Adam committed
45
        hls.attachMedia(hls_video);
46
        hls.loadSource('hls/playlist.m3u8');
Jakub Adam's avatar
Jakub Adam committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
      }

      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)
67
      }
Jakub Adam's avatar
Jakub Adam committed
68 69 70 71 72 73 74 75 76 77 78 79 80

      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()
81 82 83
    </script>
  </body>
</html>