I am using webcam.js by and In mobile devices, the front camera is opening by default. I want to change the default to the rear camera. Is there any way to change the camera device?

I am using webcam.js by https://github.com/jhuckaby/webcamjs and In mobile devices, the front camera is opening by default. I want to change the default to the rear camera. Is there any way to change the camera device?

• javascript
• html
• google-chrome
• webcam.js

• it doesn't seem that the package has any support for selecting the rear camera. – Sgnl Commented Mar 17, 2017 at 21:29
• related but not exactly but here's a reference: webrtc.github.io/samples/src/content/devices/input-output – Sgnl Commented Mar 17, 2017 at 21:32
• 100% Working solution. See camera switch solution stackoverflow.com/a/53371645/9222769 stackoverflow.com/a/53371634/9222769 – Kaushal Sachan Commented Nov 19, 2018 at 9:31

4 Answers 4

<script src="/js/webcamjs/webcam.js"></script>

<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>

<script language="JavaScript">
    Webcam.set('constraints',{
        facingMode: "environment"
    });
    Webcam.attach( '#my_camera' );

    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>

<a href="javascript:void(take_snapshot())">Take Snapshot</a>

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

In my case to make it work, I had to declare the camera set like this:

Webcam.set({
 width: 250,
 height: 200,
 image_format: 'jpeg',
 jpeg_quality: 90,
 // I add this object constraints
 constraints: {
   facingMode: 'environment'
 }
});

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  if (isMobile) {

   Webcam.set({
        width: 250,
        height: 200,
        image_format: 'jpg',
        jpeg_quality: 90,
        dest_width: 150,
        dest_height: 150, 
        constraints: {
          facingMode: 'environment'
        } 
    });
  }