How to select camera in webapp?

Question

How to choose between the front and rear camera in a webapp?

also usefull for: How to choose between multiple microphones?

Solution

There is a live example on:

https://webrtc.github.io/samples/src/content/devices/input-output/

(This webrtc-link is new, and should work on Chrome mobile)

Link is from this answer - https://stackoverflow.com/a/35480435/2414207, which is discussing MediaDevices.enumerateDevices()[new] vs MediaStreamTrack.getSources()[deprecated] in depth.

---

You can find further information (slightly outdated now, but usefull to get the big picture) about this on:

http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-gettingstarted

Scroll down and skip:

• Feature detection
• Gaining access to an input device
• Setting media constraints

until

• Selecting a media source

---

For reference: my former live example (broken)

https://simpl.info/getusermedia/sources/

They are using MediaStreamTrack.getSources()[deprecated],this is not working on Chrome 45 and Firefox 39 anymore.

For the new function MediaDevices.enumerateDevices() - see https://stackoverflow.com/a/35480435/2414207

Comments

[AddingColor]

I answered it myself, because I was looking for information on stackexchange and could't find any, so asking this question for people facing the same problem

[string.Empty]

That example doesn't work on chrome mobile. At least switching between cameras does not work.

[Colonize.bat]

was a working demo ever shown in the last year. I cant find a single one that works in chrome mobile.

[AddingColor]

@Colonize.bat will look into this (the next few days), is it correct that the video is working, but camera selection is not working?

[Colonize.bat]

That is correct. On my Samsung with Chrome 54.0.2840.85 the front camera works on load, but when changing to back, it breaks (black camera screen). On my Nexus5 (Chrome 54.0.2840.85) both cameras dont work. In my remote Debug Inspector he throws errors at main.js:42 "PermissionDeniedError" msg: "Only secure origins are allowed (see: goo.gl/Y0ZkNV)."" https might fix this. I will test it as well local. Also from the Inspector "main.js:32 MediaStreamTrack.getSources is deprecated. See chromestatus.com/feature/4765305641369600 for more details."

[Colonize.bat]

when using https (like you linked above correctly) he throws: main.js:38 - Uncaught (in promise) DOMException: play() can only be initiated by a user gesture. main.js:48 - Uncaught TypeError: window.stream.stop is not a function(…) main.js:48 - Failed to load resource: the server responded with a status of 404 ()

[AddingColor]

@Colonize.bat - updated my answer, did try it on Chrom 54 on Nexus5, should work now, please reply and tell if it's working for you (I will delete some of my comments here lateron (maybe you could too), to clean this comment section, unfortunately stackoverflow is not supporting PMs, so we had to use this comment section)