基于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 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
CSS的class与id常用的命名规则
May 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
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue组件name的作用小结
2018/05/23 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python使用pil生成图片验证码的方法
2015/05/08 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python pip 常用命令汇总
2020/10/19 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
商务英语求职自荐信范文
2013/12/24 职场文书
销售主管岗位职责
2014/02/08 职场文书
《颐和园》教学反思
2014/02/26 职场文书
信访稳定工作汇报
2014/10/27 职场文书
年终工作总结范文2014
2014/11/27 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
多人股份制合作协议书
2016/03/19 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript