javascript - 在移动设备上强制后置摄像头?
问题描述
尝试将Instascan二维码扫描仪连接到AR.js。一切正常,但是手机上的前置摄像头打开,切换到背面不起作用。库分别与后置摄像头一起使用并允许您切换,并且只有第一个打开。Chrome浏览器不允许您在打开页面时选择相机,因此问题是相关的,主要与他有关。
代码示例: Codepen , MediaTrackSettings
<html>
<head>
<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.2/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
// Instascan QR scanner
let scanner = new Instascan.Scanner(
{
video: document.getElementById('arjs-video')
}
);
scanner.addListener('scan', function(content) {
alert('Content: ' + content);
window.open(content, "_blank");
});
// Instascan camera switch
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 1) {
scanner.start(cameras[cameras.length - 1]);
} else {
scanner.start(cameras[0]);
}
}).catch(function (e) {
console.error(e);
});
// MediaTrackSettings
let supports = navigator.mediaDevices.getSupportedConstraints();
if (supports["facingMode"]) {
alert('Not Support!');
} else {
let constraints = {
facingMode: { exact: "environment" }
};
myTrack.applyConstraints(constraints);
解决方案
这对我有用。我在我的 Microsoft Surface 和 Android 手机上对此进行了测试。
//Detect user's cameras
Instascan.Camera.getCameras().then(function (cameras) {
//If a camera is detected
if (cameras.length > 0) {
//If the user has a rear/back camera
if (cameras[1]) {
//use that by default
scanner.start(cameras[1]);
} else {
//else use front camera
scanner.start(cameras[0]);
}
} else {
//if no cameras are detected give error
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
我没有包含 MediaTrackSettings,也没有任何问题。
推荐阅读
- php - 如果同时向数据库发出多个请求,会发生什么情况?
- css - NextJS 生产 CSS 构建
- reactjs - 带有 id 字段的 Redux useSelector
- flutter - 检查失败:vm。必须能够初始化 VM
- c++ - 如何在 constexpr 函数中有一个后备运行时实现
- javascript - 嵌套列表中使用 document.createElement 生成的子节点不显示
- android - 除非我关注编辑文本,否则 Recyclerview 不会显示
- javascript - 使用 functionName() 和仅使用 functionName 分配变量值有什么区别?
- c++ - 输入流似乎无法正常工作
- google-apps-script - 是否可以在松弛频道中删除由谷歌脚本制作的机器人发出的消息?