WebRTC: Change video stream in the middle of communication

https://stackoverflow.com/questions/42825338/webrtc-change-video-stream-in-the-middle-of-communication

WebRTC - change video stream in the middle of communication

 

WebRTC is a powerful technology that enables real-time communication between browsers. It allows users to exchange audio, video and data directly, without the need for a server.

In this article, we will discuss how to change the video stream during a WebRTC call.

How WebRTC works

WebRTC is based on peer-to-peer communication, meaning that the data is exchanged directly between the browsers of the users involved in the call. This is done through a signaling process, in which the browsers exchange information about the media streams they want to share, their network addresses, and other relevant information.

Once the signaling process is completed, the browsers start exchanging media streams directly. This is done through a process called "ICE" (Interactive Connectivity Establishment), which establishes a direct connection between the browsers, bypassing firewalls and other network barriers.

Changing the video stream

Changing the video stream during a WebRTC call can be done in two ways:

1. Replace the video track of the MediaStream object that is being sent.
2. Add a new video track to the MediaStream object and stop sending the old track.

1. Replacing the video track

To replace the video track of the MediaStream object, you need to do the following:

1. Create a new video track with the new video stream that you want to send.
2. Get the MediaStream object that is being sent using the getSenders() method of the RTCPeerConnection object.
3. Get the video track from the MediaStream object using the getVideoTracks() method.
4. Replace the video track with the new video track using the replaceTrack() method of the RTCPeerConnection object.

Here's an example of how to replace the video track of a MediaStream object:

let newVideoStream = navigator.mediaDevices.getUserMedia({ video: true });
let senders = peerConnection.getSenders();
let videoTrack = senders[0].track;
let newVideoTrack = newVideoStream.getVideoTracks()[0];
senders[0].replaceTrack(newVideoTrack);

2. Adding a new video track

To add a new video track to the MediaStream object and stop sending the old track, you need to do the following:

1. Create a new video track with the new video stream that you want to send.
2. Get the MediaStream object that is being sent using the getSenders() method of the RTCPeerConnection object.
3. Add the new video track to the MediaStream object using the addTrack() method.
4. Get the old video track from the MediaStream object using the getVideoTracks() method.
5. Remove the old video track from the MediaStream object using the removeTrack() method of the RTCPeerConnection object.

Here's an example of how to add a new video track to a MediaStream object:

let newVideoStream = navigator.mediaDevices.getUserMedia({ video: true });
let senders = peerConnection.getSenders();
let oldVideoTrack = senders[0].track;
let newVideoTrack = newVideoStream.getVideoTracks()[0];
let newStream = new MediaStream([newVideoTrack]);
senders[0].replaceTrack(newVideoTrack);
peerConnection.removeTrack(oldVideoTrack);

Conclusion

WebRTC allows for real-time communication between browsers, and changing the video stream during a call can be useful in many scenarios. By following the steps described in this article, you can easily replace or add a new video track to a MediaStream object during a WebRTC call.