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 border-radius属性详解
Jul 05 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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+highchats生成动态统计图
2014/05/21 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
js判断url是否有效的两种方法
2014/03/04 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
德国旅游网站:weg.de
2018/06/03 全球购物
个人简历自我鉴定
2013/10/11 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
吨的认识教学反思
2014/04/27 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
红白喜事主持词
2015/07/06 职场文书
如何写新闻稿
2015/07/18 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
CSS3实现指纹特效代码
2022/03/17 HTML / CSS