基于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中设置3D变形的transform-style属性详解
May 23 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
在CSS中使用when/else的方法
Jan 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP里的单例类写法实例
2015/06/25 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
vue 项目常用加载器及配置详解
2018/01/22 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
django实现类似触发器的功能
2019/11/15 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
试述DBMS的主要功能
2016/11/13 面试题
介绍一下linux的文件系统
2015/10/06 面试题
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
主持人大赛开场白
2015/05/29 职场文书
女儿满月酒致辞
2015/07/29 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server