CODEWITHSUNDEEP
javascriptwebrtcmediastreamrtcpeerconnection
Igor Karpiuk
Igor Karpiuk

Reputation: 21

Video stream is not sent through my RTCPeerConnection

So I've put up this little test code modeling what's going on with the real version of what i have. In it I have set up 2 peer connections in the same file, each having a dedicated video element on the html. The problem is, when i start sharing the screen, the stream is not being shown on the other peer (peer2), which is the same problem I get in the real version of the code.

Here is the js code

'use strict';    
    const video1 = document.getElementById('video1');
    const video2 = document.getElementById('video2');
    let peer1 = new RTCPeerConnection();
    let peer2 = new RTCPeerConnection();

peer1.onicecandidate = ev => {
  console.log('peer1 oncandidate event');
  if (ev.candidate) {
    const c = new RTCIceCandidate(ev.candidate);
    peer2.addIceCandidate(c);
  }
};

peer2.onicecandidate = ev => {
  console.log('peer2 oncandidate event');
  if (ev.candidate) {
    const c = new RTCIceCandidate(ev.candidate);
    peer1.addIceCandidate(c);
  }
};

peer2.onaddtrack = ev => addStreamSource;

function startVideoStream() {
  const videoOptions = {
    video: true,
    audio: true
  };

  navigator.mediaDevices.getDisplayMedia(videoOptions)
    .then(gotLocalMediaStream)
    .catch(logError);
}

function gotLocalMediaStream(stream) {
  console.log('setting the stream');
  console.log(stream.getTracks());
  peer1.addTrack(stream.getTracks()[0]);
  video1.srcObject = stream;
  peer1.createOffer()
    .then(desc => {
      peer1.setLocalDescription(desc);
      peer2.setRemoteDescription(desc);
      peer2.createAnswer()
        .then(des => {
          peer2.setLocalDescription(des);
          peer1.setRemoteDescription(des);
        })
        .catch(logError);
    })
    .catch(logError);
}

function addStreamSource(event) {
  console.log('ADDING STREAM SOURCE:');
  video2.srcObject = event.streams[0];
}

function logError(e) {
  console.error(`Bad thing: ${e}`);
}

function logSuccess() {
  console.log('Promise Success!');
}

index.html

<html>

<head>
  <title>Pretty cinema</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h1 style="text-align:center;" id="text">
    Pretty video streaming service
  </h1>
  <br />
  <div id="vids">
    <video id="video1" autoplay controls>
      <source type='video/mp4' ; codecs="H.264" />
    </video>
    <video id="video2" autoplay controls>
      <source type='video/mp4' ; codecs="H.264" />
    </video>
  </div>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="./checking_peers.js"></script>
  <div>
    <div class="buttonsDiv">
      <button onclick="startVideoStream()" type="button">Share</button>
    </div>
  </div>
</body>

</html>

important:

Upvotes: 0

Views: 960

Answers (1)

Igor Karpiuk
Igor Karpiuk

Reputation: 21

Already found the solution.

Simple explanation: I needed to create a MediaStream from the track received on peer2.

peer2.ontrack = event => {
  const video = new MediaStream([event.track]);
  video2.srcObject = video;
};

More details: The moment the two peers are connected (they've exchanged offer-answer's and ICE candidates) if you add a track on one end (peer1), the other end (peer2) is going to receive an event with the track in it if you've overriden the method ontrack of the peer2. You access the track as event.track. From that track you can create a MediaStream object by calling new MediaStream() and passing it an array of all tracks you want to base your stream on. That newly created stream can serve as the source for your video element, assign it with videoElement.srcObject = theMediaStream;.

Also: There was a problem with the way I set up the ICECandidate responses, so look closely into the code, it's written correctly here, might be you're having the same problem.

Upvotes: 1

Related Questions