jhuckaby / webcamjs

HTML5 Webcam Image Capture Library with Flash Fallback
MIT License
2.5k stars 1.11k forks source link

Feature Request: camera choice (Used Webcam.js file from CDN) High Importance #256

Open RavishChandra1987 opened 7 years ago

RavishChandra1987 commented 7 years ago

I am using webcam.js plugin to use camera in web app. But i am not getting solution for choose front or rear camera choice. please give me some solution to use camera choice.

ravishc commented 6 years ago

Thanks Scott, but will you please provide me code for developed front/rear camera using webcam.js plugin

RavishChandra1987 commented 6 years ago

Thanku Scott for quick response

hiromik commented 6 years ago

Firefox also supports it, check MediaDevices.getUserMedia() :

Not all constraints are numbers. For example, on mobile devices, the following will prefer the front camera (if one is available) over the rear one:

{ audio: true, video: { facingMode: "user" } } To require the rear camera, use:

{ audio: true, video: { facingMode: { exact: "environment" } } }

PS : Notice it's actually Navigator.mediaDevices.getUserMedia() and not Navigator.getUserMedia() which is deprecated

OdisseasSimou commented 6 years ago

After trying a few things out i found a solution to switch cameras:

var cameras = new Array(); //create empty array to later insert available devices navigator.mediaDevices.enumerateDevices() // get the available devices found in the machine .then(function(devices) { devices.forEach(function(device) { var i = 0; if(device.kind=== "videoinput"){ //filter video devices only cameras[i]= device.deviceId; // save the camera id's in the camera array i++; } }); })

Webcam.set( 'constraints', { //set the constraints and initialize camera device (0 or 1 for back and front - varies which is which depending on device) width: 1920, height: 1080, sourceId: cameras[1] } ); Webcam.attach('#my_camera');

Now if u set a button that resets the webcam and alternates between the 2 camera ids u get a the swap functionality. Hope it helps :)

paulvales commented 5 years ago

if you need everytime select rear camera then Webcam.set( 'constraints',{ facingMode:'environment' });

t-walker-wei commented 4 years ago

For lastest version 1.0.26, set constraints like this:

Webcam.set('constraints',{
                deviceId: { exact: deviceId }
             });

The deviceId get by navigator.mediaDevices.enumerateDevices(), so you can switch camera by device id to what you want.

amardeepmishra commented 2 years ago

For lastest version 1.0.26, set constraints like this:

Webcam.set('constraints',{
                deviceId: { exact: deviceId }
             });

The deviceId get by navigator.mediaDevices.enumerateDevices(), so you can switch camera by device id to what you want.

This worked for me.