AngularJS中使用HTML5摄像头拍照

来源:互联网
更新时间:2018/2/16 6:47:26
责任编辑:李佳
字体:

  

1. 项目背景

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

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

 

2. 如何调用摄像头

  1. $scope.photoErr = false; 
  2. $scope.photoBtnDiable = true; 
  3. var mediaStream = null,track = null; 
  4.  
  5. navigator.getMedia = (navigator.getUserMedia || 
  6.                       navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
  7.                       navigator.msGetUserMedia); 
  8.         if (navigator.getMedia) { 
  9.             navigator.getMedia( 
  10.            { 
  11.                video: true 
  12.            }, 
  13.            // successCallback 
  14.            function (stream) { 
  15.                var s = window.URL.createObjectURL(stream); 
  16.                var video = document.getElementById('video'); 
  17.                video.src = window.URL.createObjectURL(stream); 
  18.                mediaStream = stream; 
  19.                track = stream.getTracks()[0]; 
  20.                $scope.photoBtnDiable = false;               $scope.$apply(); 
  21.            }, 
  22.            // errorCallback 
  23.            function (err) { 
  24.                $scope.errorPhoto(); 
  25.                console.log("The following error occured:" + err); 
  26.            }); 
  27.               } else { 
  28.             $scope.errorPhoto(); 
  29.         } 

代码解析:

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

  1.       video: true, 
  2.       audio: true 

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

3. 拍照

  1. $scope.snap = function () { 
  2.         var canvas = document.createElement('canvas'); 
  3.             canvas.width = "400"; 
  4.             canvas.height = "304"; 
  5.  
  6.             var ctx = canvas.getContext('2d'); 
  7.             ctx.drawImage(video, 0, 0, 400, 304); 
  8.             $scope.closeCamera(); 
  9.             $uibModalInstance.close(canvas.toDataURL("image/png")); 
  10. }; 

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

4. 如何关闭摄像头

  1. $scope.closeCamera = function () { 
  2.             if (mediaStream != null) { 
  3.                 if (mediaStream.stop) { 
  4.                     mediaStream.stop(); 
  5.                 } 
  6.                 $scope.videosrc = ""; 
  7.             } 
  8.             if (track != null) { 
  9.                 if (track.stop) { 
  10.                     track.stop(); 
  11.                 } 
  12.             } 
  13.         } 

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

5. 集成到AndularJs

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

  1. service注册: 
  2.  
  3. app().registerService("h5TakePhotoService", function ($q, $uibModal) { 
  4.  
  5.         this.photo = function () { 
  6.             var deferred = $q.defer(); 
  7.             require([config.server + "/com/controllers/photo.js"], function () { 
  8.                 $uibModal.open({ 
  9.                     templateUrl: config.server + "/com/views/modal_take_photo.html", 
  10.                     controller: "photoModalController", 
  11.                     windowClass: "modal-photo" 
  12.                 }).result.then(function (e) { 
  13.                     deferred.resolve(e); 
  14.                 }); 
  15.             }); 
  16.             return deferred.promise; 
  17.         } 
  18.  
  19.     }); 

调用方式:

  1. $scope.takePhoto = function () { 
  2.       h5TakePhotoService.photo().then(function (res) { 
  3.            if (res != null && res != "") { 
  4.                $scope.myImage = res; 
  5.            } 
  6.       }); 

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

6. 兼容问题

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

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

本文链接:http://www.codeceo.com/article/angularjs-html5-take-photo.html


【编辑推荐】

  1. HTML5游戏开发5条建议及开发工具分享
  2. jQuery VS AngularJS 你更钟爱哪个?
  3. 如何对自己尚不熟悉AngularJS的情况下对代码进行调试
  4. Web开发人员不容错过的十款最佳HTML5响应式框架
  5. 聊一聊AngularJS在实际应用中的那些事
  6. 7个华丽的基于Canvas的HTML5动画
  7. 基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案

根据您访问的内容,您可能还对以下内容感兴趣,希望对您有帮助:

angularjs做的html5可以套在原生的webview上吗

答:webview 其实就是webkit内核浏览器, 其实就是个轻量级的浏览器, 跟浏览器没什么区别, 只是没有提供浏览中的相关按钮, 比如后退, 返回等等需要自己去实现

怎么用angularjs把接口数据绑定到input框

答:常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 3. 最大长度 验证表单输...

angularjs中与或非怎么写

答:浏览$location的实例代码我们不难发现,每次的url中都会带一个#,这是因为angularjs默认使用的是标签模式,它和html5模式有什么区别? (1)标签模式 标签模式使用的是内部链接的技巧,URL后面紧跟一个#,angularjs本身不会重写标签,也不需要服务...

AngularJS中文社区angular 怎么上传文件

答:利用angular-file-upload组件就可以了。 angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令(directive),当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。 参考: //inject angular file upload directi...

angular html5mode z怎么用的

答:不是的 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

移动端html5页面,是否适合用require.js或者angula...

答:当然可以了。 主要看你用那个上手。 requireJS 是模块化 AngularJS 是mvvm框架。 它们可以一起使用都不会有什么影响。

HTML5 Canvas 该怎样省内存省时间地实现画图的撤销...

答:写了这么多AngularJS代码,可以说我对AngularJS了解比较深入了。Backbone也是一个很热门的JS框架,我通读了一下它的API文档,大概了解了他的运行机制。 Backbone很精巧,很强大。但对比AngularJS,我说说我看到的Backbone的缺点,由于接触时间短...

angularjs中怎么绑定textarea到model

答:常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 3. 最大长度 验证表单输...


www.xue163.net true http://www.xue163.net/exploit/184/1843246.html report 33365 AngularJS中使用HTML5摄像头拍照,1.项目背景公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照。起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的。这是在AngularJ...
网友评论
最新添加资讯
24小时热门资讯
娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2018 xue163.net All Rights Reserved. 学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
教育考试: 学历财经建筑 医药公考资格外语电脑作文招聘中小学留学 文档 移民 文库专栏23问答中心问答图书馆知识IT编程数码信息解决方案信息中心IT科技topzttophottopsctopnew问答新闻中心软件教室设计大全网络相关英语学习开发编程考试中心参考范文管理文库营销中心站长之家IT信息中心商学院数码大全硬件DIY企业服务网吧在线百科硬件知识手机平板汽车游戏家电精彩摄影现代家居IT女人经验健康养生猎奇创业攻略教育学习历史时尚潮流最近更新涨知识