HTML5 Canvas not working for mobile devices

Question

I am trying to access the native camera with HTML5 to capture images for my web application it was working fine in my laptop but in mobile device it is not working..

I am testing it with opera 12.0 in Android Gingerbread, the browser asks me whether to allow camera or not. But after allowing it doesn't show anything in the video tag.Here is my code,

The HTML:

 <video autoplay id="vid" style="" width="200" height="150"></video>
 <canvas id="canvas" width="640" height="480" style="display:none;""></canvas><br>
 <input type="button" value="Take Picture" onclick="snapshot()"/>

the JavaScript:

    var video = document.querySelector("video");
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {

        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
        var strDataURI = canvas.toDataURL("image/png");

        $('#canvas_image').src = strDataURI;
$.ajax({type: 'POST',url: "<?php echo base_url().'my_profile/save_image' ?>",data: {strDataURI:strDataURI },
                         success: function(resultData) {
                             location.reload();
                         }
                    });}

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

score 0 · Answer 1 · edited May 23 '17 at 11:59

I've been using Opera Mobile 12 to do a similar job for a while and recently noticed this issue with code that used to work fine. For me it fails on Opera Mobile 12.10. It seems that window.URL.createObjectURL(stream) is returning about:streamurl where previously (from memory) it returned a blob style URL.

I only noticed it in passing because we have since moved all our customers over to Chrome Beta. Despite being a beta we've found it much more stable (and more performant) than Opera. The only issue is that the dimensions of video it picks up from the webcam are slightly different to Opera, but we can work with that.

This doesn't directly answer your question, but if possible I'd suggest moving over to Chrome Beta (and Chrome Stable once it gets GetUserMedia support) rather than struggling with Opera.

HTML5 Canvas not working for mobile devices

1 Answers1