7

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?

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

3 Answers3

5
<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>
1nstinct
  • 1,745
  • 1
  • 26
  • 30
4
 var constraints = {
    video: true,
    facingMode: "environment"
};
4b0
  • 21,981
  • 30
  • 95
  • 142
Shneor
  • 304
  • 3
  • 4
  • On Chrome I had to give the facingMode value as part of the video value... video: { facingMode: "environment" } – Daz Jan 26 '21 at 13:43
2

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'
 }
});
Ale DC
  • 1,646
  • 13
  • 20