web-dev-qa-db-ja.com

どのカメラがモバイルデバイスでgetUserMediaAPIを開きますか？フロントまたはリア？

GetUserMedia APIを使用してデスクトップのカメラにアクセスすると、Webカメラが開きます。もちろんビデオ通信に役立ちますが、モバイルデバイスで使用するとどのカメラが呼び出されますか。フロントカムまたはリアカム？を選択するためのコードが必要ですか。カメラ？

javascripthtmlgetusermedia
12
Nisham Mahsin

残念ながら、コードでこれを選択することは（まだ？）できません。

  • Mozilla Firefoxベータ版：ユーザーがカメラの共有を受け入れると、共有するカメラも選択します。

  • Chromeベータ版：フェイスカメラしか使用できませんでした。構成可能かもしれませんが、方法がわかりません…

EDIT： In chromeプログラムで背面カメラを選択することができます。このスレッドで、Probotによる次の回答を参照してください。

6
Mikael Holmgren

ユーザーがカメラの1つを選択できるソリューションがあります。

HTML5でリアカメラを有効にする

次のコードからsourceInfo.facingを評価することで、カメラ（ 'user'または 'environment'）を選択できます（現在のchrome> = 30）で動作します）： https://simpl.info/getusermedia/sources/

'use strict';

var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
  for (var i = 0; i !== sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    var option = document.createElement('option');
    option.value = sourceInfo.id;
    if (sourceInfo.kind === 'audio') {
      option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (sourceInfo.kind === 'video') {
      option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Some other kind of source: ', sourceInfo);
    }
  }
}

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources(gotSources);
}


function successCallback(stream) {
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();
}

function errorCallback(error){
  console.log('navigator.getUserMedia error: ', error);
}

function start(){
  if (!!window.stream) {
    videoElement.src = null;
    window.stream.stop();
  }
  var audioSource = audioSelect.value;
  var videoSource = videoSelect.value;
  var constraints = {
    audio: {
      optional: [{sourceId: audioSource}]
    },
    video: {
      optional: [{sourceId: videoSource}]
    }
  };
  navigator.getUserMedia(constraints, successCallback, errorCallback);
}

audioSelect.onchange = start;
videoSelect.onchange = start;

start();
16
Stefan Profanter

答えは「はい」です。デフォルトのカメラとしてAndroidの場合、フロント（ユーザー）のセルマがアップしています。したがって、このスクリプトを提案して、フロントカメラとリアカメラのどちらかを選択します。

    //----------------------------------------------------------------------
    //  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));
3
shadowoviç