Javascript GetUserMedia-facingmode

我目前正在使用Android平板电脑和GetUserMedia在我的程序中拍照

显然，GetUserMedia使用的默认摄像头是前置摄像头。如何使用后置摄像头作为默认设置

以下是我的GetUserMedia代码：

        navigator.getUserMedia({
            "audio": false,
            "video": {
                mandatory: {
                    minWidth: this.params.dest_width,
                    minHeight: this.params.dest_height,
                    //facingMode: "environment",
                },
            }
        }, 
        function(stream) {
            // got access, attach stream to video
            video.src = window.URL.createObjectURL( stream ) || stream;
            Webcam.stream = stream;
            Webcam.loaded = true;
            Webcam.live = true;
            Webcam.dispatch('load');
            Webcam.dispatch('live');
            Webcam.flip();
        },
        function(err) {
            return self.dispatch('error', "Could not access webcam.");
        });

我在“强制”部分插入了facingMode，但不起作用

---

请提供帮助。

更新：

facingMode

现已通过polyfill在Chrome for Android中提供

facingMode

是，但在Android版Firefox中本机工作

但是，必须使用约束：（用于Chrome）：

var-gum=mode=>
navigator.mediaDevices.getUserMedia（{video:{facingMode:{exact:mode}}）
。然后（流=>（video.srcObject=stream））
.catch（e=>log（e））；
var stop=（）=>video.srcObject&&video.srcObject.getTracks（）.forEach（t=>t.stop（））；
var log=msg=>div.innerHTML+=msg+“
”
前面
返回


通过Cordova将我们的web应用程序部署到android，我尝试了多种解决方案来访问后置摄像头。对我有效的解决方案是：

constraints = {
    audio: false,
    video: {
        width: 400,
        height: 300,
        deviceId: deviceId ? {exact: deviceId} : undefined
    }
};

通过以下方式检索deviceId：

navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        // devices is an array of accessible audio and video inputs. deviceId is the property I used to switch cameras
    })
    .catch(function(err) {
        console.log(err.name + ": " + error.message);
});

我选择不使用Cordova插件，这样，如果我们选择离开Cordova，就不会有如此大规模的迁移。
您可以使用的一个漂亮的片段是：

var front = false;
document.getElementById('flip-button').onclick = function() { front =` !front; };
var constraints = { video: { facingMode: (front? "user" : "environment") } };

希望这对您会有用。
在较新版本的Chrome（v52之后）中，adaper.js解决方案似乎不起作用。所以我首先通过枚举设备来解决这个问题。这是我的解决办法。我不确定是否有更好的方法翻转相机并在屏幕上显示视频。但是我得先停下来换一条新的

let Video = function() {
    let cameras = [];
    let currCameraIndex = 0;
    let constraints = {
        audio: true,
        video: {
          deviceId: { exact: "" }
        }
      };
    let videoCanvas = $('video#gum');


    this.initialize = function() {
      return enumerateDevices()
        .then(startVideo);
    };

    this.flipCamera = function() {
      currCameraIndex += 1; 
      if (currCameraIndex >= cameras.length) {
        currCameraIndex = 0;
      }

      if (window.stream) {
        window.stream.getVideoTracks()[0].stop();
      }
      return startVideo();
    };

    function enumerateDevices() {
      return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
          devices.forEach(function(device) {
            console.log(device);
            if (device.kind === "videoinput") {
              cameras.push(device.deviceId);
            }
          });
          console.log(cameras);
        });
    }

    function startVideo() {
      constraints.video.deviceId.exact = cameras[currCameraIndex];
      return navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess).catch(handleError);
    }

    function handleSuccess(stream) {
      videoCanvas[0].srcObject = stream;
      window.stream = stream;
    }

    function handleError(error) {
      alert(error);
    }
};

使用Peter的代码（）我想出了这个解决方案来获得后置摄像头：

function handleSuccess(stream) {
  window.stream = stream; // make stream available to browser console
  video.srcObject = stream;
}

function handleError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

var DEVICES = [];
var final = null;
navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {

        var arrayLength = devices.length;
        for (var i = 0; i < arrayLength; i++)
        {
            var tempDevice = devices[i];
            //FOR EACH DEVICE, PUSH TO DEVICES LIST THOSE OF KIND VIDEOINPUT (cameras)
            //AND IF THE CAMERA HAS THE RIGHT FACEMODE ASSING IT TO "final"
            if (tempDevice.kind == "videoinput")
            {
                DEVICES.push(tempDevice);
                if(tempDevice.facingMode == "environment" ||tempDevice.label.indexOf("facing back")>=0 )
                    {final = tempDevice;}
            }
        }

        var totalCameras = DEVICES.length;
        //If couldnt find a suitable camera, pick the last one... you can change to what works for you
        if(final == null)
        {
            //console.log("no suitable camera, getting the last one");
            final = DEVICES[totalCameras-1];
        };

        //Set the constraints and call getUserMedia
        var constraints = {
        audio: false, 
        video: {
            deviceId: {exact: final.deviceId}
            }
        };

        navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess).catch(handleError);

    })
    .catch(function(err) {
        console.log(err.name + ": " + err.message);
});

函数handleSuccess（流）{
window.stream=stream；//使流可用于浏览器控制台
video.srcObject=流；
}
函数句柄错误（错误）{
日志（'navigator.getUserMedia错误：'，错误）；
}
var设备=[]；
var final=null；
navigator.mediaDevices.enumerateDevices（）
.然后（功能（设备）{
var arrayLength=设备长度；
对于（变量i=0；i=0）
{final=tempDevice；}
}
}
var totalCameras=设备长度；
//如果找不到合适的相机，选择最后一个…你可以换一个适合你的
if（final==null）
{
//console.log（“没有合适的摄像头，获取最后一个”）；
最终=设备[totalCameras-1]；
};
//设置约束并调用getUserMedia
变量约束={
音频：错，
视频：{
deviceId:{exact:final.deviceId}
}
};
navigator.mediaDevices.getUserMedia（约束）。
然后（handleSuccess）。接住（handleError）；
})
.catch（函数（err）{
console.log（err.name+“：”+err.message）；
});
这适用于后置摄像头：

navigator.mediaDevices.getUserMedia({
video: {facingMode: "environment",
 height:{<heightValueHere>},
 width : {<widthValueHere>} 
}
})
.then(function(stream){
window.stream = stream;
video.srcObject = stream;

})

navigator.mediaDevices.getUserMedia({
视频：{facingMode:“环境”，
高度：{}，
宽度：{}
}
})
.then（函数（流）{
window.stream=流；
video.srcObject=流；
})
在某些设备上
facingMode。exact
无法按预期工作，因此您必须枚举媒体设备并搜索标签上包含“面朝后”的
videoinput
设备

代码如下：

const devices=wait navigator.mediaDevices.enumerateDevices（）
const environmentCamera=devices.find(
device=>device.kind===“videoinput”&&device.label.includes（“面朝后”）
)
常量约束={
视频：{
宽度：{
最高：640，
},
高度：{
最高：480，
},
},
}
if（环境摄像头）{
constraints.video.deviceId=环境Camera.deviceId
}否则{
constraints.facingMode={
准确：“环境”，
}
}
const mediaStream=await navigator.mediaDevices.getUserMedia（约束）
const mediaStreamTrack=mediaStream.getVideoTracks（）[0]
// ...
我对webcam.js使用以下命令，调用LoadWebcam（）

异步函数LoadWebcam（）{
变量i
var frontdev
var backdev
const tempStream=await navigator.mediaDevices.getUserMedia（{video:true}）
const devices=wait navigator.mediaDevices.enumerateDevices（）
//检查所有视频输入并找到backdev=back Cam
设备。forEach（功能（设备）{
如果（device.kind==='videoinput'）{
如果（device.label&&device.label.length>0）{
if（device.label.toLowerCase（）.indexOf（'back'）>=0
backdev=device.deviceId
else if（device.label.toLowerCase（）.indexOf（'front'）>=0）
frontdev=device.deviceId
}
}
})
//断流
const tracks=tempStream.getTracks（）
如果（轨道）
对于（t=0；t
或者，您可以使用来让用户翻转相机。看，现在，在我的手机上，这不起作用。Chrome声称支持facingMode，但实际上它不起作用，这似乎把adapter-latest.js搞砸了。不过，我还是能够使用adapter-latest.js中的代码想出一些可行的方法，更像Peter Unsworth的答案所示。@user12861 a to adapter即将推出。现在是固定的,，
async function LoadWebcam () { 
var i
var frontdev 
var backdev
const tempStream = await navigator.mediaDevices.getUserMedia({video:true})
const devices = await navigator.mediaDevices.enumerateDevices()
//Check all the video input and find the backdev = back Cam
devices.forEach(function(device) {
    if (device.kind === 'videoinput') {
        if( device.label && device.label.length > 0 ) {
          if( device.label.toLowerCase().indexOf( 'back' ) >= 0 ) 
            backdev = device.deviceId
          else if( device.label.toLowerCase().indexOf( 'front' ) >= 0 )
            frontdev = device.deviceId
        }
    }
})
//Stop Stream
const tracks = tempStream.getTracks()
if( tracks ) 
  for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
//Load the webcam, 
Webcam.set({
    width: 320,
    height: 240,
    image_format: 'png',
    jpeg_quality: 90,
    flip_horiz: true,
    constraints: {
    video: true,
        deviceId: {exact: backdev }
    }
});
Webcam.attach( '#my_camera' )}