Adding streams and tracks via simple-peer in react

Question

I am working on online conferencing code in react. I am using simple-peer as a WebRTC wrapper whereby I started with simple-peer-react and build on top of it. I am now trying to dynamically add a stream/track to the peer while the connection is already active. The stream comes from a video, for which I capture the stream and pass it on the peer management code to extract and add the tracks (see code below). What I expect, when the track is added successfully, is that it will appear in the peer object in the stream that was handed along with it. This however does not happen. Also, the 'track' event on the side of the connected peer does not fire.

I want to note that all other simple-peer (WebRTC) code works fine: Establishing video connection to peers, adding peers dynamically, sending and receiving data over data-channel.

What am I doing wrong? (see code below)

thanks a lot in advance, Alex

Here the code:

Get the stream from reference of video object

 buttonCallback = () => {
    // ref points to video component, with video loaded. Stream contains two MediaStreamTracks
    const stream = this.localVideoRef.current.captureStream(); 
    // forward to peer connection management
    this.props.addTracksToPeerFcn(stream) // points to addTracksToPeerFcn
  }

Trying to add the tracks to the peer

    addTracksToPeerFcn(stream){
      //peers contains all connected peers. So iterate over it and try to add the captured stream to it.
      Object.entries(this.state.peers).map(entry => { 
        let [peerId, peer] = entry
        console.log('Adding tracks to peer', peerId, peer, stream)
        
        let vidtracks = stream.getVideoTracks()
        let audtracks = stream.getAudioTracks()

        console.log('Track: ', vidtracks) // Check to make sure track exists: it does
        console.log('Track: ', audtracks)

        peer.addTrack(vidtracks[0], stream)
        peer.addTrack(audtracks[0], stream)

        // Check for added streams: none. 
        console.log('Streams now: ', peer.streams)

        // Also: checking for added tracks in current or other streams: none
        // (not in sample code)
      })
    }

Alex Alex · Accepted Answer · 2020-08-18T07:18:29

After a few days I found the answer myself: The implementation of simple-peer I was using was of an older version (9.1.1). I suspect (unconfirmed) this version has bugs present related to adding tracks and streams to peers. After upgrading to the newest version, the issue was resolved.

Adding streams and tracks via simple-peer in react

1 Answers