使用navigate.getUserMedia()时选择相机

Question

我正在使用navigate.getUserMedia()方法在我的手机上捕获视频并对其进行进一步处理.但截至目前,它正在使用前置摄像头拍摄视频.如何让它进入后置摄像头？

下面是我在我的应用程序中使用的一些示例代码:

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
  if (navigator.getUserMedia){
    navigator.getUserMedia({video: true}, successCallback, errorCallback);

提前致谢

Answer 1

在simpl.info上的这个例子演示了MediaStreamTrack.getSources如何从多个视频源中进行选择.

https://simpl.info/getusermedia/sources/

我可以确认这适用于Chrome 32.

Answer 2

您可以facingMode分别为前置或后置摄像头选择"用户"或"环境".不确定浏览器支持,但它适用于Android Chrome 58.

使用

navigator.getUserMedia({video: { facingMode: { exact: "environment" } } },
successCallback, errorCallback);

或者,允许回退到其他相机

navigator.getUserMedia({video: { facingMode: "environment" } },
successCallback, errorCallback);

代替

navigator.getUserMedia({video: true}, successCallback, errorCallback);

来自https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Answer 3

        //----------------------------------------------------------------------
        //  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));

Answer 4

您可以使用faceingMode分别为前置或后置摄像头选择“用户”或“环境”。不确定浏览器支持，但它适用于 Android Chrome 58。

使用

导航器.getU

serMedia({video: { facingMode: { exact: "environment" } } },
successCallback, errorCallback);

或者，允许回退到其他相机

navigator.getUserMedia({video: { facingMode: "environment" } },
successCallback, errorCallback);
instead of

navigator.getUserMedia({video: true}, successCallback, errorCallback);

来自https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

simpl.info 上的此示例演示了如何使用 MediaStreamTrack.getSources 从多个视频源中进行选择。

https://simpl.info/getusermedia/sources/

我可以确认这在 Chrome 32 中有效。