AngularJS中使用HTML5手机摄像头拍照


Posted in Javascript onFebruary 22, 2016

1. 项目背景

公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照。起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的。

AngularJS中使用HTML5手机摄像头拍照

这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图:

AngularJS中使用HTML5手机摄像头拍照

AngularJS中使用HTML5手机摄像头拍照

2. 如何调用摄像头

$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getMedia) {
navigator.getMedia(
{
video: true
},
// successCallback
function (stream) {
var s = window.URL.createObjectURL(stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
track = stream.getTracks()[0];
$scope.photoBtnDiable = false; $scope.$apply();
},
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
});
} else {
$scope.errorPhoto();
}

代码解析:

navigator为浏览器对象,包含浏览器的信息,这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数,目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器,浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器,包含三个参数,分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中,使用时不仅可以设置视频还能设置使用麦克风,设置方式为:

{
video: true,
audio: true
}

调用成功即打开摄像头后返回视频流数据,我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据,track在Chrome浏览器中用来跟踪摄像头状态,这两个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {
var canvas = document.createElement('canvas');
canvas.width = "400";
canvas.height = "304";

var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 400, 304);
$scope.closeCamera();
$uibModalInstance.close(canvas.toDataURL("image/png"));
};

拍照时需要使用到canvas标签,创建一个canvas标签,设置我们需要拍照的尺寸大小,通过drawImage函数将video当前的图像保存到canvas标签,最后将图像数据转换为base64数据返回并关闭摄像头,这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象,用来控制弹出层的显示。

4. 如何关闭摄像头

$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
}
$scope.videosrc = "";
}
if (track != null) {
if (track.stop) {
track.stop();
}
}
}

正如前面所说,关闭摄像头的方式是通过mediaStream和track变量,只不过,track只能关闭Chrome浏览器中的摄像头,这也是Chrome 45版本以上关闭摄像头的方式。

5. 集成到AndularJs

事实上,前面所说的都是在AndularJs中实现的,当然,这里只是实现了拍照并返回拍照数据,我们想要在其他地方也使用,就需要将这部分独立出来,这里我们用到了AngularJs中的service机制,将这部分单独做成一个service并在项目中注入,然后就可以在其他地方调用了。

service注册:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

this.photo = function () {
var deferred = $q.defer();
require([config.server + "/com/controllers/photo.js"], function () {
$uibModal.open({
templateUrl: config.server + "/com/views/modal_take_photo.html",
controller: "photoModalController",
windowClass: "modal-photo"
}).result.then(function (e) {
deferred.resolve(e);
});
});
return deferred.promise;
}
});

调用方式:

$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}

h5TakePhotoService为控制器中注入的拍照service对象,最后处理返回的图像数据,设置数据显示到界面上。

6. 兼容问题

主要存在Chrome浏览器中,本地测试时,Chrome浏览器中能够正常使用,但是部署到服务器后就不能正常使用,报错消息为 [object NavigatorUserMediaError],这是因为Chrome浏览器在使用摄像头时只支持安全源访问,所以只能通过https访问才能正常使用。

最后需要说一下,测试时只能通过http://url访问才能使用,不能通过file://url方式访问,即我们需要将代码部署才能访问,可以在Visual Studio、 java web、php中完成。

以上所述是小编给大家介绍的AngularJS中使用HTML5手机摄像头拍照的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
JS字符串的切分用法实例
Feb 22 #Javascript
JS实现上下左右对称的九九乘法表
Feb 22 #Javascript
基于Javascript实现倒计时功能
Feb 22 #Javascript
TypeOf这些知识点你了解吗
Feb 21 #Javascript
详谈javascript异步编程
Feb 21 #Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 #Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python模块导入的方法
2019/10/24 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
自我推荐书
2013/12/04 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
安全生产投入制度
2014/01/29 职场文书
关于美容院的活动方案
2014/08/14 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
颐和园的导游词
2015/01/30 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
工作试用期自我评价
2015/03/10 职场文书
大学生求职信怎么写
2015/03/19 职场文书
房地产项目合作意向书
2015/05/08 职场文书