I have a function which can let user select the camera and show the captured video on the page [like this]. My code works before Android Google Chrome version 52, but don't know why it is broken now.
First, I check which devices I can use.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
and it returns two cameras(one front, one back) as I expect.
videoinput: camera 1, facing front id = ef5f41259c805a533261c2d91c274fdbfa8a6c8d629231cb484845032f90e61a cam:19 videoinput: camera 0, facing back id = 81448a117b2569ba9af905d01384b32179b9d32fe6a3fbabddf03868f36e4750
Then I follow the sample code, and below is what exactly I use:
<video id="video" autoplay></video>
<script>
var p = navigator.mediaDevices.getUserMedia({ video: {facingMode: "environment", width: 480, height: 800} });
p.then(function(mediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
});
p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.
</script>
Whether I set facingMode: "environment" or facingMode: {exact:"environment"}, it turns out using the front camera. Should I also report to Google?
