web-dev-qa-db-ja.com

GetUserMedia-直面モード

現在、プログラムで写真を撮るのに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.");
        });

「必須」の部分にfaceingModeを挿入しましたが、機能しませんでした。

助けてください。

javascriptgetusermedia
12
Mikhail

更新：facingModeがChrome for Android = adapter.js ポリフィルを通じて！

facingModeは Chrome）にはまだ実装されていません ですが、AndroidのFirefoxでネイティブに動作します。

標準 制約を使用する必要があります：（Chromeの場合は https fiddle を使用）：

var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop());

var log = msg => div.innerHTML += msg + "<br>";
<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

{ exact: } 構文は制約が必要であることを意味し、ユーザーが適切なカメラを持っていない場合は失敗します。省略した場合の制約はオプションです。FirefoxではAndroidは、権限プロンプトのカメラチューザーのデフォルトのみを変更することを意味します。

16
jib

ピーターのコードを使用して（ https://stackoverflow.com/a/41618462/7723861 ）背面カメラを取得するためにこのソリューションを思いつきました：

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);
});
6
Miojo_Esperto

WebアプリをAndroid= Cordovaを介して展開し、リアカメラにアクセスするために複数のソリューションを試しました。私のために機能したソリューションは次のとおりでした：

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

次を通じてデバイスIDを取得します。

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から移動することを選択した場合、それほど大きな移行はありません。

4
Peter Unsworth

使用できるかなりダンディなスニペットは次のとおりです。

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

これはうまくいけばうまくいくはずです。

1
Théodore Tremblot

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);
    }
};
1
Yifan Sun

これは背面カメラで機能します：

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

})
0
Nischal Jakhar