WebRTC black screen

Question

I have a problem. I want to learn WebRTC and bought a book. The problem is, the given code does not work. I thought that I made a mistake but I tried the given code of the book and there is the same problem.

I want to create a video communication between two video html elements. I already replaced some deprecated functions. Currently, I just see myself (in "yours") and a black screen in "theirs". I should see me i both elements:

Screenshot: WebRTC black screen

I do not know where the error is. Perhaps someone could help me?

Thank you!

main.js

// Check whether the user has access to the getUserMedia API
function hasUserMedia() {
 
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
 return !!navigator.getUserMedia;
 
}

// Check whether the user has access to the RTCPeerConnection API
function hasRTCPeerConnection() {
 
 window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
 
 return !!window.RTCPeerConnection;
}

var yourVideo = document.querySelector('#yours'),
 theirVideo = document.querySelector('#theirs'),
 yourConnection, theirConnection;
 
if(hasUserMedia()) {
 navigator.mediaDevices.getUserMedia({video: true, audio: false})
 .then(
  function(mediaStream) {
   
   // Giving the stream to the html object
   yourVideo.srcObject = mediaStream;
   
   if(hasRTCPeerConnection()) {
    startPeerConnection(mediaStream);
   } // End if(hasRTCPeerConnection())
   else {
    alert('Sorry, your browser does not support WebRTC.');
   } // End else if
   
  } // End function(mediaStream)
 ) // End getUserMedia().then()
 .catch(
  function(err) {
   alert('Sorry, we failed to capture your camera, please try again.');
   console.log(err.name + ': ' + err.message);
  } // End function(err)
 ) // End getUserMedia().catch()
} // End hasUserMedia()
else {
 alert('Sorry, your browser does not support WebRTC.');
} // End Else if(hasUserMedia())
 
function startPeerConnection(mediaStream) {
 var configuration = {
  // Uncomment this code to add custom iceServers
  "iceServers": [{"urls": "stun:stun.1und1.de"}, {"urls": "stun:stun.gmx.net"}, {"urls": "stun:stun1.l.google.com:19305"}, {"urls": "stun:stun2.l.google.com:19305"}]
 };
 
 yourConnection = new mozRTCPeerConnection(configuration);
 theirConncetion = new mozRTCPeerConnection(configuration);
 
 // Setup stream listening
 yourConnection.addStream(mediaStream);
 theirConncetion.ontrack = function (e) {
  theirVideo.srcObject = e.stream;
 };
 
 // Setup ice handling
 yourConnection.onicecandidate = function (event){
  if(event.candidate){
   theirConncetion.addIceCandidate(new RTCIceCandidate(event.candidate));
  }
 };
 
 theirConncetion.onicecandidate = function (event){
  if(event.candidate){
   yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
  }
 };
 
 yourConnection.createOffer(
  function (offer) {
   yourConnection.setLocalDescription(offer);
   theirConnection.setRemoteDescription(offer);
   theirConnection.createAnswer(
    function (offer) {
     theirConnection.setLocalDescription(offer);
     yourConnection.setRemoteDescription(offer);
    }
   );
  }
 );
}

**index.html**

<!DOCTYPE html>
<html>
 <head>
  <meta char="utf-8" />
  <title>Chapter 3</title>
  <style>
   body {
    background-color: #3D6DF2;
    margin-top: 15px;
   }
   video {
    background: black;
    border: 1px solid gray;
   }
   #container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;
   }
   #yours {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 15px;
    right: 15px;
   }
   #theirs {
    width: 500px;
    height: 500px;
   }
  </style>
 </head>
 <body>
  <video id="yours" autoplay></video>
  <video id="theirs" autoplay></video>
  <script src="main.js"></script>
 </body>
</html>

score 2 · Answer 1 · edited May 23 '17 at 12:33

Old code from an old book. In an effort to stamp out old examples, allow me to offer some tips:

Drop the moz prefix.
Drop window.msRTCPeerConnection. It never existed.
Your hasUserMedia() function polyfills the old navigator.getUserMedia, but your main code uses the newer navigator.mediaDevices.getUserMedia. Just check if the latter exists.
Use pc.ontrack = e => video.srcObject = e.streams[0];, or if you want this to work in Chrome, use adapter.js or the older pc.onaddtream = e => video.srcObject = e.stream;
Add failure-callbacks to your createOffer and createAnswer calls, or they won't work.

I see you use the newer promise-API for getUserMedia, but not for RTCPeerConnection. Try:

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(e => console.log(e));

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

pc2.ontrack = e => video2.srcObject = e.streams[0];
pc1.oniceconnectionstatechange = e => console.log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(e => console.log(e));

<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

score 0 · Answer 2 · answered Nov 14 '16 at 15:34

0

you probably replaced the deprecated onaddstream with ontrack (which so far is only supported in Firefox). ontracks does not however have a e.stream property, try e.streams[0]

answered Nov 14 '16 at 15:34

Philipp Hancke

15,855
2
23
31

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

The solution was simple. I found the answer here but I had to search harder over Google. The solution is described there: onaddstream method is not executed after RTCPeerconnection object is instantiated

edited May 23 '17 at 12:24

Community

1
1

answered Nov 14 '16 at 15:49

user2570554

55
1
4

WebRTC black screen

3 Answers3