Html HTML5：相机访问
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9431475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5: camera access
提问by love sunset
I am quite new to HTML5. I try the following HTML5code 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.
我对HTML5. 我尝试使用以下HTML5代码访问手机上的相机。它总是显示“不支持本机网络摄像头”。看来我的移动浏览器（safari 和 android 2.1 网络浏览器）不支持相机。
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>
回答by Anthony Faull
The getUserMediamethod is now supported on Firefox 17+,Chrome 23+ and Opera 12+. (See caniuse.com)
该getUserMedia方法现在支持 Firefox 17+、Chrome 23+ 和 Opera 12+。（参见caniuse.com）
回答by Jez D
This works on Firefox mobile, Chrome mobile, iPhone and Android:
这适用于 Firefox 移动版、Chrome 移动版、iPhone 和 Android：
<input type="file" id="mypic" accept="image/*">
回答by Dave Kanter
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.
然后在 PHP 文件中，我们使用 now() 或类似的东西生成唯一的文件名以进行存储。
回答by user3475960
<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)
支持：
- Android 3.0 浏览器 - 第一个实现。观看此视频以了解其实际效果。
- 安卓版 Chrome (0.16)
- 火狐移动版 10.0
- iOS6 Safari 和 Chrome（部分支持）
回答by OrangeKing89
I've just recently started working with a tool called Bridgeit.
我最近才开始使用一种名为 Bridgeit 的工具。
This is a combination of javascript in the browser and an app on the phone. It seems to work pretty well so far.
这是浏览器中的 javascript 和手机上的应用程序的组合。到目前为止，它似乎工作得很好。
回答by Roger
I think Opera is the only mobile browser that supports this HTML5 extension.
我认为 Opera 是唯一支持此 HTML5 扩展的移动浏览器。
See note from the author to this thread;
请参阅作者对此线程的注释；
回答by Hasanavi
Opera Desktop, Opera mobile and Chrome (after changing some configuration) supports HTML5 camera / microphone access so far.
Opera 桌面版、Opera 手机版和 Chrome（更改一些配置后）目前支持 HTML5 摄像头/麦克风访问。
回答by Parth Choudhary
HTML5 added support for camera access, you can use it like this:
HTML5 增加了对相机访问的支持，你可以像这样使用它：
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">
Where useris for front camera and environmentis for back camera.
哪里user是前置摄像头，哪里是environment后置摄像头。
回答by Gunhan
You can use Chrome for Android by enabling the "Enable WebRTC" flag under chrome://flags
您可以通过启用 chrome://flags 下的“启用 WebRTC”标志来使用 Android 版 Chrome
I tested on my android phone to access camera on html5 page and it's working.
我在我的 android 手机上测试以访问 html5 页面上的相机并且它正在工作。
