Which Camera Will Open GetUserMedia API In Mobile Device? Front Or Rear?
Solution 1:
There's a solution where the user can select one of the cameras.
By evaluating sourceInfo.facing
from the following code, you can select a camera ('user' or 'environment') (which works on current chrome >= 30): https://simpl.info/getusermedia/sources/
'use strict';
var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function gotSources(sourceInfos) {
for (var i = 0; i !== sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement('option');
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind === 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
}
if (typeof MediaStreamTrack === 'undefined'){
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
MediaStreamTrack.getSources(gotSources);
}
function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
}
function errorCallback(error){
console.log('navigator.getUserMedia error: ', error);
}
function start(){
if (!!window.stream) {
videoElement.src = null;
window.stream.stop();
}
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
audioSelect.onchange = start;
videoSelect.onchange = start;
start();
Solution 2:
Unfortunately, you cannot (yet?) select this via the code.
Mozilla Firefox beta: When the user accepts to share camera, he/she also select what camera to share.
Chrome beta: I have only been able to use the face camera. Could be configurable, but I do not know how…
EDIT: In chrome it's possible to select the back facing camera programmatically. See the next answer by Probot in this thread.
Solution 3:
The answer is yes, for Android the default camera is the front( <=> user) one. So I developed thes script below to choose between the front camera and the rear Camera
//----------------------------------------------------------------------
// Here we list all media devices, in order to choose between
// the front camera and the rear camera.
// videoDevices[0] : Front Camera
// videoDevices[1] : Back Camera
// I used an array to save the devices ID
// which I get with using devices.forEach()
// Then I set the video resolution.
//----------------------------------------------------------------------
navigator.mediaDevices.enumerateDevices()
.then(devices => {
var videoDevices = [0,0];
var videoDeviceIndex = 0;
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
if (device.kind == "videoinput") {
videoDevices[videoDeviceIndex++] = device.deviceId;
}
});
var constraints = {width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 },
deviceId: { exact: videoDevices[1] }
};
return navigator.mediaDevices.getUserMedia({ video: constraints });
})
.then(stream => {
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
localMediaStream = stream;
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else if (video.srcObject !== undefined) {
video.srcObject = stream;
} else {
video.src = stream;
}})
.catch(e => console.error(e));
Post a Comment for "Which Camera Will Open GetUserMedia API In Mobile Device? Front Or Rear?"