如何从HTML5访问摄像头?

问题描述:

我想从HTML5访问摄像头进行注册并保存视频文件,以便以后播放。这可能吗?如何从HTML5访问摄像头?

+0

[Here's another SO answer](http://*.com/questions/6976079/html-5-streaming-webcam-video/6976093#6976093)与一些可能有用的资源。 – sdleihssirhc

+0

这只适用于:Chrome和Opera,而不是Firefox:( –

+0

确实如此,但它很快会在Firefox中,因为最新的Firefox Nightly发行版也支持getUserMedia。 –

显然,<device>标记不是HTML5规范的一部分,因此目前没有从浏览器访问摄像头的标准方法。你也许能够逃脱使用JavaScript API navigator.getUserMedia(...),但that isn't supported by any browsers, either

您可以在此这里读了起来:Which web browsers support the HTML5 <device> tag?

我最近在做类似的研究,发现了工作演示:http://gadgets-code.com/taking-webcam-photo-with-opera-browser-new-technology

它需要安装Opera的实验版本:http://snapshot.opera.com/labs/camera-and-pages/

快乐黑客!


UPDATE [2012年5月20日]:

http://www.webrtc.org/running-the-demos - 的WebRTC - GoogleChromeCanary - 约://标志 - enableMediaStream + PeerConnection等:)我建议 - 杰罗姆艾蒂安的博客 - http://learningthreejs.com/

UPDATE [2012年9月13日]:

WebRTC在默认情况下在Chrome 21中启用(其他城市推出几个星期前)

UPDATE [2014年7月2日]:

的WebRTC是主流/巨大的:http://youtu.be/GBAEG_RuqeE?t=50m1s(谷歌视频群聊,亚马逊五月天,Snapchat)

你可以这样做对于Chrome和Opera,但你必须指导你的用户,因为它还不是很安全。

这是一个在线例子,它仍然需要Chrome用户激活MediaStream铬://标志/:

http://neave.com/webcam/html5/