3

I'm learning WebRTC and i'm trying to establish a peer 2 peer connection between two different tabs in my chrome browser. I want the connection to be different, meaning two separate RTCPeerConnection() objects. I have obtained sample code from an ebook I purchased about WebRTC but I can't get it to work. I don't see the stream of my peer. Any ideas? No Javascript errors in the console which leaves me clueless.

function hasUserMedia() {
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
  window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  return !!window.RTCPeerConnection;
}

var yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection, theirConnection;

if (hasUserMedia()) {
  navigator.getUserMedia({ video: true, audio: false }, function (stream) {
    yourVideo.src = window.URL.createObjectURL(stream);

    if (hasRTCPeerConnection()) {
      startPeerConnection(stream);
    } else {
      alert("Sorry, your browser does not support WebRTC.");
    }
  }, function (error) {
    console.log(error);
  });
} else {
  alert("Sorry, your browser does not support WebRTC.");
}

function startPeerConnection(stream) {
  var configuration = {
    "iceServers": [{ "url": "stun:127.0.0.1:9876" }]
  };
  yourConnection = new webkitRTCPeerConnection(configuration);
  theirConnection = new webkitRTCPeerConnection(configuration);

  // Setup stream listening
  yourConnection.addStream(stream);
  theirConnection.onaddstream = function (e) {
    theirVideo.src = window.URL.createObjectURL(e.stream);
  };

  // Setup ice handling
  yourConnection.onicecandidate = function (event) {
    if (event.candidate) {
      theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
  };

  theirConnection.onicecandidate = function (event) {
    if (event.candidate) {
      yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
  };

  // Begin the offer
  yourConnection.createOffer(function (offer) {
    yourConnection.setLocalDescription(offer);
    theirConnection.setRemoteDescription(offer);

    theirConnection.createAnswer(function (offer) {
      theirConnection.setLocalDescription(offer);
      yourConnection.setRemoteDescription(offer);
    });
  });
};
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Learning WebRTC - Chapter 4: Creating a RTCPeerConnection</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>
    <div id="container">
      <video id="yours" autoplay></video>
      <video id="theirs" autoplay></video>
    </div>

    <script src="main.js"></script>
  </body>
</html>
jdogdvr
  • 359
  • 3
  • 18
  • If you're using Chrome, you can type 'about:webrtc' to get more info about what's going on behind the scenes. – spongessuck Sep 14 '16 at 01:11
  • It looks like you're trying to do both sides of the connection in one page. If you want to set it up to work in two tabs, you'll need some kind of signaling mechanism to send the ICE candidates between your tabs. – spongessuck Sep 14 '16 at 01:21
  • there doesn't seem to be any exchange going on between the two peers. regardless of whether they are on on the same browser on different tabs or if they are in different countries, you will need some sort of signalling mechanism to exchange their info before you can connect them through the ICE – Ted Sep 14 '16 at 13:11
  • Ok thanks, I guess the guy who wrote this book should have explained that as I'm a complete beginner and the title of the book is "Learning WebRTC" – jdogdvr Sep 15 '16 at 02:49

0 Answers0