K2-Camera-backup/camera.html at main · hust921/K2-Camera-backup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    body {
      background-color: #1e1e20;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    video {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  </style>
</head>
<body>
  <video id='remoteVideos'></video>
  <script>
    if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
      var pc = new RTCPeerConnection();
    }
    else {
      var pc = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
      });
    };
    var log = msg => { console.log(msg); };
    function sendOfferToCall(sdp) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          let res = JSON.parse(atob(this.responseText));
          console.log(res);
          if (res.type == 'answer') {
            pc.setRemoteDescription(new RTCSessionDescription(res));
          }
        }
      };
      xhttp.open('POST', 'http://' + window.location.host.split(':')[0] + ':8000/call/webrtc_local');
      xhttp.setRequestHeader('Content-Type', 'plain/text');
      xhttp.send(btoa(JSON.stringify({ 'type': 'offer', 'sdp': sdp })));
    }
    pc.ontrack = function (event) {
      var el = document.getElementById('remoteVideos');
      el.srcObject = event.streams[0];
      el.autoplay = true;
      el.controls = false;
      el.muted = true;
    };
    pc.oniceconnectionstatechange = e => log(pc.iceConnectionState);
    pc.onicecandidate = event => {
      if (event.candidate === null) sendOfferToCall(pc.localDescription.sdp)
    };
    pc.addTransceiver('video', { 'direction': 'sendrecv' })
    pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log);
  </script>
</body>
</html>