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


Posted in HTML / CSS onDecember 13, 2012

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

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

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

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

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

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

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

Javascript代码:
复制代码
代码如下:

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

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

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

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 #HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
php图像验证码生成代码
2017/06/08 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python 爬取小说并下载的示例
2020/12/07 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
校庆筹备方案
2014/03/30 职场文书
高考标语大全
2014/06/05 职场文书
交通事故调解协议书
2015/05/20 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
MySQL查询学习之基础查询操作
2021/05/08 MySQL