multiple camera support

6,112 views
Skip to first unread message

Silvia Pfeiffer

unread,
Mar 13, 2013, 12:17:18 AM3/13/13
to discuss...@googlegroups.com
Hi all,

I wonder if the current implementation of WebRTC in Chrome or Firefox supports multiple cameras as input. I thought MediaTrackConstraint would help me do that, but I don't seem to have a means to select between different cameras for different getUserMedia calls. Has anyone solved this problem?

Cheers,
Silvia.

Silvia Pfeiffer

unread,
Mar 13, 2013, 6:22:23 AM3/13/13
to discuss...@googlegroups.com
Just to clarify: I am not looking for a means to call getUserMedia and then have the user select which camera to take, but I'm looking for a means to do this programmatically in code. It would be fine if the user has to click "ok" on each camera opening, but I'm looking to populate certain video elements with certain cameras and the user can't really make that choice.

Thanks for any suggestions for how to do this!

Cheers,
Silvia.


--
 
---
You received this message because you are subscribed to the Google Groups "discuss-webrtc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to discuss-webrt...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Vikas

unread,
Mar 14, 2013, 5:26:38 PM3/14/13
to discuss-webrtc
Hi,

I am not sure if currently you can do this programmatically. But, In
chrome 27, after you call GetUserMedia() api their is an omni bar with
video icon. If you click on the video icon, it shows the populated
list of cameras/microphones and allows you select a different device.

/Vikas

On Mar 13, 3:22 am, Silvia Pfeiffer <silviapfeiff...@gmail.com> wrote:
> Just to clarify: I am not looking for a means to call getUserMedia and then
> have the user select which camera to take, but I'm looking for a means to
> do this programmatically in code. It would be fine if the user has to click
> "ok" on each camera opening, but I'm looking to populate certain video
> elements with certain cameras and the user can't really make that choice.
>
> Thanks for any suggestions for how to do this!
>
> Cheers,
> Silvia.
>
> On Wed, Mar 13, 2013 at 3:17 PM, Silvia Pfeiffer
> <silviapfeiff...@gmail.com>wrote:

Silvia Pfeiffer

unread,
Mar 15, 2013, 3:55:51 AM3/15/13
to discuss...@googlegroups.com
I know how to change the video source. But when I use getUserMedia() for one video element with one webcam, then change the video source to a second webcam (while waiting in the code), then make a second call to getUserMedia(), I don't get the second camera. I sometimes get the first one again. Most of the time I simply get nothing.

I think I will register a chromium bug.

Regards,
Silvia.

Vikas

unread,
Mar 15, 2013, 12:56:29 PM3/15/13
to discuss-webrtc
Thanks for the feedback, you can file an issue with details. I have
tested multiple cameras in a single chrome tab and that had worked for
me in the past. You can add some sample code to the issue and we can
take a look.

On Mar 15, 12:55 am, Silvia Pfeiffer <silviapfeiff...@gmail.com>
wrote:

Justin Uberti

unread,
Mar 15, 2013, 12:56:40 PM3/15/13
to discuss-webrtc
What you are trying to do should work. Please file a bug.

In the future we will have additional enumeration options in the API.

PM

unread,
Mar 15, 2013, 2:52:24 PM3/15/13
to discuss...@googlegroups.com
Can you share a sample code to understand how to achieve that?

Silvia Pfeiffer

unread,
Mar 15, 2013, 11:18:10 PM3/15/13
to discuss...@googlegroups.com
In the most recent canary the menu to change camera is back in the camera icon of the url bar - that's a great step forward.

However, if I change cameras between getUserMedia calls, I get "New camera and microphone settings will take effect after reloading the page." . Obviously I then lose the first camera.

I've attached my example file - feel free to add it to the codebase as a test if you want.

I've added it also to http://code.google.com/p/webrtc/issues/detail?id=1480 which I think is the same issue.

Cheers,
Silvia.
twocamera.html

Vikas Marwaha

unread,
Mar 16, 2013, 12:20:14 AM3/16/13
to discuss...@googlegroups.com
Thanks, we will take a look.

Max Cruise

unread,
Jul 21, 2013, 10:35:19 AM7/21/13
to discuss...@googlegroups.com
I need multiple camera support using the HTML5 video tag (<video>).  I would like one PC to be able to control at least six cameras, hopefully a dozen.  For my application they do not need to be all active at the same moment.  However, switching from one <video> tag to another should be immediate.

The goal is to take perhaps 10 pictures with the single click of a mouse.

If I used IP cameras this should in theory work today since the "SRC" parameter on the <video src=""> tag should be able to reference each different address of each camera.  However, there is no similar addressability (an enumeration?) useable in the <video> tag for locally connected cameras.  I can easily connect webcams to the local PC via USB ports.

Does anyone know if anyone is addressing this type requirement?
  


James Lang

unread,
Jul 30, 2013, 2:12:43 PM7/30/13
to discuss...@googlegroups.com
Did this ever get resolved?  I have been able to get two cams rendering on my page by changing the source in the URL bar in between calls to getUserMedia.  However, one of the streams will always freeze after a short time.  I posted a whole new topic for this question before seeing this one unfortunately.

PM

unread,
Aug 2, 2013, 4:37:23 PM8/2/13
to discuss...@googlegroups.com
Reloading the page on a new camera selection can be a problem for some web applications.

Also it would be nice to have a way to list via javascript/html the available sources.

Vikas

unread,
Aug 2, 2013, 6:15:08 PM8/2/13
to discuss...@googlegroups.com
Hi,

See issue 1571, on latest canary, if you enable device enumeration in chrome://flags you should be able to test with getSources API.

/Vikas

Pedro Margalhau

unread,
Aug 2, 2013, 6:37:41 PM8/2/13
to discuss...@googlegroups.com
Thanks Vikas!

Having access to the sources list via web interface will be great improvement.


2013/8/2 Vikas <vikasm...@webrtc.org>

Bill

unread,
Aug 2, 2013, 6:54:03 PM8/2/13
to discuss...@googlegroups.com
Fantastic Vikas!

Is there / will there be, a way to use the result from the getSources API with the <video> tag?
You received this message because you are subscribed to a topic in the Google Groups "discuss-webrtc" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/discuss-webrtc/xLBdsLz_Mbw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to discuss-webrt...@googlegroups.com.

Vikas

unread,
Aug 5, 2013, 2:23:15 PM8/5/13
to discuss...@googlegroups.com
Hi,

Yes you should be able to achieve this currently with the device enumeration API's in chrome canary. The general idea is to query getSources api, check for empty label strings and pass sourceIds to getUserMedia. However, currently you must specify sourceId "optional" constraint in getUserMedia else you will run into issue 267878 Also it's good to keep track of this issue 267880

For example: 

MediaStreamTrack.getSources(gotSources); 

function gotSources(sourceInfos) {
  // Add code to get the sourceId for audio & video source & pass it to GUM.
  GetCameraAndMic(audio_source, video_source);
}

function GetCameraAndMic(audio_source, video_source) {

  getUserMedia({ audio: {optional: [{sourceId: audio_source}]},
                        video: {optional: [{sourceId: video_source}]}},
                        gotStream, function() {});
}

/Vikas

James Lang

unread,
Aug 5, 2013, 4:40:59 PM8/5/13
to discuss...@googlegroups.com
I am attempting to use this feature to have a drop down that allows me to select which camera I want to use.  No matter what I do, it always uses 1 of the cameras.  It seems to not care which id I am passing to the GUM method.  Originally, I thought it had to do with the use of optional instead of mandatory (but as you noted we can't use mandatory yet due to the issues with it).  I have attached an HTML file that I would anticipate would allow me to use this feature to switch my camera (it is based on your message below).
sources4.html

Vikas

unread,
Aug 5, 2013, 5:41:42 PM8/5/13
to discuss...@googlegroups.com
Hi,

I think you are not passing the right video source id for GUM in the demo code. You sourceId's array contain both audio and video sources and selectedIndex might return audio device id while you need a video source id.

/Vikas

James Lang

unread,
Aug 5, 2013, 6:11:33 PM8/5/13
to discuss...@googlegroups.com
Oh man, you're correct.  Fixed and working.  Thanks for the assist!

Arshak Movsissian

unread,
Aug 6, 2013, 3:30:39 AM8/6/13
to discuss...@googlegroups.com
Hi James Lang,

Could you, please, send us updated html file.

thanks!

James Lang

unread,
Aug 6, 2013, 1:05:25 PM8/6/13
to discuss...@googlegroups.com
Sure thing.  Attached is the updated code (as Vikas pointed out, I was not appropriately storing only the video source IDs).

This page will load up the sources when you click Get Sources and then when you change the select box, will start the camera that you selected.  The only thing I haven't figured out is that on my machine, each camera is shown 2 times (this happens in the Chrome settings as well) and one out of the pairs doesn't work.  I think this is an artifact of my dev machine though, since on other machines things look good.

Enjoy.
sources4.html

Stephan Bardubitzki

unread,
Aug 6, 2013, 1:51:42 PM8/6/13
to discuss...@googlegroups.com
Any idea when getSources API will land on Chrome BETA for Android?

Philipp Hancke

unread,
Aug 7, 2013, 3:48:19 AM8/7/13
to discuss...@googlegroups.com
> This page will load up the sources when you click Get Sources and then when you change the select box, will start the camera that you selected.

You might want to .stop() the currently used stream in gotStream() -- otherwise all your camera lights will be on.

Silvia Pfeiffer

unread,
Aug 7, 2013, 7:50:16 AM8/7/13
to discuss...@googlegroups.com
Thanks for sharing. The attached works for me in Canary, but only if I
*don't* turn on getSources in chrome://flags (and if I have more than
one video - otherwise you have to add a fake option).

Thanks again!

Cheers,
Silvia.

James Lang

unread,
Aug 7, 2013, 11:21:44 AM8/7/13
to discuss...@googlegroups.com, philipp...@googlemail.com
Thanks Philipp, I was wondering about that.  Thanks for the tip.

James Lang

unread,
Aug 7, 2013, 11:23:36 AM8/7/13
to discuss...@googlegroups.com
Hi Silvia,

I think that they might have flipped the flag on us.  I think it used to actually enable the getSources, but now if you enable it is DISABLES getSources.  That confused me at first.  However, to get my example to work, you would have to have getSources available (by not enabling the flag that would disable getSources).

Also, you are correct, if you don't have multiple video sources, you can't change the select box and therefore can never get a video to start.  Good caveat.

Dennis

unread,
Aug 7, 2013, 1:57:08 PM8/7/13
to discuss...@googlegroups.com
I just updated to today's Canary Version 30.0.1589.0 canary.  All of the labels being returned now are empty "", even though the array correctly contains the number of audio and video devices as well as their sourceids.  Is anyone else seeing this?  Sourceid's is great, but not very useful if we can't tell what device they belong to since the labels are empty strings.

James Lang

unread,
Aug 7, 2013, 2:01:43 PM8/7/13
to discuss...@googlegroups.com
I'm seeing the same.  You can switch the select box and it will actually switch the cams (because the IDs still are working) but the labels are blank.  I know that there was another issue with blank labels out there, so maybe this was a result of trying to fix that.  We were so close!

Philipp Hancke

unread,
Aug 7, 2013, 2:08:59 PM8/7/13
to discuss...@googlegroups.com
well, you're seeing the result of https://code.google.com/p/chromium/issues/detail?id=267880 being fixed. The labels should become available after you call getUserMedia.

James Lang

unread,
Aug 7, 2013, 2:26:15 PM8/7/13
to discuss...@googlegroups.com
Well, that's a bummer. How do you know which source to call GUM on if you can't examine the sources? Why does a page have to ask to even see a source name? To me this really weakens the actual use cases for the functionality.

Dennis

unread,
Aug 7, 2013, 2:32:06 PM8/7/13
to discuss...@googlegroups.com
Well that is just ridiculous!!!  So if we want to enumerate the devices for a user to select, we first have to call getUserMedia and wait for the response, then we can get the sources to enumerate the device with labels, then call getUserMedia and prompt the user for permission AGAIN  his time suppling  the correct source id ????  Thank makes no sense whatsover and I find this change absurd.

Dennis

unread,
Aug 7, 2013, 3:10:10 PM8/7/13
to discuss...@googlegroups.com
and besides, even after calling getUserMedia and getting permission succesfully, subsequent calls to MediaStreamTrack.getSources(onGotSources) still returns an array with all the labels set to empty strings. so it doesn't even do what it's supposed to do now.  

Vikas

unread,
Aug 7, 2013, 3:24:55 PM8/7/13
to discuss...@googlegroups.com
Hi,

This is based on the fix for issue 267880. So currently you will see no labels, unless you running over https and GetUserMedia has been accepted atleast once for that origin. Also regarding flags, in latest canary 30.0.1589 onwards the device enumeration is enabled by default.

/Vikas

Dennis

unread,
Aug 7, 2013, 3:56:30 PM8/7/13
to discuss...@googlegroups.com
So what your saying is that the device enumeration API is useless unless being run over https?

If running over https, and user has permissioned getUserMedia, will the labels be returned for all devices on subsequent calls to MediaStreamTrack.getSources or only the one device that is the source of the stream returned by getusermedia? If the latter than the device enumeration API is completely useless IMO since ill have to iterate through every single source and get permission by the user in order for the API to be usable. At which point the API is useless anyway because ill already have all the device names by parsing the labels in the media streams returned by getUserMedia let alone the fact that ill already have pissed the user off by making him click an info bar a dozen times just so I could enumerate his devices into a pretty list.

James Lang

unread,
Aug 7, 2013, 3:56:40 PM8/7/13
to discuss...@googlegroups.com
Hi Vikas, can you speak to why this was an issue in the first place?  I really don't understand returning the IDs but not the labels.  What security hole is this trying to plug?  If you insist on getting the user's permission, can instead we have Chrome get permission to return the source labels (without having the overhead of needing to call GUM)? Forcing a call to getUserMedia doesn't make any sense.  Chrome is asking the user to use a single camera/mic which is not the same as asking the user to see the list of all cameras/mics.  Overall, I don't think that this change really should have been made, but perhaps there is something that you are trying to accomplish that I am not seeing.

v...@chromium.org

unread,
Aug 7, 2013, 4:14:15 PM8/7/13
to discuss...@googlegroups.com
Hey all, I updated crbug.com/267880 with an explanation for why this change was necessary. This is done for privacy reasons, not security reasons.

Victoria

Philipp Hancke

unread,
Aug 8, 2013, 12:46:40 AM8/8/13
to discuss...@googlegroups.com
On Wed, Aug 7, 2013 at 9:56 PM, Dennis <ddo...@gmail.com> wrote:
So what your saying is that the device enumeration API is useless unless being run over https?

Well, the example from James is pretty useless unless run over https, but that is because getusermedia is useless unless being run over https. The user might switch the selection box multiple times and have to answer multiple getUserMedia-questions, since those stack ontop of each other :-/

Silvia Pfeiffer

unread,
Aug 8, 2013, 3:09:11 AM8/8/13
to discuss...@googlegroups.com

I agree with this analysis: a call to get getSources() should result in *one* user request for access to the camera names, rather than silently ignoring the camera labels. Also, this should be a separate codepath to the request for actual camera access.

Silvia.


--

Dennis E. Dowhy

unread,
Aug 8, 2013, 7:56:12 AM8/8/13
to discuss...@googlegroups.com
Agreed.  It seems hacky to call getSources and have a 'partially-populated' structure returned.  And it is not obvious that you first need to call getUserMedia, and you must also be running over https:// for the API to work.  IMO this is poorly implemented (granted it's first iteration, but I don't think it was given enough thought). 

 I also don't think getUserMedia is the right way to 'get permission'.  The reason is actually pretty simple - the purpose of getUserMedia is to returns a media stream  which also 'turns the device on'.   I don't want to turn the device on.  I don't even want a media stream.  I just want to get a list of the device names so that I can provide a list for the user to choose from before actually accessing the device and turning it on to get a live media stream from it.  

A better approach would be something like getDevicePermissions({audio=true,video=true}) or maybe by sourceId but an options to allow access to all devices in one shot getDevicePermissions({audioSourceIds: [ALL_AUDIO_CAPTURE_SOURCES], videoSourceIds[devid1,devid2,devid3]) or getDeviceAccessRights({x})  etc Therefore, a user may explicitly call getDevicePermissions(), or they may call getSources() or getUserMedia() both of which implicitly call getDevicePermissions().   getSources() should not just return a 'partially filled out list'.   If you are not returning labels, I'm actually surprised you return anything at all.  You're still returning all the deviceIds and their types, which IMO is contradictory to the reason behind removing the labels. A site can still get data like how many devices of each type you have on your system without permission.  Therefore, a malicious site can figure out if you have a webcam and then start trying to hack it.   If security is a concern, then nothing should be returned at all until getDevicePermissions is successful.   This also means that getDevicePermissions would need to persist between a call to getDevicePermissions() and  getSources() over http, otherwise getSources() is 100% useless in http, and therefore should return return an error if invoked.   I doubt the intention was to make a useless API over http, so I think more thought is required to make this work correctly in both http and https cases without requiring the user to click an info bar a over and over and over again.

Bill

unread,
Aug 8, 2013, 9:51:26 AM8/8/13
to discuss...@googlegroups.com
I agree with Dennis analysis.

One additional part when considering a solution is the goal for the HTML programmer interaction with the results.  Today only one HTML <video> tag is associated with any webcam.  Once webcams can be enumerated, the javascript programmer will want to reference the id for different <video> tags and expect each to represent a different webcam.  Today it is somewhat random which webcam might be referenced by a <video> tag today.  In the future the enumeration would uniquely identify the webcams and the programmer should be confident in setting up and using that enumeration.
You received this message because you are subscribed to a topic in the Google Groups "discuss-webrtc" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/discuss-webrtc/xLBdsLz_Mbw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to discuss-webrt...@googlegroups.com.

stefanh

unread,
Aug 10, 2013, 2:46:03 AM8/10/13
to discuss...@googlegroups.com
The current behaviour is AFAICT based on the W3C draft at http://dev.w3.org/2011/webrtc/editor/getusermedia.html

If you want it changed I think you should  bring your input to the public-media-capture list at w3.org (there were some reasoning around privacy that led to the removal of the labels).

Stefan

Tom

unread,
Aug 14, 2013, 5:40:33 PM8/14/13
to discuss...@googlegroups.com
The unfortunate consequence of the https restriction is that its almost impossible to do local development with this feature :-( It would be great to see the option to remember permissions for sites not on HTTPS too - this would solve a lot of these issues.

v...@chromium.org

unread,
Aug 28, 2013, 6:15:32 PM8/28/13
to discuss...@googlegroups.com
This thread was brought up to my attention again, and FYI we are working on adding a developer flag to Chrome for 31 so that gUM permission is always allowed (crbug.com/277162). We are also planning on fixing the HTTP behavior, but it's non-trivial to implement and not our top priority, so that will probably happen in Chrome 32 or 33 (crbug.com/269719).

Victoria

Victor Stan

unread,
Sep 7, 2013, 5:05:59 PM9/7/13
to discuss...@googlegroups.com
I am also looking into the ability to show multiple camera feeds on one page. 

In my case I have 2 cameras, and I want to show both of them at the same time on the same web-page. I thought by flipping through the MediaAStreamTrack.getSource() I could then enable each one through button click events that would call webkitGetUserMedia with the proper constraints given the media source id, and I could then throw in some elements on the page for each video stream, but while I can choose between one or the other camera, I can't seem to be able to get both to work at the same time...

Here is the code I am currently working with: https://gist.github.com/victorbstan/6479265

If anyone knows of how I can get multiple camera feeds on one page. I could even use other related HTML5 tech / webSockets, etc. if it would be easier... 

Silvia Pfeiffer

unread,
Sep 13, 2013, 1:07:27 AM9/13/13
to discuss...@googlegroups.com
On Sun, Sep 8, 2013 at 7:05 AM, Victor Stan <victo...@gmail.com> wrote:
> I am also looking into the ability to show multiple camera feeds on one
> page.
>
> In my case I have 2 cameras, and I want to show both of them at the same
> time on the same web-page. I thought by flipping through the
> MediaAStreamTrack.getSource() I could then enable each one through button
> click events that would call webkitGetUserMedia with the proper constraints
> given the media source id, and I could then throw in some elements on the
> page for each video stream, but while I can choose between one or the other
> camera, I can't seem to be able to get both to work at the same time...

Just ignore the "reload page" button when you've added the second
camera. It should work. I have 3 cameras working at the same time in
Chrome.
Silvia.

>
> Here is the code I am currently working with:
> https://gist.github.com/victorbstan/6479265
>
> If anyone knows of how I can get multiple camera feeds on one page. I could
> even use other related HTML5 tech / webSockets, etc. if it would be
> easier...
>
>
> On Wednesday, March 13, 2013 12:17:18 AM UTC-4, Silvia Pfeiffer wrote:
>>
>> Hi all,
>>
>> I wonder if the current implementation of WebRTC in Chrome or Firefox
>> supports multiple cameras as input. I thought MediaTrackConstraint would
>> help me do that, but I don't seem to have a means to select between
>> different cameras for different getUserMedia calls. Has anyone solved this
>> problem?
>>
>> Cheers,
>> Silvia.
>

cyrille

unread,
Feb 10, 2014, 11:43:24 AM2/10/14
to discuss...@googlegroups.com

Hi Victor

Did you succeed to show multiple camera feeds one one page ?

When i run your code, i get the following message : 
"{"constraintName":"","message":"","name":"PermissionDeniedError"}"

Cheers,
Cyrille

Gregir M

unread,
May 7, 2014, 11:34:33 PM5/7/14
to discuss...@googlegroups.com
Hi, Silvia. Were you able to accomplish multiple cameras over http, or https? Does your solution require repeat permissions for each camera? Looking desperately for a solution here. (If you can share code, I'd appreciate it.)

Silvia Pfeiffer

unread,
May 8, 2014, 9:54:22 PM5/8/14
to discuss...@googlegroups.com
Yes, we use multiple cameras over https. You only have to accept
permissions on each camera once, when you load the page for the first
time. So, if you have 3 cameras, that's 3 "Accept" boxes. From then
on, no more questions.

HTH,
Silvia.
> --
>
> ---
> You received this message because you are subscribed to the Google Groups
> "discuss-webrtc" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to discuss-webrt...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Silvia Pfeiffer

unread,
May 8, 2014, 9:57:00 PM5/8/14
to discuss...@googlegroups.com
There's an example in the Google WebRTC example repo at
https://github.com/GoogleChrome/webrtc/blob/master/samples/web/content/multiple/index.html
.

HTH,
Silvia.

Rob Retter

unread,
May 13, 2015, 2:14:12 PM5/13/15
to discuss...@googlegroups.com
That link is a 404, which is unfortunate, since I was quite interested in seeing such an example.

Vikas

unread,
May 13, 2015, 2:16:34 PM5/13/15
to discuss...@googlegroups.com, rre...@gmail.com
The samples have been moved here https://webrtc.github.io/samples/

/Vikas

Vikas

unread,
May 13, 2015, 2:20:00 PM5/13/15
to discuss...@googlegroups.com, vikasm...@webrtc.org, rre...@gmail.com
You can also check demos on this page : https://github.com/webrtc/testrtc
There is a demo to test multiple video devices in there.

Aditya srivastava

unread,
Mar 25, 2016, 10:37:38 AM3/25/16
to discuss-webrtc

Hi all

I am trying to switch cameras i got the switching by your demo but i can switch that on the stream to another user which is connected to me with video call
and i am not getting that point where i have to change it can any one help me on this topic

regards 

Aditya Srivastava   
 

Alaka Premanand

unread,
May 4, 2018, 1:52:47 AM5/4/18
to discuss-webrtc
""I need complete javascript code to access multiple camera drivers"""".


I am trying to use multiple cameras on web application . 
List of camera drivers should come in the drop down.
 I should be able to choose required camera driver from the drop down.
Based on my selection, i will capture the photo.
Whenver i change the drop down option, 
the corresponding camera driver should open."

**** RTCmULTICONNECTION ************* 

Alaka Premanand

unread,
May 4, 2018, 1:52:47 AM5/4/18
to discuss-webrtc
Reply all
Reply to author
Forward
0 new messages