getUserMedia() - 在移动设备上选择后置摄像头

Question

这是我的问题。

我正在制作一个小应用程序，它使用 JS-OCR 来拍照并检测单词。它运行良好，但我只能使用前置摄像头。我的想法是只使用后置摄像头，没有必要有切换摄像头的选项。

我正在阅读有关getUserMedia()函数的信息，但我无法解决问题。这是涉及的代码段(函数searchForRearCamera()(：

function searchForRearCamera() {
var deferred = new $.Deferred();
//         Check that the browser supports getUserMedia.
// If it doesn't show an alert, otherwise continue.
if (navigator.getUserMedia) {
// Request the camera.
navigator.getUserMedia(
// Constraints
{
video: true
},
// Success Callback
function (localMediaStream) {
},
// Error Callback
function (err) {
// Log the error to the console.
console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
);
} else {
alert('Sorry, your browser does not support getUserMedia');
}
//MediaStreamTrack.getSources seams to be supported only by Chrome
if (MediaStreamTrack && MediaStreamTrack.getSources) {
MediaStreamTrack.getSources(function (sources) {
var rearCameraIds = sources.filter(function (source) {
return (source.kind === 'video' && source.facing === 'environment');
}).map(function (source) {
return source.id;
});
if (rearCameraIds.length) {
deferred.resolve(rearCameraIds[0]);
} else {
deferred.resolve(null);
}
});
} else {
deferred.resolve(null);
}
return deferred.promise();
}

这是演示

Answer 1

navigator.getUserMedia早已不推荐使用。立即使用 navigator.mediaDevices.getUserMedia。

若要获取后置摄像头，可以使用 MediaConstraint：video：facingMode 属性。 可用值为'user'(前置摄像头(和'environment'(后置摄像头(。

navigator.mediaDevices.getUserMedia({
audio: false,
video: {
facingMode: 'environment'
}
})
.then(stream => vid.srcObject = stream)
.catch(console.error);

<video muted autoplay id="vid"></video>

或者作为一个小提琴，因为空来源 StackSnippet 的 iframe 可能会阻止对 gUM 的请求。