基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码

2016-02-19 12:34 176 1 收藏

想不想get新技能酷炫一下，今天图老师小编就跟大家分享个简单的基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码教程，一起来看看吧！超容易上手~

【 tulaoshi.com - Web开发】

WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。

在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？

主要特性：对比度设置颜色设置亮度设置色调设置拍照按钮支持最新的chrome, firefox, opera等浏览器支持jQuery插件方式和javascript代码方式

使用Chrome打开在线演示后，请确认允许浏览器调用你的摄像头，如下：

Javascript代码：

代码如下：

$('#webcam').photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( 'img src="' + dataUrl + '" ');
});

以上代码将生成的图片数据传递到id=picture的这个标签中。具体说明请参考相关API。
源码下载

希望大家喜欢我们提供的这个在线演示和demo，如果你有任何问题，请给我们留言，谢谢！

来源:http://www.tulaoshi.com/n/20160219/1601191.html

上一篇： C语言：黑客学员必修课（二）
下一篇： HTML5引入的新数组TypedArray介绍

看过《基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码》的人还看了以下文章更多>>

基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码 02-19
html5时钟实现代码 02-19
html5 canvas 简单画板实现代码 02-19
HTML5上传文件显示进度的实现代码 02-19
使用HTML5拍照示例代码 02-19
html5 兼容IE6结构的实现代码 02-19
html5拖曳操作 HTML5实现网页元素的拖放操作 02-19
html5 标签 02-19
html5弹跳球示例代码 02-19
HTML5的标签的代码的简单介绍 HTML5标签的简介 02-19

html5记忆翻牌游戏实现思路及代码

标签： Web开发

翻开的2张牌如果配对就会消除，否则2张牌都会返回背面。需求分析怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面怎么生成牌组并且确定每张牌的位置和对应的图片怎么洗牌怎么记录牌组的配对信息怎么确定点击事件是第一次点击还是第二次点击作弊事件的处理：两次点击同一张牌点击已经消除的牌面点击牌面之外的区域...

基于IE10/HTML5 开发

标签： Web开发

IE 对html5的支持还得从IE9说起。在IE9时，就已经对HTML5和CSS3有着比较好的支持了，还有不得不说的硬件加速，以及全新的javascript解析引擎 Chakra（查克拉），Chakra在同行业中对javascript的解析速度排名第一。以下是在IE9时对HTMl5的支持列表如果在IE9上做过HTML5开发的，可能会感叹，效果和性能是很好但是支持的太少了。对于...

Html5实现iPhone开机界面示例代码

标签： Web开发

今天我突发其想，想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。完工后的图片：担心图片是被我PS后的同学可以直接进入下面的地址测试： http://www.cnblogs.com/yorhom/articles/3163078.html 由于lufylegend封...

HTML5标签小集

标签： Web开发

HTML标签； meta属性Content,name,scheme !DOCTYPE a属性coords,shape, abbr属性 address属性 area属性 article属性 aside属性 audio属性 b属性 base属性 bdo属性 blockquoe属性 body属性 br属性 button属性 canvas属性 caption属性 cite属性 code属性 col属性 colgroup command datalist dd...

HTML5 Canvas概述

标签： Web开发

canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些canvas的应用示例，我们将会在此教程中看到他们的实现。 canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1.8的浏览器，...

查看更多精彩>>