android - Cordova Instascan - 无法访问视频流
问题描述
我正在开发 Cordova 应用程序。我想实现一个二维码阅读器。我尝试了 Cordova 中可用的插件,但它们都有问题,有些不提供扫描仪/视频在同一屏幕上的预览。
所以我决定使用 instascan,它是一个基于 js 的库,可与网络摄像头一起使用。我使用它并在一个简单的科尔多瓦应用程序及其工作中实现了它。
现在我看到了我的扫描预览(当前正在扫描的相机视频)并且它扫描完美。
但后来我将该代码与使用 Vue cli 的实际 Cordova 应用程序合并。现在我得到:
错误:无法访问视频流 (NotReadableError)
由于 Chrome 的 https 政策,这个错误可能(如我所读)。但问题是,Cordova 使用 webview 和另一个 Cordova 应用程序,它是基本的 Cordova 实例,只有这个插件才能完美运行。
我的实现:
mounted: function () {
var _this = this;
this.$ons.ready(function () { // this is ready event fired by Onsen UI when cordova's native APIs are loaded
var scanner = new Instascan.Scanner({
continuous: true,
mirror: false,
video: document.getElementById('scannerPreview'),
});
scanner.addListener('scan', function (content) {
alert('scan' + content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
if (cameras.length === 1) {
scanner.start(cameras[0]);
} else {
scanner.start(cameras[1]);
}
scanner.start(cameras[0]);
} else {
alert('No cameras found.');
}
}).catch(function (e) {
alert(e);
});
});
},
解决方案
首先添加权限插件:
科尔多瓦插件添加科尔多瓦插件权限
然后您必须在相机中请求许可:
permissions.requestPermission(permissions.CAMERA, success, error);
function error() {
return false;
}
function success( status ) {
if( !status.hasPermission ) error();
return true;
}