1. 项目背景

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

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

2. 如何调用摄像头

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$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浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：

?
1
2
3
4
{
video: true ，
audio: true
}

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

3. 拍照

?
1
2
3
4
5
6
7
8
9
10
$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. 如何关闭摄像头

?
1
2
3
4
5
6
7
8
9
10
11
12
13
$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注册:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}

});

调用方式：

?
1
2
3
4
5
6
7
$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手机摄像头拍照的相关知识，希望对大家有所帮助！

AngularJS中使用HTML5手机摄像头拍照相关推荐

  1. AngularJS中使用HTML5摄像头拍照

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

  2. 原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切

    原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...

  3. H5调用手机摄像头拍照，如何压缩后上传

    H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...

  4. Html5调用摄像头拍照

    Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...

  5. html调起苹果手机摄像头_HTML5如何调用手机摄像头拍照实现方法介绍

    HTML5如何调用安卓手机摄像头拍照实现方法介绍.HTML5 The Media Capture API提供了对摄像头的可编程访问,可以直接用getUserMedia获得摄像头提供的视频流.其实实际上 ...

  6. java jmf 视屏监控的核心代码_Java中利用JMF编写摄像头拍照程序_java

    我把程序分为两种,有趣的和无趣的,最近做了几个有趣的项目,其中一个,应当就算是摄像头拍照程序了.用于现场拍照,生成照片,主要用到java Media Framework(JMF). 首先到SUN下载最 ...

  7. html5实现摄像头拍照并使用java进行照片保存

    html5调用摄像头拍照使用的是photobooth_min.js,这个比较强大还可以直接裁剪,API网址:http://wolframhempel.github.io/photobooth-js/# ...

  8. java 调用手机相册_微信公众号调用手机摄像头拍照和本地相册

    [实例简介] 微信公众号调用手机摄像头拍照和本地相册,上传服务器 [实例截图] [核心代码] 微信公众号调用手机摄像头拍照和本地相册(2) └── 微信公众号调用手机摄像头拍照和本地相册 └── 微信 ...

  9. HTML5获取手机摄像头拍照

    HTML5获取摄像头进行拍照,存储 徐涛 2017-1-3 <!DOCTYPE html> <html> <head><meta charset=" ...

最新文章

  1. 计图MPI分布式多卡
  2. [Nancy On .Net Core Docker] 轻量级的web框架
  3. Material组件之MaterialApp、Scaffold、AppBar学习笔记
  4. linux图形化应用程序快捷方式制作方法
  5. 如何优化UPS的工作模式为数据中心节省运营成本
  6. java nio的使用
  7. centos桥接模式怎么联网_今日回收 | 互联网+废品回收模式是怎么兴起的呢？
  8. Android Theme
  9. 北京大学c语言试题及答案,北大网络教育(计算机专业)C程序设计作业答案
  10. CVPR2020 | 跨模态行人重识别：共享与特异特征变换算法cm-SSFT
  11. 微信多开txt_微信(电脑版)多开教程
  12. 3-51单片机ESP8266学习-AT指令(学会刷固件)
  13. 【react】 react 中 前后端数据的交互方式 （原生的ajax、jq的ajax、axios、fetch ）...
  14. 【原创】C++关于创建和使用静态链接库
  15. 内核功能导致重启_错误信息：VS2010 Profiler导致Win7重启
  16. 速看，PMP备考通关宝典来袭
  17. CubeMX编写风力摆控制系统[HAL库]
  18. 盘点≠走过场，哪些功能可以进行高效库存盘点？
  19. 各有风采：影响全世界的100位帝王排行榜
  20. 完美邮箱（@88.com/@111.com/email.cn）：专用密码登录

热门文章

  1. JFreeChart画3D二维图
  2. VMware打开虚拟机没反应的解决方案
  3. 新奇二合一固态硬盘盒上市
  4. html易上手的UI库,LayUI-极易上手拿来即用的前端 UI 框架-工具-站长头条
  5. php做星花图,星之花手工折纸纸球花制作图解教程
  6. 分布式操作系统 - 5.分布式命名管理
  7. Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
  8. 苹果隐藏app_初探iOS 14主屏幕体验：小部件、App Library、隐藏应用等
  9. android之检测手机电池
  10. XWifiMouse早期写的一个Android鼠标App