HTML5 Canvas無法在移動設備上使用

Question

我正在嘗試使用HTML5訪問本機攝像頭以捕獲Web應用程序的圖像，該應用程序在筆記本電腦上運行良好，但在移動設備上卻無法運行。

我正在Android Gingerbread中用Opera 12.0對其進行測試，瀏覽器詢問我是否允許使用攝像頭。 但是在允許之后，視頻標簽中什么都不會顯示。這是我的代碼，

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()"/>

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

Answer 1

一段時間以來，我一直在使用Opera Mobile 12做類似的工作，最近我注意到以前可以正常工作的代碼存在此問題。 對我來說，它無法在Opera Mobile 12.10上運行。 似乎window.URL.createObjectURL(stream)返回about:streamurl ，在此之前（從內存中）它返回了Blob樣式的URL。

我只是順便注意到了這一點，因為我們此后將所有客戶轉移到了Chrome Beta 。 盡管是Beta版，但我們發現它比Opera更穩定（和性能更高）。 唯一的問題是，它從網絡攝像頭拾取的視頻尺寸與Opera稍有不同，但我們可以配合使用。

這並不能直接回答您的問題，但是如果可能的話，我建議您改用Chrome Beta（一旦獲得GetUserMedia支持，便要使用Chrome Stable），而不是苦於Opera。