Enable Rear Camera with HTML5

Enable rear camera with HTML5

Check out https://simpl.info/getusermedia/sources/ that shows how you can select sources using

MediaStreamTrack.getSources(gotSources);

You can then select the source and pass it in as optional into getUserMedia

var constraints = {
  audio: {
    optional: [{sourceId: audioSource}]
  },
  video: {
    optional: [{sourceId: videoSource}]
  }
};
navigator.getUserMedia(constraints, successCallback, errorCallback);

It is now fully available in Stable Chrome and mobile (As of v30)

getUserMedia() - selecting rear camera on mobile

navigator.getUserMedia is long deprecated. Use navigator.mediaDevices.getUserMedia now.

To get the rear camera, you can use the MediaConstraint:video:facingMode property.
Available values are 'user' (front camera), and 'environment' (back camera).

navigator.mediaDevices.getUserMedia({

  audio: false,

  video: {

    facingMode: 'environment'

  }

})

  .then(stream => vid.srcObject = stream)

  .catch(console.error);

<video muted autoplay id="vid"></video>

How to select camera in webapp?

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

---

Related Topics