基于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实现顶部社会化分享按钮示例
May 06 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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批量删除数据
2007/01/18 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
小学学雷锋活动总结
2014/04/25 职场文书
感恩的演讲稿
2014/05/06 职场文书
增员口号大全
2014/06/18 职场文书
鸦片战争观后感
2015/06/09 职场文书
生日祝酒词大全
2015/08/10 职场文书
《比的意义》教学反思
2016/02/18 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
django中websocket的具体使用
2022/01/22 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang
python数字图像处理:图像简单滤波
2022/06/28 Python