While using getUserMedia API to access camera in desktop it will open web camera.of course it is help to video communication.but which camera is invoked when it is used in mobile device.Front cam or Rear cam?.is there needed code for selecting camera?
There's a solution where the user can select one of the cameras.
Enable rear camera with HTML5
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();
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With