HTML5 Canvas 不适用于移动设备答案

【问题标题】：HTML5 Canvas not working for mobile devicesHTML5 Canvas 不适用于移动设备
【发布时间】：2013-09-29 22:30:57
【问题描述】：

我正在尝试使用 HTML5 访问本机摄像头，为我的网络应用程序捕获图像

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

【问题讨论】：

标签： javascript php html

【解决方案1】：

我一直在使用 Opera Mobile 12 来完成类似的工作for a while，最近注意到这个问题，以前可以正常工作的代码。对我来说，它在 Opera Mobile 12.10 上失败了。似乎window.URL.createObjectURL(stream) 正在返回about:streamurl，之前（从内存中）它返回了一个 blob 样式的 URL。

我只是顺便注意到它，因为我们已将所有客户转移到Chrome Beta。尽管是测试版，但我们发现它比 Opera 更稳定（并且性能更高）。唯一的问题是它从网络摄像头获取的视频尺寸与 Opera 略有不同，但我们可以处理。

这并不能直接回答您的问题，但如果可能的话，我建议您转至 Chrome Beta（以及一旦获得 GetUserMedia 支持后的 Chrome Stable），而不是与 Opera 苦苦挣扎。

【讨论】：