SHARE
TWEET

Untitled

a guest Jul 15th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Without Adapter.js</title>
  7.     <meta name="description" content="">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <style>
  10.         video {
  11.             width: 320px;
  12.             height: 240px;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18. <div>
  19.   <h4>Sender Video:</h4>
  20.   <video id="sender" autoplay muted playsinline></video>
  21.   <div>
  22.     <p id="transceiverKeys"></p>
  23.   </div>
  24.   <button id="startBtn">Start</button>
  25.   <button id="stopBtn">Stop</button>
  26. </div>
  27. <hr/>
  28. <div>
  29.   <h4>Receiver Video:</h4>
  30.   <video id="receiver" autoplay muted playsinline></video>
  31. </div>
  32. </body>
  33. <script>
  34.   let sender,
  35.       receiver,
  36.       stream;
  37.  
  38.   async function start() {
  39.     sender = new RTCPeerConnection();
  40.     receiver = new RTCPeerConnection();
  41.    
  42.     // fake ice signalling
  43.     sender.onicecandidate = (evt) => receiver.addIceCandidate(evt.candidate);
  44.     receiver.onicecandidate = (evt) => sender.addIceCandidate(evt.candidate);
  45.  
  46.     let receivedStream = false;
  47.     // THE PROBLEM IS HERE
  48.     receiver.ontrack = (evt) => {
  49.       if (receivedStream) {
  50.         return;
  51.       }
  52.       receivedStream = true;
  53.  
  54.       // all expected properties of RTCRtpTransceiver found
  55.       // notably mid
  56.       let transceiverKeys = Object.keys(evt.transceiver);
  57.       let transceiverProtoKeys = Object.keys(Object.getPrototypeOf(evt.transceiver));
  58.       let keys = transceiverKeys.concat(transceiverProtoKeys);
  59.       if (!keys.length) keys.push('EMPTY!');
  60.       document.querySelector('#transceiverKeys').textContent = keys.join(', ');
  61.  
  62.       addMediaToDom(evt.streams[0], 'receiver');
  63.     };
  64.  
  65.     stream = await window.navigator.mediaDevices.getUserMedia({ video: true, audio: false });
  66.     addMediaToDom(stream, 'sender');
  67.    
  68.     for (const track of stream.getTracks()) {
  69.       sender.addTrack(track, stream);
  70.     }
  71.    
  72.     let offer = await sender.createOffer({ video: true });
  73.     await sender.setLocalDescription(offer);
  74.    
  75.     // fake signalling
  76.     await receiver.setRemoteDescription(offer);
  77.  
  78.     let answer = await receiver.createAnswer();
  79.     await receiver.setLocalDescription(answer);
  80.    
  81.     await sender.setRemoteDescription(answer);  
  82.   }
  83.  
  84.   function stop() {
  85.     document.querySelector('#receiver').srcObject = null;
  86.     document.querySelector('#sender').srcObject = null;
  87.     document.querySelector('#transceiverKeys').textContent = '';
  88.     if (receiver) {
  89.       receiver.close();
  90.     }
  91.     if (sender) {
  92.       sender.close();
  93.     }
  94.     if (stream) {
  95.       stream.getTracks().forEach(track => track.stop())
  96.     }
  97.     sender = receiver = stream = null;
  98.   }
  99.  
  100.   function addMediaToDom(stream, elementName) {
  101.     let element = document.querySelector(`#${elementName}`);
  102.      element.srcObject = stream;
  103.   }
  104.  
  105.   document.querySelector('#startBtn').onclick = start;
  106.   document.querySelector('#stopBtn').onclick = stop;
  107. </script>
  108. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top