HTML5:摄像头访问

我对HTML5相当HTML5 。 我尝试下面的HTML5代码来访问我的手机上的相机。 它总是显示“本地networking摄像头不支持” 。 看来我的手机浏览器(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> 

getUserMedia方法现在支持Firefox 17 +,Chrome 23 +和Opera 12+。 (请参阅caniuse.com )

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

这适用于Firefox移动版,Chrome移动版,iPhone和Android:

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

我们通过networking从这个基本方法中获得了一些成功:

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

然后在PHP文件中,我们使用now()或类似的东西来存储独特的文件名。

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

检查这个链接使用HTML5的相机访问

支持:

Android 3.0浏览器 – 最早的实现之一。 看看这个video,看看它在行动。 适用于Android的Chrome(0.16)Firefox Mobile 10.0 iOS6 Safari和Chrome(部分支持)

我认为Opera是唯一支持这个HTML5扩展的手机浏览器。

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

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

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

这是浏览器中的JavaScript和手机上的应用程序的组合。 目前看起来工作得很好。

http://bridgeit.mobi/

Opera Desktop,Opera mobile和Chrome(改变了一些configuration后)目前支持HTML5摄像头/麦克风访问。

您可以通过在chrome://标志下启用“启用WebRTC”标志来使用Android版Chrome

我testing了我的android手机访问html5页上的相机,它的工作。