使用HTML5技术控制电脑或手机上的摄像头

标签: 技术技巧 html5 摄像头 | 发表时间:2014-05-02 00:37 | 作者:歪脖骇客
出处:http://www.webhek.com

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是 getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。

HTML代码

下面的代码里我写了一部分注释,请阅读:

<!--
	理想情况下我们应该先判断你的设备上是否
	有摄像头或相机,但简单起见,我们在这里直接
	写出了HTML标记,而不是用JavaScript先判断
	然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

在写出上面这些标记前应该判断用户的客户端是否有摄像头支持,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意的是我们这里使用的长宽是640×480。

JavaScript代码

因为我们是手工写出的HTML,所以下面的js代码会比你想象的要简单了很多。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			console.log("Video capture error: ", error.code); 
		};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);

一旦判断出用户浏览器支持 getUserMedia ,下面就非常简单了,只需要将那个 video元素的 src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情!

拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器,将视频画面画到画布上。

// 触发拍照动作
document.getElementById("snap")
       .addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

当然,你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个 画布图像转换成一张图片

以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头,这不免有些复杂。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头,而且是因为HTML5的画布技术及其强大,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!

相关 [html5 技术 控制] 推荐:

使用HTML5技术控制电脑或手机上的摄像头

- - WebHek
移动设备和桌面电脑上的客户端API起初并不是同步的. 最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上. 其中一个应用接口技术就是 getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机. 下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形.

HTML5中的CSS Shader技术

- SUN - Solidot
Panggit 写道 "Adobe在Photoshop和Flashplayer等产品中运用了2D Shader技术来丰富它们的滤镜和动画,现在Adobe也将这种技术运用到了CSS中并将CSS Shaders提案提交给了W3C. 运用这项技术,可以轻松实现类似纸张折叠(视频),弯曲(视频)等3D效果,并运用在CSS动画中.

W3C批评苹果专利HTML5技术

- ashuai - Solidot
苹果是W3C成员,根据W3C的专利政策,成员提供的技术必须免专利费,以确保Web标准可供任何人使用. 然而,苹果却专利了两项HTML5技术:专利申请号No.11/432,295和专利7,743,336. 苹果申请的专利是Widget Access Request Policy的核心组成,前者是移动应用的访问控制,后者是Widget安全.

HTML5的新特性,技巧及技术

- Amo - HTML5研究小组
过去的HTML 已经难以满足现代 Web 应用的需要,事实上,这个协议已经有超过 10 年没有更新了. HTML5 的出现旨在解决 Web 中的交互,媒体,本地操作等问题,一些浏览器已经尝试支持 HTML5 的一些功能,而开发者们有望最终从那些 Web 插件中得到解脱. 作为一个使用HTML5的开发人员下面这27条html5的新特性和技巧及技术,你有必要去了解.

HTML5 progress元素的样式控制、兼容与实例

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=3034. 一、progress元素基本了解. progress元素属于HTML5家族,指进度条. IE10+以及其他靠谱浏览器都支持. 有人奇怪:“唉~怎么我看到的是个字符表情捏. ” 恩…我只能对你说:“鄙视你 ,丫的都舍不得用靠谱点的浏览器吗.

HTML5技术将推进在线游戏领域的发展

- - 酷勤网-挖经验 [expanded by feedex.net]
多数技术领域人士都认为,在在线视频和UI领域,HTML5将取代flash. 难以定夺的是,在网络游戏领域,HTML5是否会取代flash技术. 苹果、微软、谷歌和Mozilla——4家大型技术公司如今正积极在各领域推广HTML5技术,其中包括游戏领域. 更重要的是,他们的产品占据97%的浏览器市场.

Crocodoc推HTML5文档嵌入技术,Dropbox, Yammer, SAP已在使用

- - 雷锋网
从YC毕业的 Crocodoc正推出一项新的技术,旨在将企业级的HTML5的office或者PDF嵌入基于web的产品中. 该公司最初利用基于Flash的技术让你上传一份PDF,在浏览器中可以获得一个相同版本的文档,并且可以和同事一起实时协同共享,添加备注等. Crocodoc在2010年成立,目标是干掉Acrobat.

King.com产品经理谈HTML5技术发展潜力

- - GamerBoom.com 游戏邦
作者:Joe Osborne. 作为一种用于创造网页游戏的新工具,HTML5已经成为了2012年社交游戏领域的一大热词. King.com最近发布于Facebook的《Pyramid Solitaire Saga》便是一款基于HTML5技术的游戏(游戏邦注:但德国社交游戏开发商Wooga则在最近宣布放弃HTML5),该公司产品经理Levina Nilsson在最近媒体采访中解释了King.com看好HTML5技术的原因.

移动平台上的HTML5技术是否华而不实

- - InfoQ cn
时至今日,HTML5技术已经不再是停留在纸面上的标准了,越来越多的公司和开发者尝试把HTML5技术应用到前端领域,到底HTML5能够对移动开发者带来多大的改进. 社区对此褒贬不一,有人认为HTML5的优势无可比拟,机会越来越多,有人则持不同观点,认为有炒作之嫌,HTML5在实际应用中存在诸多现实问题.

关于HTML5技术常见的几个误解

- - 脚本爱好者
最近2周,公司的测试PM带领我们使用HTML5 Canvas为公司的大屏幕制作一个展示公司历史和发展的apps. 主要技术是HTML5 Canvas和Javascript. 可能大家觉得Canvas标签就几个api,完成不了什么工作. 其实如果你对Javascript掌握的比较好,是可以用Javascript加上Canvas制作出像Flash动画的效果.