Problems with Bowser

[Mattze96]

Hello,

I have some problems with my webapp. I want to build a web-based QR-Code-Scanner and there are issues, when i run it in Bowser. I have to use the environment camera to scan the code. Everything is working fine on mobile/desktop firefox/chrome.

I believe that there are some problems with MediaStreamTrack or the Canvas part.

What do i need to change to make it work on iOS with bowser? I hope you can help me, because this is very important.

Live-View of the code: http://79.133.50.35:3000/qrcode (Site may change during development)

I use the following code:

<div class="select">
    <label for="videoSource">Video source:
      <select id="videoSource"></select><br><br>
    </label>
</div>
<video muted="" autoplay=""></video><br>
<canvas></canvas>

And javascript:

var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');

var canvas = window.canvas = document.querySelector('canvas');

videoElement.onplay = function() {
    setInterval(snapshot, 1000);
};

function snapshot() {
    var ratio_y = videoElement.videoHeight / videoElement.videoWidth;
    //Hier wird die größe des zu decodierenden Bildes festgelegt.
    var x = 200;
    canvas.width = x;
    canvas.height = x * ratio_y;
    canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
    //qrcode.decode(canvas.toDataURL());
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

function gotSources(sourceInfos) {
    for (var i = 0; i !== sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        var option = document.createElement('option');
        option.value = sourceInfo.id;
        if (sourceInfo.kind === 'video') {
            option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
            videoSelect.appendChild(option);
        } else {
            console.log('Some other kind of source: ', sourceInfo);
        }
    }
}

if (typeof MediaStreamTrack.getSources === 'undefined') {
    console.log('This browser does not support MediaStreamTrack. Try Chrome.');
    var has_sources = false;
} else {
    MediaStreamTrack.getSources(gotSources);
    var has_sources = true;
}

//Mozilla/5.0 (iOS; like Mac OS X) AppleWebKit/536.36 (KHTML, like Gecko) not Chrome/27.0.1500.95 Mobile/10B141 Safari/537.36 Bowser/0.2.1

function successCallback(stream) {
    window.stream = stream; // make stream available to console
    videoElement.src = window.URL.createObjectURL(stream);
}

function errorCallback(error) {
    console.log('navigator.getUserMedia error: ', error);
}

function start() {
    if (window.stream) {
        videoElement.src = null;
        window.stream.stop();
    }
    var videoSource = videoSelect.value;

    if (has_sources) {
        var constraints = {
            audio: false,
            video: {
                optional: [{
                    sourceId: videoSource
                }]
            }
        };
    } else {
        var constraints = {
            "audio": false,
            "video": {
                "facingMode": "environment"
            }
        };
        document.querySelector('.select').remove();
    }

    navigator.getUserMedia(constraints, successCallback, errorCallback);
}
videoSelect.onchange = start;
start();

[stefanalund]

@adam-be @stefhak see anything strange here?

[ellman]

Has anyone managed to resolve this. I am having a similar issue?