HTML5调用手机摄像头拍照的实现思路及代码


Posted in HTML / CSS onJune 15, 2014

小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

android手机,浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:

1)获取视频流
添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源

复制代码
代码如下:

var video = document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true}, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });

2)拍照
关于拍照功能,采用HTML5的Canvas实时捕获Video标签的内容,Video元素能作为Canvas图像的输入
复制代码
代码如下:

function scamera() {
var videoElement = document.getElementByIdx_x_x('video');
var canvasObj = document.getElementByIdx_x_x('canvas1');
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement, 0, 0, 320, 240);
}

3)图片获取
要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
复制代码
代码如下:

var imgData=canvas.toDataURL(“image/png”);

imgData格式如下:”data:image/png;base64,xxxxx“
真正图像数据是base64编码逗号之后的部分
HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 #HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 #HTML / CSS
HTML5图片预览实例分享
Jun 04 #HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 #HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 #HTML / CSS
You might like
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
javascript使用call调用微信API
2014/12/15 Javascript
javascript常用函数(1)
2015/11/04 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python的中异常处理机制
2018/08/30 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
《从现在开始》教学反思
2014/04/15 职场文书
法律专业自荐信
2014/06/03 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
社区党务工作总结2015
2015/05/19 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
解决Redis启动警告问题
2022/02/24 Redis