1

我正在尝试使用 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);
4

1 回答 1

0

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

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

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

于 2013-09-29T14:30:57.807 回答