Cordova Instascan - 无法访问视频流

Question

我正在开发 Cordova 应用程序。我想实现一个二维码阅读器。我尝试了 Cordova 中可用的插件，但它们都有问题，有些不提供在同一屏幕上的扫描仪/视频预览。

所以我决定使用 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-permission

然后您必须在相机中请求许可：

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

function error() {
return false;
}

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

return true;
}