Which Camera will open getUserMedia API in mobile

2019-03-10 00:27发布

While using getUserMedia API to access camera in desktop it will open web camera.of course it is help to video communication.but which camera is invoked when it is used in mobile device.Front cam or Rear cam?.is there needed code for selecting camera?

3条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-03-10 01:03

There's a solution where the user can select one of the cameras.

Enable rear camera with HTML5

By evaluating sourceInfo.facing from the following code, you can select a camera ('user' or 'environment') (which works on current 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();
查看更多
家丑人穷心不美
3楼-- · 2019-03-10 01:14

The answer is yes, for Android as a default camera, the front(user) caerma is up.So i propose this script to choose between the Front and the Rear Camera

    //----------------------------------------------------------------------
    //  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));
查看更多
SAY GOODBYE
4楼-- · 2019-03-10 01:30

Unfortunately, you cannot (yet?) select this via the code.

  • Mozilla Firefox beta: When the user accepts to share camera, he/she also select what camera to share.

  • Chrome beta: I have only been able to use the face camera. Could be configurable, but I do not know how…

EDIT: In chrome it's possible to select the back facing camera programmatically. See the next answer by Probot in this thread.

查看更多
登录 后发表回答