Using multiple USB cameras with Web RTC

Question

I want to use multiple USB camera with Web RTC.

For ex) https://apprtc.appspot.com/?r=93443359

This application is web RTC sample. I can connect to another machine, but I have to disconnect once to change the camera.

What I want to is,

1.Use two camera at the same time on the same screen. 2.(if 1 is not possible),I want to switch the camera without disconnecting current connection

Does anyone have information about how to use two camera on Web RTC?

Answer 1

call getUserMedia twice and change the camera input in between

Answer 2

You can use constraints to specify which camera to use and you can have both of them displayed in one page as well. To specify which camera to use take a look at the following snippet (only works on Chrome 30+):

getUserMedia({
  video: {
    mandatory: {
      sourceId: webcamId,
      ...
    }
  }, 
  successCallback,
  failCallback);

The webcamId you can get by:

MediaStreamTrack.getSources(function(sources){
  var cams = _.filter(sources, function(e){ //only return video elements 
    return e.kind === 'video';
  });
  var camIds = _.map(cams, function (e) { // return only ids
    return e.id;
  });
});

In the snippet above I've used underscore methods filter and map.

More information on:

• WebRTC video sources
• constraints