Cordova Instascan -无法访问视频流

Question

我正在开发Cordova应用程序。我想实现一个qrcode阅读器。我试过Cordova中的插件，但它们都有but，而且有些插件不能在同一屏幕上提供扫描仪/视频预览。

所以我决定使用instascan，这是一个基于js的库，用于网络摄像头。我使用了它，并在一个简单的cordova应用程序中实现了它，并且它可以正常工作。

现在我看到了我的扫描预览(当前正在扫描的相机视频)，它扫描得很完美。

但后来我将这些代码与使用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);
        });

    });

},

Answer 1

首先添加权限插件：

cordova插件添加cordova- plugin -权限

然后你必须在摄像机中申请许可：

permissions.requestPermission(permissions.CAMERA, success, error);

function error() {
return false;
}

function success( status ) {
if( !status.hasPermission ) error();

return true;
}