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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python将字典转换为XML的方法
2020/08/01 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
实习护士自荐信
2014/06/21 职场文书
应届生求职信范文
2014/06/30 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
大学生十八大感想
2015/08/11 职场文书
古诗之感恩老师
2019/10/24 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Python测试框架pytest高阶用法全面详解
2022/06/01 Python