23

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

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

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

提前致谢

4

5 回答 5

26

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

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

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

于 2014-02-05T06:18:30.720 回答
22

您可以使用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

于 2017-07-23T08:40:44.887 回答
7 
//----------------------------------------------------------------------
//  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));
于 2017-03-20T08:36:23.843 回答
1

有关更多信息，请参阅此内容。

使用哪个摄像头留给设备：“鼓励用户代理默认使用用户的主要或系统默认摄像头和/或麦克风（视情况而定）来生成媒体流。”

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

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

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

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

于 2013-05-29T09:59:20.530 回答
1

长话短说：如果您想在旧设备上选择不支持 faceMode 约束的后置摄像头 - 您需要sourceId: { exact: device.id }在视频中使用约束：{} config.

长：

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')
}
于 2019-12-09T10:43:00.863 回答