HTML5：相机访问 [英] HTML5: camera access
本文介绍了HTML5：相机访问的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 HTML5 的新手。我尝试以下 HTML5 代码访问我的手机上的相机。它总是显示不支持本机网络摄像头。看来我的手机浏览器（safari和android 2.1的网络浏览器）不支持相机。
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>
推荐答案
getUserMedia 方法现在支持Firefox 17 +，Chrome 23+和Opera 12+（请参见 caniuse.com a>）
The getUserMedia method is now supported on Firefox 17+,Chrome 23+ and Opera 12+. (See caniuse.com)
这篇关于HTML5：相机访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
