Enable rear camera with HTML5

Question

I'm working on a project with MVC ASP.Net 4 HTML5 (default browser is google-chrome v29.0.1547.57) I can interact with these tools and take photographs but only with front camera, How I could enable rear camera? the characteristic of the Tablet: Samsung Galaxy Tab 2 I hope you can help me

Answer 1

查看https://simpl.info/getusermedia/sources/,了解如何使用选择源

MediaStreamTrack.getSources(gotSources);

然后,您可以选择源并将其作为可选项传入getUserMedia

var constraints = {
  audio: {
    optional: [{sourceId: audioSource}]
  },
  video: {
    optional: [{sourceId: videoSource}]
  }
};
navigator.getUserMedia(constraints, successCallback, errorCallback);

它现在完全可用于稳定的Chrome和移动设备(截至v30)

Answer 2

可以在https://webrtc.github.io/samples/src/content/devices/input-output/找到演示.这将允许访问前后摄像头.

您会发现许多演示都依赖于已弃用的函数:

MediaStreamTrack.getSources() 

从Chrome 45和FireFox 39开始,您需要使用以下功能:

MediaDevices.enumerateDevices()

例:

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
    });
  })
  .catch(function(e) {
    console.log(e.name + ": " + e.message);
  });

可在此处找到更多文档:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Answer 3

在我的三星S8 Chrome中,我可以使用"facingMode"="environment"从"后置摄像头"拍摄视频.默认似乎是"用户"('前'摄像头)

在TypeScript中:

    const video = document.getElementById("video");
    const constraints = {
        advanced: [{
            facingMode: "environment"
        }]
    };
    navigator.mediaDevices
        .getUserMedia({
            video: constraints
        })
        .then((stream) => {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });

ref: MediaTrackConstraints/facingMode