哪個攝像頭將在移動設備中打開getUserMedia API？前面還是後面？

Question

使用getUserMedia API在桌面上訪問攝像頭時，它將打開網絡攝像頭。當然，它有助於視頻通信，但是在移動設備中使用哪個攝像頭時會被調用。前方攝像頭或後方攝像頭需要編碼選擇相機？

Answer 1

不幸的是，你不能（但？）通過代碼選擇它。

• Mozilla Firefox瀏覽器測試版：當用戶接受共享相機，他/她也 選擇要分享的相機。

• Chrome beta：我只能使用臉部相機。可能是 配置的，但我不知道怎麼...

編輯：在Chrome有可能選擇編程面對鏡頭後面。在此線程中查看Probot的下一個答案。

Answer 2

有一個解決方案，用戶可以選擇其中一個攝像頭。

Enable rear camera with HTML5

通過從下面的代碼評估sourceInfo.facing，可以選擇一個相機（ '用戶' 或 '環境'）（其在當前鉻工作> = 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(); 

Answer 3

答案是肯定的，對於Android作爲默認相機，前面（用戶） caerma已啓動。因此，我建議此腳本在前置攝像頭和後置攝像頭之間進行選擇

//---------------------------------------------------------------------- 
    // Here we list all media devices, in order to choose between 
    // the front and the back camera. 
    //  videoDevices[0] : Front Camera 
    //  videoDevices[1] : Back Camera 
    // I used an array to save the devices ID 
    // which i get using devices.forEach() 
    // Then 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));