Question

我对HTML5很新。我尝试使用以下HTML5代码访问手机上的相机。它始终显示“不支持本机网络摄像头”。似乎我的移动浏览器（safari和android 2.1网络浏览器）不支持相机。

您能否告诉我应该使用哪种浏览器来访问相机？

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0">
    <style>
        body {width: 100%;}
        canvas {display: none;}
    </style>
    <script>
        var video, canvas, msg;
        var load = function () {
            video  = document.getElementById('video');
            canvas = document.getElementById('canvas');
            msg    = document.getElementById('error');
            if( navigator.getUserMedia ) {
                video.onclick = function () {
                    var context = canvas.getContext("2d");
                    context.drawImage(video, 0, 0, 240, 320);
                    var image = {"demo" : {
                        "type"  : "device",
                        "image" : canvas.toDataURL("image/png")
                    }};
                };

                var success = function ( stream ) {
                    video.src = stream;
                };

                var error = function ( err ) {
                    msg.innerHTML = "Error: " + err.code;
                };

                navigator.getUserMedia('video', success, error);

            } else {
                msg.innerHTML = "Native web camera not supported :(";
            }

        };

        window.addEventListener('DOMContentLoaded', load, false);
    </script>
</head>
<body>
    <video  id="video" width="240" height="320" autoplay> </video>
    <p      id="error">Click on the video to send a snapshot to the receiving screen</p>
    <canvas id="canvas" width="240" height="320"> </canvas>
</body>
</html>

Answer 1

Firefox 17 +，Chrome 23+和Opera 12+现在支持getUserMedia方法。（见caniuse.com）

Screenshot of the CanIUse.com support grid as of 2/24/12

Answer 2

这适用于Firefox手机，Chrome手机，iPhone和Android：

<input type="file" id="mypic" accept="image/*">

Answer 3

我们在网上拼凑出这种基本方法取得了一些成功：

<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" accept="image/*" name="file">
<input type="submit">
</form>

然后在PHP文件中，我们使用now（）或类似的存储来生成唯一的文件名。

Answer 4

<input type="file" accept="image/*;capture=camera">

请参阅Capturing Audio & Video in HTML5

支持：


Android 3.0浏览器 - 首批实施之一。观看此视频，了解相关信息。

Chrome for Android（0.16）

Firefox Mobile 10.0

iOS6 Safari和Chrome（部分支持）

Answer 5

我认为Opera是唯一支持此HTML5扩展程序的移动浏览器。

请参阅作者对此主题的说明;

http://francisshanahan.com/index.php/2011/stream-a-webcam-using-javascript-nodejs-android-opera-mobile-web-sockets-and-html5/

Answer 6

我刚刚开始使用名为Bridgeit的工具。

这是浏览器中的javascript和手机上的应用程序的组合。到目前为止似乎工作得很好。

http://bridgeit.mobi/

Answer 7

Opera Desktop，Opera mobile和Chrome（更改了一些配置后）到目前为止支持HTML5摄像头/麦克风访问。

Answer 8

HTML5添加了对摄像机访问的支持，您可以像这样使用它：

<input type="file" accept="image/*" capture> <input type="file" accept="image/*" capture="user"> <input type="file" accept="image/*" capture="environment">

user用于前置摄像头，environment用于后置摄像头。

Answer 9

您可以通过启用chrome：// flags

下的“启用WebRTC”标记来使用Chrome for Android

我在我的Android手机上测试了在html5页面上访问相机并且它正在工作。

HTML5：相机访问

9 个答案: