AngularJS中使用HTML5摄像头拍照
公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照。起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的。
这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图:
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中完成。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/57588.html
googlejavaphp相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 关于HTML5的Web Worker你了解多少?
- html5不用reload重置网页,refresh和reload「建议收藏」
- html5 visibilitychange事件「建议收藏」
- 关于html5的PostMessage的用法总结
- html5自学教程_html和html5学哪个
- Hype 4 Pro for Mac(HTML5动画制作软件)v4.1.11中文版
- 【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
- html5 canvas画布详解编程语言
- 用HTML5的FileReader生成Data Url详解编程语言
- HTML5实现拖放详解编程语言
- 基于html5 localStorage的购物车JS脚本详解编程语言
- 2016年 20+ 个最好的免费 Bootstrap HTML5 模板详解编程语言
- 体验使用HTML5开发Kinect体感游戏详解编程语言
- html5 IOS 软键盘弹出解决方案详解编程语言
- 集结 HTML5 与 MySQL,搭建无可抵挡的猛力!(html5与mysql)
- Flash 已死, Adobe 鼓励开发人员使用 HTML5
- HTML5 应用程序缓存
- AngularJS中使用HTML5摄像头拍照
- HTML5 WebSocket
- html5在android中的使用问题及技巧解读
- html5的自定义data-*属性和jquery的data()方法的使用示例
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- Nodejs+express+html5实现拖拽上传