0

I am trying to add a video track to the user's stream object so that the peers can see it. In componentDidMount() I initially get the permission to use the microphone, but I have a button that I would like to use to add a video track.

I have a mute/unmute button, that toggles the audio, that works just fine, but when I try to add a video track the same way I can't get it to arrive to the peers.

This is the code I use to get access to the microphone only:

getAudio(callback, err) {
    const options = { video: false, audio: true };
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        return navigator.mediaDevices.getUserMedia(options)
            .then(stream => callback(stream))
            .catch(e => err(e));
    }
    return navigator.getUserMedia(options, callback,  err);
}

I call this in componentDidMount() like so:

this.getAudio(this.onAudio, err => {
    this.setState({
        mediaErr: 'Could not access webcam'
    });
    console.log('getMedia error', err);
});

The onAudio() creates the peers, since it runs on mount. I have a button I use to mute/unmute the audio like this:

toggleMicrophone(){
    const audioTrack = this.stream.getAudioTracks()[0];
    audioTrack.enabled = !audioTrack.enabled;
    this.setState({
        microphoneEnabled: audioTrack.enabled
    });
}

This works fine, so I tried to add the video track pretty much the same way. I have a button that calls the getVideo(), that is identical to the getAudio(), except in the options, audio and video are both set to true. getVideo() calls the onVideo(), passing it the stream it gets from getUserMedia().

The onAudio() function:

onVideo(stream){
    this.stream.addTrack(stream.getVideoTracks()[0]);
}

Since the mute button worked just by disabling the audio track, I thought I could just add the video track here and the peers would see the video stream, but it doesn't work that way.

The video track appears for the user that pressed the button, but not for the peers. What am I missing?

Flashcap
  • 141
  • 2
  • 17
  • You need a middleware which can transmit your stream to other users. Checkout https://webrtc.org/ for this. – Sumit Surana Dec 06 '20 at 03:00
  • I used this [this](https://github.com/fijiwebdesign/simple-peer-react) as a reference, the peers are created correctly and if I mute the audio, the peers side gets muted too, so the transmission should be working. That's why I don't know whats the problem with this one. The microphone toggle just worked by modifying the stream, because it gets transmitted to the peers. – Flashcap Dec 06 '20 at 03:05
  • please check [link](https://github.com/feross/simple-peer) – chgav007 Sep 03 '21 at 13:19

0 Answers0