CODEWITHSUNDEEP
androidcordova
Waleed
Waleed

Reputation: 1188

Cordova Instascan - Cannot access video stream

I am working on Cordova app. I wannt to implement a qrcode reader. I tried plugins available in Cordova but they all are buggy and some doesnot provide preview of scanner/video on same screen.

So I decided to use instascan which is a js based library to be used with webcams. I used it and implemented it in a simple cordova app and its working.

Now I see preview of my scan (camera video which is currently being scanned) and it scans perfectly.

But later I merged that code with my actual Cordova app which uses Vue cli. Now I am getting:

Error: Cannot access video stream (NotReadableError)

This error is probably (as I read) due to Chrome's https policy. But the problem is, Cordova uses webview and another cordova app which is basic cordova instance with this plugin only is working perfectly.

My implementation:

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);
        });

    });

},

Upvotes: 1

Views: 1651

Answers (1)

Pablo Diaz Tassara
Pablo Diaz Tassara

Reputation: 11

first add the permissions plugin:

cordova plugin add cordova-plugin-permission

And then you must request the permits in the camera:

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

function error() {
return false;
}

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

return true;
}

Upvotes: 1

Related Questions