HTML5：相机访问

发布于 2025-01-08 09:57:49 字数 1919 浏览 3 评论 0原文

我对 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>

原文

I am quite new to HTML5. I try the following HTML5 code to access camera on my mobile phone. It always display "Native web camera not supported". It seems that my mobile browser (safari and android 2.1 web browser) does not support the camera.

Could you please tell me which browser should I use to access to camera?

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风吹过旳痕迹 2025-01-15 09:57:49

Firefox 17+、Chrome 23+ 和 Opera 12+ 现在支持 getUserMedia 方法。（请参阅 caniuse.com）

CanIUse.com 支持网格截至 2012 年 2 月 24 日的屏幕截图

回复收藏 0 原文

盗琴音 2025-01-15 09:57:49

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

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

This works on Firefox mobile, Chrome mobile, iPhone and Android:

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

回复收藏 0 原文

娜些时光，永不杰束 2025-01-15 09:57:49

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

请参阅捕获音频和音频HTML5 视频

支持：
Android 3.0 浏览器 - 最早的实现之一。观看此视频，了解其实际效果。
Android 版 Chrome (0.16)
火狐移动版 10.0
iOS6 Safari 和 Chrome（部分支持）

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

See Capturing Audio & Video in HTML5

Support:
Android 3.0 browser - one of the first implementations. Check out this video to see it in action.
Chrome for Android (0.16)
Firefox Mobile 10.0
iOS6 Safari and Chrome (partial support)

回复收藏 0 原文

┊风居住的梦幻卍 2025-01-15 09:57:49

我们通过网络拼凑而成的基本方法取得了一些成功：

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

然后在 PHP 文件中，我们使用 now() 或类似的存储方法生成唯一的文件名。

We've had some success with this basic approach cobbled together from across the Web:

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

Then in the PHP file we generate unique file names using now() or something similar for storage.

回复收藏 0 原文