在AngularJS用HTML5手机摄像头拍照

1.项目背景。

公司开发网站的时候，领导提到加个摄像头拍照修改用户头像。因为我们的网站是基于Html5开发的，所以直接用H5拍照。一开始我以为这个功能很简单，但是当我做的时候，我发现并没有那么简单。

这是在AngularJs中成功调用相机拍照并上传截图的示例：

2.如何称呼相机？

$ scope.photoErr=false$ scope.photoBtnDiable=truevar mediaStream=null，track=nullnavigator . getmedia=(navigator . getuser media | | navigator . webkitgetuser media | | navigator . mozzgetuser media | | navigator . msgetuser media)；if(navigator . getmedia){ navigator . getmedia({ video : true }，//successCallbackfunction(stream){ var s=window。URL.createObjectURL(流)；var video=document . getelementbyid(' video ')；video.src=窗口。URL.createObjectURL(流)；mediaStream=streamtrack=stream . gettracks()[0]；$ scope.photoBtnDiable=false$scope。$ apply()；}，//errorCallbackfunction(err){ $ scope . error photo()；console.log('出现以下错误： ' err)；});} else { $ scope . error photo()；}代码解析：

导航器是一个浏览器对象，它包含浏览器的信息。这里，这个对象用于打开相机。$scope是AndularJs语法。第一步是声明navigator.getMedia调用浏览器中打开摄像头的不同函数。目前只有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方法分别对应通用浏览器、谷歌浏览器、火狐浏览器、IE浏览器，浏览器会自动决定调用哪个函数。第二步是调用并打开浏览器，浏览器包含三个参数，分别是要使用的多媒体类型、成功返回的流数据处理函数、操作失败后返回的错误消息处理函数。其中，使用时不仅可以设置视频，还可以设置麦克风。设置方法如下：

{video: true，audio: true}如果通话成功，摄像机打开后将返回视频流数据。我们可以将流数据设置为视频选项卡，以便在界面上实时显示图像。MediaStream用于记录采集到的流数据，track用于在Chrome浏览器中跟踪摄像头状态。这两个变量都可以用来关闭相机。

3.拍照。

$ scope . snap=function(){ var canvas=document . createelement(' canvas ')；canvas.width=' 400canvas.height=' 304var CTX=canvas . getcontext(' 2d ')；ctx.drawImage(视频，0，0，400，304)；$ scope . closecamera()；$ uibmodalinstance . close(canvas . todaytaul(' image/png ')；};拍照时，我们需要使用一个canvas标签，创建一个canvas标签，设置我们需要拍摄的图片大小，通过drawImage功能将当前视频图像保存到canvas标签中，最后将图像数据转换成base64数据返回给相机，从而完成我们的拍照功能。这里的$uibModalInstance对象是一个在我们的项目中打开弹出层的对象，用于控制弹出层的显示。

4.如何关闭摄像头？

$ scope . closecamera=function(){ if(mediaStream！=null){ if(mediastream . stop){ mediastream . stop()；} $ scope.videosrc=}if(跟踪！=null){ if(track . stop){ track . stop()；}}}如前所述，关闭摄像头的方式是通过mediaStream和track变量，但track只能在Chrome浏览器中关闭摄像头，这也是Chrome 45或以上版本中关闭摄像头的方式。

5.集成到AndularJs中。

事实上，上面提到的都是在AndularJs中实现的。当然，这只是为了拍照，还照片资料。如果我们想在其他地方使用，我们需要分离这一部分。这里，我们使用AngularJs中的服务机制，将这个部分做成一个服务，注入到项目中，然后可以在其他地方调用。

服务注册：

app()。registerService(' H5 TakePhotoservice '，function ($q，$ uib modal){ this . photo=function(){ var delivered=$ q . deliver()；require([config . server/com/controllers/photo . js ')、function(){ $ uib modal . open({ template URLs : config . server/com/view/modal _ take _ photo . html '、controller : ' photo modal controller '、window class : ' modal-photo ' })result . then(function(e){ delivered . resolve(e)；});});延期归还。}});调用方法：

$ scope . take photo=function(){ H5 take photoservice . photo()。然后(函数(res) {if (res！=null res！=' '){ $ scope . myimage=RES；}});}h5TakePhotoService是一个注入控制器的照片服务对象。最后，它处理返回的图像数据，并设置要在界面上显示的数据。

6.兼容性问题。

主要存在于Chrome浏览器中，在本地测试时可以正常使用，但是部署到服务器后就不能正常使用了。错误信息为[Object Navigator user mediaerror]，这是因为Chrome浏览器在使用摄像头时只支持安全的源码访问，所以只能通过https访问正常使用。

最后需要说的是，测试只能通过http://url访问，不能通过file://url访问，即需要部署代码进行访问，可以在Visual Studio、java web、php中完成。

以上就是边肖介绍的在AngularJS中使用HTML5手机摄像头拍照的知识，希望对大家有所帮助！