Capture video from several webcams with getUserMedia

Question

I would like to capture video from multiple webcams connected to my pc. It is easy enough to use one web-cam, but how can I get video streams from multiple sources? Is it possible to select which camera to use for one stream?

     navigator.getUserMedia ({
         video: true 
     }, function (oMedia) {
         var video = document.getElementById ('tVideo1'); 
         video.src = window.URL.createObjectURL (oMedia); 
     }); 

Answer 1

I was intrigued by your question, so I started researching 'getusermedia multiple cameras'.

After a couple of hours, when I was almost about to give up, I came across this google group discussion.

I referred back to your question to see if your goal was that streams from all webcams should appear simultaneously or if you wanted to present the user an option to choose the camera feed. It seems like you wanted the user to select the feed. If it is the later case, then in the link above, Vikas (in his 8/15/2013 message) had described a way to achieve this. You need to enable WebRTC enumerate sources flag, then use MediaStreamTrack.getSources to get all the sources and pass sourceId to getUserMedia such as navigator.getUserMedia({ "video": {optional: [{sourceId: "---YOUR ID HERE---"}]}}, fun, errfun);. And it seems one of the users was able to get it to work successfully.

Here's the sourcecode that I saw. This information would be specific to Chrome canary or Firefox. I just thought I would share it in case you haven't already come across this, something that might help you. I have implemented an application where multiple web camera feeds on a single screen but it was simpler because it was a desktop application.

Answer 2

You will need to use the getSources API which is not that well supported I'm afraid. I think that Chrome has a version of it available hidden behind a configuration flag, but other than that there's nothing that you can do other than wait.

Not the answer you wanted to hear I know, sorry.