caner
/
werift_webrtc


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Answer</title>
  <style>
    #v2 {
      width: 500px;
      height: 500px;
      border: solid 1px red;
    }
  </style>
</head>

<body>
  <video id="v2" autoPlay muted playsinline></video>
  <script>
    (async () => {

      const socket = new WebSocket("ws://192.168.137.253:8881");
      await new Promise((r) => (socket.onopen = r));
      console.log("open websocket");
      const offer = await new Promise((r) => (socket.onmessage = (ev) => r(JSON.parse(ev.data))));
      console.log("offer", offer.sdp);

      const peer = new RTCPeerConnection({
        iceServers: [
          {
            urls: [
              "stun:caner.top:3478",
            ],
          },
          {
            urls: "turn:caner.top:3478",
            username: "admin",
            credential: "123456"
          },
        ]        
      });

      peer.onicecandidate = ({ candidate }) => {
        if (!candidate) {
          const sdp = JSON.stringify(peer.localDescription);
          socket.send(sdp);
        }
      };

      peer.oniceconnectionstatechange = () => {
        console.log("oniceconnectionstatechange", peer.iceConnectionState);
      };

      peer.ontrack = (e) => {
        console.log("ontrack", e);
        const video = document.getElementById('v2')
        if (video.srcObject) {
          video.srcObject.addTrack(e.track);
        } else {
          video.srcObject = new MediaStream([e.track]);
        }

        peer.getReceivers().forEach((r) => {
          r.playoutDelayHint = 1;
          r.jitterBufferDelayHint = 1;
        });
      };

      await peer.setRemoteDescription(offer);
      const answer = await peer.createAnswer();
      await peer.setLocalDescription(answer);

    })()
  </script>
</body>

</html>