CODEWITHSUNDEEP
javascripthtml5-canvashtml5-videoqr-codegetusermedia
Scream
Scream

Reputation: 100

Scan QR-Code with webqr and getusermedia scripts

I need to scan a QR-code using HTML5 for a webapp. I try with webqr.js (demo) and it's ok, but smartphones and tablets open front camera by default. So I try to use getusermedia.js (demo), but everything stops working.

Can you help me to solve this problem?

I can't even see where the problem is through Firebug or other similar tools, because I only have a webcam on the laptop while on smartphones, where I can choose the webcam, I don't have firebug or similar.

Upvotes: 1

Views: 8292

Answers (1)

jbialobr
jbialobr

Reputation: 1538

You have to specify which camera you want to use. Here is an example how to do that. You can also use JsQRScanner which uses the back camera.

    var n = navigator;
    if (n.mediaDevices && n.mediaDevices.getUserMedia) {
        n.mediaDevices.getUserMedia({
            video : {
                facingMode : "environment"
            },
            audio : false
        }).then(success);
    } else {
        MediaStreamTrack.getSources(function(sourceInfos) {
            var videoSource = null;
            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                if (sourceInfo.kind === 'video'
                        && sourceInfo.facing === 'environment') {
                    videoSource = sourceInfo.id;
                }
            }
            sourceSelected(videoSource);
        });
        function sourceSelected(videoSource) {
            var constraints = {
                audio : false,
                video : {
                    optional : [ {
                        sourceId : videoSource
                    } ]
                }
            };
            if (n.getUserMedia) {
                n.getUserMedia(constraints, success, error);
            } else if (n.webkitGetUserMedia) {
                n.webkitGetUserMedia(constraints, success, error);
            } else if (n.mozGetUserMedia) {
                n.mozGetUserMedia(constraints, success, error);
            }
        }
    }

Upvotes: 1

Related Questions