How set rear camera stream in WebRTC video chat

2.6k views Asked by At

I’m new to this site so forgive me if the question is not well expressed. I’m implementing a video chat application based on WebRTC, angular-rtcomm and WebSphere Liberty Profile.

I started from the sample HelpDesk application on GitHub (https://github.com/WASdev/sample.rtcomm.helpdesk).It works fine and users can see each other.

My question: is it possible to select the rear camera stream instead of the front camera (when rear camera is available)?

The RtcommVideoController used in video element initialize the stream with front camera and I did not found where change this behavior, if possible.

Thanks in advance.

2

There are 2 answers

2
jib On

For angular-rtcomm-specific help, see the other answer. For general WebRTC:

facingMode

The specification answer is the facingMode constraint, but currently only Firefox for Android supports it:

var constraints = { video: { facingMode: "environment" } };

This will make getUserMedia prefer the rear camera if there is one, but not fail over it. Use "user" for the front one.

To require the rear camera, use:

var constraints = { video: { facingMode: { exact: "environment" } } };

For help with the constraint syntax see MDN.

Where facingMode is not available, enumerateDevices will let you detect how many cameras are available, and let you choose between them using the deviceId constraint.

0
bpulito On

I found this answer on StackOverflow: How to choose input video device for webrtc? .

It looks like you can select the input device from the browser configurations if you need a quick solution.

It also looks like there is a programmatic way to do this using the WebRTC MediaStreamTrack API. We need to look into exposing this through angular-rtcomm and the rtcomm client.js.

I opened an issue for this in the rtcomm GitHub repositories listed below. If you want to take a stab at it yourself, fork us and modify the open source in your own branch and we can merge it back into the master when your done.

https://github.com/WASdev/lib.angular-rtcomm

https://github.com/WASdev/lib.rtcomm.clientjs