基于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实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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函数代码
2010/04/22 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
初始Nodejs
2014/11/08 NodeJs
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
了解ESlint和其相关操作小结
2018/05/21 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python中title()方法的使用简介
2015/05/20 Python
python避免死锁方法实例分析
2015/06/04 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python类的实例化问题解决
2019/08/31 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
保安员岗位职责
2013/11/17 职场文书
大学四年规划书范文
2013/12/27 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
建设工地安全标语
2014/06/07 职场文书
食堂标语大全
2014/06/11 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书