I'm working on a mobile web project that needs to access the camera and take a photo and then manipulate it. The problem is that we need to take the photo directly from the browser, and not open the native camera app to take it.

Ok, I use WebRTC for this task. I access to getUserMedia() and play a "video" that is the real time camera view. This task is for Android and iOS.

This works perfectly on Firefox. I assume that in Safari this will be impossible to achieve since getUserMedia() is still not supported by this browser, but Google Chrome have support but I'm unable to make it work on Chrome.

The problem on Chrome seems to be a bug that user is unable to select rear or front camera, so the image never displays, it always is a black image.

My code is very simple, I take it from /browser-camera but theorically it works on all browsers, but I can't make it work on Chrome. This is the code:

<video id="video" width="480" height="640" autoplay controls></video>
<button id="snap">Capture</button>
<canvas id="canvas" width="480" height="740"></canvas>

<script>
// Grab elements, create settings, etc.
var video = document.getElementById('video');
var i = 0;
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
    alert(window.webkitURL);
    alert(window.webkitURL.createObjectURL(stream));
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});
</script>

How can I make it work on Chrome? How can I make that Chrome ask to user what camera he needs to use (rear / front)? I've found over internet a user that tells Chrome has a bug selecting the camera, so I think this is the problem.

Note that on Chrome Desktop it works perfectly, since there is only one camera and has not to delegate on the user to choose what camera should use. But on mobile devices with two cameras is impossible to choose how.

Thank you.

I'm not using polyfills. The duplicate mark is not solving my issue. I need some help with this. I need a canonical answer with a solution to the problem. Thank you for your time! I offer a bounty.

I'm working on a mobile web project that needs to access the camera and take a photo and then manipulate it. The problem is that we need to take the photo directly from the browser, and not open the native camera app to take it.

Ok, I use WebRTC for this task. I access to getUserMedia() and play a "video" that is the real time camera view. This task is for Android and iOS.

This works perfectly on Firefox. I assume that in Safari this will be impossible to achieve since getUserMedia() is still not supported by this browser, but Google Chrome have support but I'm unable to make it work on Chrome.

The problem on Chrome seems to be a bug that user is unable to select rear or front camera, so the image never displays, it always is a black image.

My code is very simple, I take it from https://davidwalsh.name/browser-camera but theorically it works on all browsers, but I can't make it work on Chrome. This is the code:

<video id="video" width="480" height="640" autoplay controls></video>
<button id="snap">Capture</button>
<canvas id="canvas" width="480" height="740"></canvas>

<script>
// Grab elements, create settings, etc.
var video = document.getElementById('video');
var i = 0;
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
    alert(window.webkitURL);
    alert(window.webkitURL.createObjectURL(stream));
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});
</script>

How can I make it work on Chrome? How can I make that Chrome ask to user what camera he needs to use (rear / front)? I've found over internet a user that tells Chrome has a bug selecting the camera, so I think this is the problem.

Note that on Chrome Desktop it works perfectly, since there is only one camera and has not to delegate on the user to choose what camera should use. But on mobile devices with two cameras is impossible to choose how.

Thank you.

I'm not using polyfills. The duplicate mark is not solving my issue. I need some help with this. I need a canonical answer with a solution to the problem. Thank you for your time! I offer a bounty.

• javascript
• google-chrome
• firefox
• webrtc
• getusermedia

Share Follow edited Dec 3, 2016 at 22:27 Marcos Pérez Gude asked Nov 24, 2016 at 16:56 Marcos Pérez GudeMarcos Pérez Gude 22.2k44 gold badges4040 silver badges7070 bronze badges 8

• 1 video.src = stream is broken. Use video.srcObject = stream. – jib Commented Nov 24, 2016 at 19:48
• @jib that's only for chrome or for all browsers? – Marcos Pérez Gude Commented Nov 25, 2016 at 13:21
• 1 All browsers that do WebRTC have srcObject. – jib Commented Nov 25, 2016 at 15:56
• Possible duplicate of Not able to access rear camera on webrtc [chrome:54] – jib Commented Nov 26, 2016 at 0:56
• 1 On iOS, Chrome uses the same frameworks as Safari, per Apple's requirements. As such, Chrome on Android is very different from Chrome on iOS. – Alexander O'Mara Commented Dec 3, 2016 at 6:43

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 7

Are you deploying on https? Chrome does not allow getUserMedia on http pages for security reasons.

See also this sample for enumerating and selecting cameras. The facingmode constraint you're asking about is unfortunately broken right now.

To chose the camera add a constraint paramater with facingMode set to "user" or "environment". To let the user chose don't add these details.

var myConstraints = {
    audio: false, 
    video: {
        facingMode: "user"
    }
};

see https://w3c.github.io/mediacapture-main/#dom-mediadevices-getusermedia

The new API will bee Promised based:

navigator.getUserMedia(myConstraints).then(function(stream) {
    video.srcObject = stream;
    video.play();
}).catch(errBack);

To use a future proof API and make it work now you can use a polyfill like https://github./webrtc/adapter