基于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的新特性介绍
Oct 31 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 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
自动分页的不完整解决方案
2007/01/12 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
Python实现字典依据value排序
2016/02/24 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
高一学生评语大全
2014/04/25 职场文书
本科生自荐信
2014/06/18 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
golang中的并发和并行
2021/05/08 Golang
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸