基于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效果附图
Sep 03 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 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 fckeditor 调用的函数
2009/06/21 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP制作用户注册系统
2015/10/23 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python中pip的使用和修改下载源的方法
2019/07/08 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
中考冲刺决心书
2014/03/11 职场文书
教研处工作方案
2014/05/26 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
手机销售员岗位职责
2015/04/11 职场文书
社区义诊通知
2015/04/24 职场文书
教师节倡议书2015
2015/04/27 职场文书
法人代表资格证明书
2015/06/18 职场文书
欢送领导祝酒词
2015/08/12 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库