移动后置摄像头使用HTML5 / JS

时间:2018-01-04 09:30:11

标签: javascript android html5 camera webcam

最后,我有一个工作脚本,可以让我在手机桌面上访问相机。但是在移动设备上我主要想使用后置摄像头。

我尝试使用了facesMode:environment,但它不起作用。

以下是jsfiddle的链接和我的代码:

     function startcam() {

        // Grab elements, create settings, etc.
        var video = document.getElementById('video');
        var mediaConfig =  { video: true };
        var errBack = function(e) {
            console.log('An error has occurred!', e)
        };

        // Put video listeners into place
        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            });
        }

        /* Legacy code below! */
        else if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        };

 };
 startcam();

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

这适用于Chrome for android

navigator.mediaDevices.getUserMedia({ 
  video: { 
    facingMode: { exact: "environment" }
  } 
})
.then(function(stream) {
  video.src = window.URL.createObjectURL(stream);
  video.play();
});