2

I'm developing an internal web application for our organization. The app will be used primarily (if not exclusively) from desktop/laptop machines.

I need to give the user the ability to snap an image of themselves. I've followed the example posted by David Walsh here.

This works fine if the user has a single camera on their computer. However, on machines that have both a front and rear camera (like a Surface Pro 4), this code defaults to the rear facing camera. I tried tweaking the code like so:

navigator.mediaDevices.getUserMedia({video: {facingMode: "user"}, audio: false}).then(...)

However, this made no difference. I'm guessing that was primarily intended for mobile devices.

Is there any way to force the camera to the front if its available or, better yet, enable the user to switch cameras on a laptop device with both a front and rear camera?

RHarris
  • 10,641
  • 13
  • 59
  • 103
  • It should work in Firefox. In Chrome you'd need the adapter.js polyfill still [I think](http://stackoverflow.com/a/32364912/918910). Actually, I'm just realizing that polyfill won't work, as Surface Pro defaulting to the back camera will surprise it. I'll try to fix that. – jib Apr 04 '17 at 19:39
  • Could you do me a favor and try it in [Firefox](https://www.mozilla.org/en-US/firefox/products/)? (I don't have a Surface Pro) – jib Apr 05 '17 at 12:38
  • It did work in Firefox -- no polyfill needed. When asking for my permission to use my camera, Firefox provides a dropdown to allow me to select which camera to use. (Would still like to figure out how to get this to work in Edge and Chrome) – RHarris Apr 05 '17 at 13:27
  • Yeah but was the front camera the default choice? Unless you use `{exact}` Firefox will still let you choose (`{ideal}` or plain string only alters the default choice in the list). - Does [this](https://jsfiddle.net/jib1/jsm6rLh0/) work to force front and back in Firefox even if you tell it to remember the decision? Btw, I just [fixed adapter.js](https://github.com/webrtc/adapter/pull/483) so this should work in Chrome too now, as long as you use [adapter.js](https://github.com/webrtc/adapter). Please let me know if it doesn't work. – jib Apr 05 '17 at 16:50
  • Your fiddle did work in Firefox to force camera to either front or back. I will give adapter.js a go as soon as I'm able and report back to you. – RHarris Apr 07 '17 at 13:24
  • The fiddle should work in Chrome as well (it uses adapter.js). Does it work for you there? – jib Apr 07 '17 at 14:08
  • LOL! In Firefox, it works correctly. In Chrome the front and back are switched -- i.e. the front button activates the back camera and the back button activates the front. – RHarris Apr 07 '17 at 14:15
  • Could you try the fiddle again in Chrome? I've added a [second fix](https://github.com/webrtc/adapter/pull/495). I don't have Surface Pro 4. Thanks. – jib Apr 11 '17 at 01:08
  • Sorry, still getting the same result. Front button activates rear camera and back button turns on the front-facing camera – RHarris Apr 11 '17 at 03:06
  • Whoops, how about now? – jib Apr 11 '17 at 03:53
  • Weird. Now it works perfectly in Edge but it stopped working in Chrome -- i.e. clicking buttons doesn't do anything now -- no images front or back. – RHarris Apr 12 '17 at 12:30
  • 1
    Woops, just tried again in Chrome and it worked perfectly -- not sure what was going on before. However, it appears to be working great! Thanks so much. If you want to add your adapter.js polyfill as the answer I will mark it as such! – RHarris Apr 12 '17 at 12:32

1 Answers1

3

The facingMode constraint is the right answer according to the spec, and works in Firefox. Chrome just hasn't implemented it yet. However, you can use the adapter.js polyfill to get it.

Try it out here.

Community
  • 1
  • 1
jib
  • 40,579
  • 17
  • 100
  • 158