HTML5APP开发怎样调用手机设备?深圳APP开发公司认为经常调用手机摄像头的无非两种情况，一是微信的视频聊天，二是美图秀秀等让照片更好看的APP。当我们注册一个实名APP时，经常需要设置头像。头像一般来源于两个地方，一个是相册，一个就是调用手机摄像头自拍一个。在生活中我们经常会碰到这类APP，APP开发公司博纳网络本章就来学习如何利用HTML5调用手机摄像头。
HTML5调用手机摄像头
本例将使用HTML5的WebRTC技术，借助video标签实现网页视频，同时利用Canvas实现照片拍摄。本节示例不能直接用浏览器打开文件，需要将文件部署在Web服务器上，如Apache、Nginx、IIS等。提示WebRTC是一项在浏览器内部实时视频和音频通信的技术，标准协议为WHATWG。目的是通过浏览器提供简单的JavaScript就可以达到实时通信能力，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台，如Windows、Linux、Mac、Android等。
HTML5调用手机摄像头
本例将使用HTML5的WebRTC技术，借助video标签实现网页视频，同时利用Canvas实现照片拍摄。本节示例不能直接用浏览器打开文件，需要将文件部署在Web服务器上，如Apache、Nginx、IIS等。提示WebRTC是一项在浏览器内部实时视频和音频通信的技术，标准协议为WHATWG。目的是通过浏览器提供简单的JavaScript就可以达到实时通信能力，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台，如Windows、Linux、Mac、Android等。
部署完毕后，用Chrome打开对应的地址，在浏览器界面会提示是否使用摄像头，并带有两个按钮，即“允许”和“拒绝”，效果如图8.1所示。
点击“允许”按钮，浏览器启动摄像头，左侧video标签内出现摄像头捕捉的画面，如图8.2所示。
点击“快照”按钮，截取左侧视频显示在右侧画布中，效果如图8.3所示。
点击“保存”按钮，画布图片将被保存为“照片.png”以供下载。APP开发者可以自己体验，本例不做图片说明。利用编辑器打开“8-1.用HTML5拍照和摄像.html”文件，代码如下：【代码8-1】
01 <! DOCTYPE HTML> 02 < html> 03 < head> 04 < style> // ...... 省略 样式 代码， 读者 可以 参考 下载 资 源源 码 </ style> 05 </ head> 06 < body> 07 < header>< h2> 用 HTML 5 拍照 和 摄像</ h2></ header>
08 < section> 09 <!-- 关闭 音频、 显示 视频 工具 条 --> 10 < video width=" 360" height=" 240" muted controls></ video> 11 <!-- 快照 画布 --> 12 < canvas width=" 240" height=" 160"></ canvas> 13 </ section> 14 < section> 15 < a id=" save" href=" javascript:;" download=" 照片"> 保 存</ a> 16 < button id=" photo"> 快 照</ button> 17 </ section> 18 </ body> 19 < script> 20 (function () { 21 var video = document. querySelector(' video'), // 视频 元素 22 canvas = document. querySelector(' canvas'), // 画布 元素 23 photo = document. getElementById(' photo'), // 拍照 按钮 24 save = document. getElementById(' save'); // 保存 按钮 25 // 获取 浏览器 摄像 头 视频 流 26 navigator. getUserMedia = navigator. getUserMedia || navigator.
navigator. webkitGetUserMedia || 27 navigator. mozGetUserMedia; 28 if (navigator. getUserMedia) { 29 navigator. getUserMedia({ video: true }, function (stream) { // 摄像 头 连接 成功 回 调 30 if ('mozSrcObject' in video) { // 是否 为 火狐 浏览器 31 video. mozSrcObject = stream; 32 } else if (window. webkitURL) { // 是否 为 Webkit 核心 浏览器 33 // 获取 流的 对象 URL 值 赋予 video 元素 src 34 video. src = window. webkitURL. createObjectURL( stream); 35 } else { // 其他 标准 浏览器 36 video. src = stream; 37 } 38 video. play(); // 播放 视频 39 }, function (error) { // 摄像 头 连接 失败 回 调 40 console. log( error); // 控制台 显示 错误 回 调 信息
41 }); 42 }; 43 photo. addEventListener(' click', function (e) {// 拍照 按钮 点击 事件 监听 44 e. preventDefault(); // 阻止 按钮 默认 事件 45 canvas. getContext(' 2d'). drawImage( video, 0, 0, 240, 160); // 在 画布 中 绘制 视频 照片 46 save. setAttribute(' href', canvas. toDataURL(' image/ png')); // href 属性 值 为 图片 base64 值 47 }, false); 48 })(); 49 </ script> 50 </ html>
代码第10行添加用于视频显示的video标签，带有一个比较陌生的属性muted，表示关闭视频的声音。代码第12行添加用于快照的canvas元素，当点击“快照”按钮时，脚本调用canvas方法截取视频元素当前的图片，并绘制于画布上。代码第26、27行获取摄像头的方法，兼容火狐浏览器和Webkit内核浏览器，语法如下：
constraints：支持video、audio属性，在成功回调函数内返回对应数据流。successCallback：成功接收后回调返回媒体数据。errorCallback：连接失败后回调返回错误对象。代码第30～38行，视频连接成功后执行回调。本例在Chrome浏览器Webkit核心下运行，使用关键方法是window.webkitURL.createObjectURL，语法如下：
navigator. getMedia( constraints, successCallback, errorCallback);objectURL=window.URL.createObjectURL(blob);blob：媒体文件流对象。objectURL：返回对象URL，可以被赋值于video元素的src属性。代码第38行执行video元素的play方法，播放用户摄像头拍摄的内容。至此，一个简单的WebRTC功能的Web应用就完成了。代码43～47行实现快照功能并设置保存按钮的内容。好了，APP开发公司本文关于“HTML5APP开发怎样调用手机设备?”的相关APP开发经验就分享到这里，谢谢关注，博纳网络编辑整理。
navigator. getMedia( constraints, successCallback, errorCallback);objectURL=window.URL.createObjectURL(blob);blob：媒体文件流对象。objectURL：返回对象URL，可以被赋值于video元素的src属性。代码第38行执行video元素的play方法，播放用户摄像头拍摄的内容。至此，一个简单的WebRTC功能的Web应用就完成了。代码43～47行实现快照功能并设置保存按钮的内容。好了，APP开发公司本文关于“HTML5APP开发怎样调用手机设备?”的相关APP开发经验就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3348.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
