如何使用后置摄像头而非前置摄像头？

Question

我有一个二维码扫描相机，但当我在手机上打开我的网站时，网站中的前置摄像头被启用了。我想使用后置摄像头。

function setwebcam()
{

 var constraints = { audio: true, video: true };




document.getElementById("result").innerHTML="- scanning -";
if(stype==1)
{
    setTimeout(captureToCanvas, 500);    
    return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");

if(n.getUserMedia)
    n.getUserMedia(constraints, success, error);
else
if(n.webkitGetUserMedia)
{
    webkit=true;
    n.webkitGetUserMedia(constraints, success, error);
}
else
if(n.mozGetUserMedia)
{
    moz=true;
    n.mozGetUserMedia(constraints, success, error);
}

- d00nn12

Answer 1

如果希望强制设备使用前置摄像头，可以在约束条件中添加facingMode。

var constraints = { 
  audio: true,
  video: {
    facingMode: 'environment'
};

或使用exact:

facingMode: { exact: 'environment' }

- celiulitas

Answer 2

你可以使用MediaStreamTrack.getSources(callback)来获取所有媒体源及其ID。通过其他属性，您可以过滤以检查它是音频还是视频，或按名称进行过滤。一旦知道要显示的媒体源的ID，请使用它将其附加到video标签上。

这是一个很好的例子：
https://simpl.info/getusermedia/sources/
https://github.com/samdutton/simpl/blob/master/getusermedia/sources/js/main.js

- edin-m

---

我试图更改我的代码，我阅读了来自此链接的所有代码，但是我所做的一切都是错误的。 - d00nn12

当我打开一个页面时，如何启动后置摄像头而不是前置摄像头？请帮帮我。 - d00nn12

你的机会只是知道标识后置摄像头的名称或部分名称，因为从获取用户媒体功能中得到的每个MediaTrack都包含名称，并通过名称进行匹配。你也可以使用分辨率约束，但这并不能保证它是后置摄像头。 - edin-m

Answer 3

如果之前的示例对您无效，请尝试另一种方法：

Webcam.set({
 width: 250,
 height: 200,
 image_format: 'jpeg',
 jpeg_quality: 90,
 // I add this object constraints
 constraints: {
   facingMode: 'environment'
 }
});

- Ale DC