web-dev-qa-db-ja.com

navigate.getUserMedia（）を使用しながらカメラを選択します

私はnavigate.getUserMedia（）メソッドを使用してモバイルでビデオをキャプチャし、それをさらに処理しています。しかし、現時点では、フロントカメラを使用してビデオをキャプチャしています。背面カメラにアクセスするにはどうすればよいですか？

以下は、アプリケーションで使用しているサンプルコードです。

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

前もって感謝します

javascripthtmlhtml5-videovideo-processingnavigator
16
Vinay C

詳細は this を参照してください。

使用するカメラはデバイスに任されています。「ユーザーエージェントは、デフォルトでユーザーのプライマリまたはシステムのデフォルトカメラまたはマイク（あるいはその両方）を使用してメディアストリームを生成することをお勧めします。」

質問したいのは、デフォルトのカメラをどのように変更できるかということです。しかし、コメントセクションで述べたように、これは使用するデバイスのオペレーティングシステム、ベンダー、またはモデルによって異なり、大きな問題になる可能性があります。

編集（後の回答に基づいて受け入れられた回答を改善する）：

カメラのソースを変更する方法については、このブログを参照してください。

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

0
cerkiewny

このsimpl.infoの例は、MediaStreamTrack.getSourcesを使用して複数のビデオソースから選択する方法を示しています。

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

これがChrome 32で機能することを確認できます。

20
freakTheMighty

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 から

13
user1318499
        //----------------------------------------------------------------------
        //  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));
6
shadowoviç

簡単に言うと、faceingMode制約をサポートしていない古いデバイスのリアカメラを選択する場合は、ビデオ内でsourceId: { exact: device.id }制約を使用する必要があります：{}構成。

長い：

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

コード（TypeScript）：

(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')
}
0
Kurkov Igor