基于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的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 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中截取字符串支持utf-8
2007/01/18 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python实现按长宽比缩放图片
2018/06/07 Python
Django实现分页功能
2018/07/02 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
创建市级文明单位实施方案
2014/03/01 职场文书
最新离婚协议书范本
2014/08/19 职场文书
2014年教育工作总结
2014/11/26 职场文书
开学第一周总结
2015/07/16 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python