基于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实现的文字定时向上滚动
Aug 29 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php中define用法实例
2015/07/30 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
详解JS模块导入导出
2017/12/20 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python有序字典简单实现方法示例
2017/09/28 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python async with和async for的使用
2019/06/20 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
SQL Server面试题
2013/04/04 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
房产销售独家委托书范本
2014/10/01 职场文书
教师岗位职责范本
2015/04/02 职场文书
喋血孤城观后感
2015/06/08 职场文书
好人好事新闻稿
2015/07/17 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书