GetUserMedia – facingmode

by

Update: facingMode is now available in Chrome for Android through the adapter.js polyfill!

facingMode is not yet implemented in Chrome for Android, but works natively in Firefox for Android.

You must use standard constraints however: (use https fiddle for Chrome):

var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop());

var log = msg => div.innerHTML += msg + "<br>";
<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

The { exact: } syntax means the constraint is required, and things fail if the user doesn’t have the right camera. If you leave it out then the constraint is optional, which in Firefox for Android means it only changes the default in the camera chooser in the permission prompt.

More Related Contents:

  1. Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia [closed]
  2. getUserMedia() in chrome 47 without using https
  3. Is it possible to control the camera light on a phone via a website?
  4. Accessing Multiple camera javascript getusermedia
  5. reprompt for permissions with getUserMedia() after initial denial
  6. Sending a MediaStream to host Server with WebRTC after it is captured by getUserMedia
  7. NotReadableError: Could not start source
  8. iOS 11 getUserMedia not working?
  9. How can I capture an image via the user’s webcam using getUserMedia?
  10. hi there, why the while loop don’t continue to -infinity and stop on -1
  11. What is the difference between ( for… in ) and ( for… of ) statements?
  12. How do I add a simple onClick event handler to a canvas element?
  13. How to configure CORS in a Spring Boot + Spring Security application?
  14. Sorting HTML table with JavaScript
  15. How to get JavaScript caller function line number and caller source URL
  16. Javascript – How to extract filename from a file input control
  17. Restart animation in CSS3: any better way than removing the element?
  18. How to get the browser to navigate to URL in JavaScript [duplicate]
  19. What does the ^ (caret) symbol do in JavaScript?
  20. Google Spreadsheet Script – How to Transpose / Rotate Multi-dimensional Array?
  21. Simulating a mousedown, click, mouseup sequence in Tampermonkey?
  22. Check if localStorage is available
  23. Bootstrap 4: Uncaught ReferenceError: Popper is not defined
  24. Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”
  25. how to get selected text from iframe with javascript?
  26. How can I use regex to get all the characters after a specific character, e.g. comma (“,”)
  27. How does transforming points with a transformMatrix work in fabricJS?
  28. 307 Redirect when loading analytics.js in Chrome
  29. How to fix chrome-extension inline JavaScript invocation error?
  30. does location of e.preventDefault() matter

Leave a Comment