SM
Software Mansion•4w ago
pitbull2k4

WebRTC - Add Track to running PeerConnection

I have started out with the Nexus WebRTC example app (https://github.com/elixir-webrtc/apps/tree/master/nexus). Instead of automatically starting the stream, I am now running createPeerConnection() and joinChannel() without starting any local streams. I have then added a button that when pressed, should start the local webcam stream and broadcast it to other peers. On button press I execute: 
async function setupLocalMedia() {
  console.log('Setting up local media stream');
  // ask for permissions
  await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  }).then((stream) => {
    console.log('Adding conference local tracks to peer connection');
    stream.getTracks().forEach((track) => {
      pc.addTrack(track);
      console.log("Added local stream:", track)
    });
  })
}
async function setupLocalMedia() {
  console.log('Setting up local media stream');
  // ask for permissions
  await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  }).then((stream) => {
    console.log('Adding conference local tracks to peer connection');
    stream.getTracks().forEach((track) => {
      pc.addTrack(track);
      console.log("Added local stream:", track)
    });
  })
}
Which according to the docs will then raise a "onnegotiationneeded" event, which i've bound to the peer connection like so: 
pc.onnegotiationneeded = async () => {
  await pc.setLocalDescription(await pc.createOffer());
  channel.push('video-offer', { body: pc.localDescription } );
}
pc.onnegotiationneeded = async () => {
  await pc.setLocalDescription(await pc.createOffer());
  channel.push('video-offer', { body: pc.localDescription } );
}
Then I'm listening for the 'video-offer' event on the channel: 
channel.on('video-offer', async (payload) => {
  console.log(payload)
  if (payload.description) {
    await pc.setRemoteDescription(payload.description);
    if (payload.description.type == "offer") {
      await pc.setLocalDescription(await pc.createAnswer());
      channel.push('video-offer', { description: pc.localDescription });
    }
  } else if (candidate) await pc.addIceCandidate(candidate);
})
channel.on('video-offer', async (payload) => {
  console.log(payload)
  if (payload.description) {
    await pc.setRemoteDescription(payload.description);
    if (payload.description.type == "offer") {
      await pc.setLocalDescription(await pc.createAnswer());
      channel.push('video-offer', { description: pc.localDescription });
    }
  } else if (candidate) await pc.addIceCandidate(candidate);
})
The problem is that the 'onnegotiationneeded' callback will crash upon "channel.push" for no clear reason, I have 'channel.onError' bound, but the error is just an empty object. Subsequently the other peer never executes the 'video-offer' callback because it never arrives. Has anyone got this scenario working before with the nexus example?
4 Replies
pitbull2k4
pitbull2k4OP•4w ago
Ah, I just realized the Nexus example app seems to have a function to renegotiate, but it is yet to be implemented, perhaps that is the key to get it working? https://github.com/elixir-webrtc/apps/blob/master/nexus/lib/nexus_web/channels/peer_channel.ex This file at line 51
GitHub
apps/nexus/lib/nexus_web/channels/peer_channel.ex at master · elix...
Example apps built on top of Elixir WebRTC. Contribute to elixir-webrtc/apps development by creating an account on GitHub.
Michał Śledź
Michał Śledź•4w ago
Hi @pitbull2k4, regarding renegotiation, I assume that you have also created an issue in our apps repo so just linking it here for other people as I answered there: https://github.com/elixir-webrtc/apps/issues/80 Regarding crash when calling channel.push, it might be that you should do channel.push('video-offer', { body: pc.localDescription.sdp }) as we do here: https://github.com/elixir-webrtc/apps/blob/master/nexus/assets/js/home.js#L108-L109 In other case, there might be a problem with serializing localDescription object but that's only my bet
pitbull2k4
pitbull2k4OP•4w ago
Thanks for the answer! I'm going to try using the tests as a template, if it works I will post here for reference :) Hmm I've looked at the examples, and it seemed that I just needed to call the existing "sdp_offer" callback from 'home.js' in the Nexus example app, as that seems to start the exact flow that's required, but it ends in a "DTLS error: peer_closed_for_writing" (testing with just one tab, starting with no devices and adding a webcam) Perhaps I just need to start with the tutorial and work through it, then it'll probably click at some point
Michał Śledź
Michał Śledź•4w ago
peer_closed_for_writing usally means that you closed webrtc peer connection on the other side 🤔

Did you find this page helpful?