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

有关其他信息，请参阅this。

使用哪种相机留给设备：“用户代理是鼓励默认使用用户的主要或系统默认值相机和/或麦克风（视情况而定）以生成媒体流“。

您可能想问的问题是如何更改默认相机。但正如我在评论部分所提到的，这与使用的设备操作系统，供应商甚至模型不同，可能是一个大问题。

编辑（根据后来的一个改进已接受的答案）：

请参阅此博客，了解如何更改相机来源：

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 5

长话短说：如果要在不支持FaceingMode约束的OLD设备上选择后置摄像头-您需要在视频内部使用sourceId: { exact: device.id }约束：{}配置。

长

：

export interface SourceInfo {
  facing: string; // "environment"
  id: string; // "bcb8d32aebb99fdf1d5f2fdb4ec4ec28a381b83f5e3c96cbcb30c4ab757380da"
  kind: string; // "video"
  label: string; // ""
}

代码（打字稿）：

(navigator as any).getUserMedia =
      (navigator as any).getUserMedia ||
      (navigator as any).webkitGetUserMedia ||
      (navigator as any).mozGetUserMedia ||
      (navigator as any).msGetUserMedia;

if (navigator.getUserMedia && (window as any).MediaStreamTrack) {
      (MediaStreamTrack as any).getSources((sources: SourceInfo[]) => {

    this.videoSources = sources.filter((source: SourceInfo) => {
      return source.kind === 'video';
      // or source.facing === 'environment'
    });
    // console.log('got video sources', this.videoSources);

    try {
      const rearCameraDevice = this.videoSources.find((device: SourceInfo) => device.facing === 'environment');
      const anyCameraDevice = this.videoSources[0];
      const constraints = {
        video: {
          mandatory: {
            sourceId: rearCameraDevice.id || anyCameraDevice.id
          }
          // these both not work with old constraints...it's new syntax
          // deviceId: this.videoSources[0].id
          // deviceId: { exact: this.videoSources[0].id }
        }
      };
      navigator.getUserMedia(
        <any>constraints, 
        this.successOldStream.bind(this), 
        this.errorOldStream.bind(this)
      );
    } catch (error) {
      console.error(error);
    }

});
} else {
  console.error('your browser not supported camera/media capturing')
}

使用navigate.getUserMedia（）时选择相机

5 个答案: