Search code examples
javascriptperformancearchitecturewebrtcvideo-conferencing

Video chat with multiple usb webcamera


I am trying web video chat using webrtc.
I checked webrtc, and It's a enough for this solution.
But, in my case, there are three camera(webcamera, usb camera) in one side computer.

                  camera1
 camera1    <->   camera2
                  camera3

So, I tryed Add multiple stream to one RTCPeerConnection.
But, webrtc is not support this.

I need create 3 RTCPeerConnection for this. If I create 3 peer, then it seems like video chat room.

Is there another solution?


pc = new RTCPeerConnection(null);
pc.addStream(localStream1); 
pc.addStream(localStream2); 
pc.addStream(localStream3);` 

Is this possible?


Solution

  • Yes, WebRTC does support this, exactly as you show.

    Except addStream has been deprecated, so you want to use addTrack instead. Or use a polyfill:

    pc.addStream = stream => stream.getTracks().forEach(t => pc.addTrack(t, stream));
    

    The order of additions determine the order the track events fire on the other end:

    pc.ontrack = ({streams: [stream]}) => {
      for (const video of [remoteElement1, remoteElement2, remoteElement3]) {
        if (video.srcObject && video.srcObject.id != stream.id) continue;
        video.srcObject = stream;
        break;
      }
    }
    

    The above code will assign the three incoming streams to three video elements for playback, in order. The track event fires per track, so we check the stream.id in case a stream has more than one track.

    Alternatively, we could have sent the stream.ids over a data channel and correlated that way, since stream.ids are identical remotely. Note however that track.ids are not stable this way. The third way is to correlate using transceiver.mid which is always stable, except it is null initially.