基于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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 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中改变图片的尺寸大小的代码
2011/07/17 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
Javascript实现的分页函数
2007/02/07 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
大学自我鉴定范文
2013/12/26 职场文书
初三学习决心书
2014/03/11 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
员工辞职信范文大全
2015/05/12 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
2022年四月新番
2022/03/15 日漫
vue elementUI批量上传文件
2022/04/26 Vue.js
JAVA springCloud项目搭建流程
2022/05/11 Java/Android