HTML5调用android手机摄像头拍照

标签: html5 android 手机 | 发表时间:2014-04-01 16:00 | 作者:mfcai
出处:http://www.iteye.com
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.getElementById_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.getElementById_x('video');
                var canvasObj = document.getElementById_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编码逗号之后的部分

代码请到我的csdn空间下载。http://download.csdn.net/detail/mfcai_blog/7130083

本文欢迎转载,转载请注明作者与出处

作者:流星

出处:http://blog.sina.com.cn/staratsky



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html5 android 手机] 推荐:

HTML5调用android手机摄像头拍照

- - 移动开发 - ITeye博客
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流. 但实际上用html5调用手机摄像头存在很多问题:. 1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能.

HTML5能否取代Android和iOS应用?

- - CSS库
大量新生移动设备的兴起,改变了互联网的未来. 在技术的发展上, HTML5会取代App应用吗. 在HTML5规范中,已经加入了相机、磁力罗盘、GPS信息的支持. 很多新兴浏览器也已经开始支持这些新特性. 能否用一个统一的HTML5来替代 android和 ios并行开发的双重成本呢. 以下译自Michael Mahemoff的一篇文章,详细分析了HTML5能否取代Android和iOS应用程序.

Android 阻挡了 Google 拥抱 HTML5 的步伐?

- 橙子 - 爱范儿 · Beats of Bits
Strobe 是一个为移动应用构建提供开源框架的初创公司. 该公司负责商业开发的高级副总裁 Matt Asay 曾是 Canonical(发行 Ubuntu 的公司)的首席运营官, 也曾担任过 Alfresco 公司的副总裁,在开源领域有着 10 多年的经验. Matt Asay 在 The Register 网站有个两周一次的专栏“开放……和封闭”(Open… and Shut),专注于软件开发中的开放和封闭之争.

被禁之后,Grooveshark凭借HTML5应用重回iOS和Android

- - HTML5研究小组
Grooveshark可能已经被iTunes App Store 和Android Market下架了,但这并没有阻止这个富有争议性的音乐流新公司推进它的移动策略. 这个公司没有和Apple和Google纠缠不休,而是通过发布一个 Web app,在HTML5的帮助下放弃使用Flash,将一切掌握在了自己手中.

HTML5能取代Android和iOS应用程序吗?

- - VooSee - 拮取生活中的彩虹
  大量新生移动设备的兴起,改变了互联网的未来. 在HTML5规范中,已经加入了相机、磁力罗盘、GPS信息的支持. 很多新兴浏览器也已经开始支持这些新特性. 能否用一个统一的HTML5来替代android和ios并行开发的双重成本呢. 以下译自Michael Mahemoff的一篇文章,详细分析了HTML5能否取代Android和iOS应用程序.

【转载】在Android上使用HTML5观看视频 | 维奇@HOME

- - HTML5研究小组
我希望让更多的人能够了解一种将取代 Flash 的东西,所以我尽量写的比较直白——即使程序员的逻辑在常人看来已经完全属于“异类”了. Adobe 公司放弃移动平台的 Flash 支持已经是板上钉钉的事了,Google Play 的 Flash 插件也会在 8 月份下架,这在一定程度上也会促进 HTML5 的发展和普及,因此我个人还是对 Adobe 的做法十分赞赏的.

HTML5真的能取代Android和iOS应用程序?

- - 盒子UI
大量新生移动设备的兴起,改变了互联网的未来. 在技术的发展上,HTML5会取代App应用吗. 在HTML5规范中,已经加入了相机、磁力罗盘、GPS信息的支持. 很多新兴浏览器也已经开始支持这些新特性. 能否用一个统一的HTML5来替代android和ios并行开发的双重成本呢. 以下译自Michael Mahemoff的一篇文章,详细分析了HTML5能否取代Android和iOS应用程序.

android 使用html5作布局文件: webview跟javascript交互

- - 移动开发 - ITeye博客
android 使用html5作布局文件 http://www.cnblogs.com/andgoo/archive/2011/10/11/2207936.html. Android中webview跟JAVASCRIPT中的交互 http://www.oschina.net/question/4873_27156.

Android和iOS在新版本中助力HTML5

- - 博客园_新闻
英文原文: Android and iOS Go HTML5 Friendly With Their Latest Releases. 两个最流行的移动操作系统,Android 和 iOS,有可能准备在它们的最新版本中为 HTML5 助一把力. Google 从 Android 的核心组件中剥离了 WebView,把它变成了一个可升级的组件,同时,苹果用 WKWebView 替代了过去的 UIWebView,后者在混合应用上有 性能、稳定性和功能方面的优势.

手机浏览器HTML5跑分完全调查

- - 月光博客
  UC、欧朋、华为无线、腾讯无线最近在手机浏览器方面掐的火热,各种热炒HTML5跑分和自有内核. 真真假假之间总是有着不少口水,但是其实很多人对HTML5的跑分完全没概念.   在这里做一下科普,目前对浏览器HTML5兼容性测试做的最好的是html5test.com.它是一个在线网站,类似于Acid3.得分越高说明对HTML5的支持越好,2012年1月2日刚刚做过一次升级,目前的满分是475分.