1.项目背景公司开发一个网站。在修改用户头像的时候，领导提到增加了一个通过相机拍照来修改头像的功能。因为我们的网站是基于Html5开发的，所以我们直接用H5来拍照。一开始我觉得这个功能很简单，但是当我动手做的时候，我发现并没有那么简单。这是在AngularJs中成功调用相机拍照上传截图的例子：2.如何调用相机$scope.photoErr=false;$scope.photoBtnDiable=true;varmediaStream=null,track=null;navigator.getMedia=(navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);if(navigator.getMedia){navigator.getMedia({video:true},//successCallbackfunction(stream){vars=window.URL.createObjectURL(stream);varvideo=document.getElementById('video');video.src=window.URL.createObjectURL(stream);mediaStream=stream;track=stream.getTracks()[0];$scope.photoBtnDiable=false;$scope.$apply();},//errorCallbackfunction(err){$scope.errorPhoto();console.log("Thefollowingerroroccured:"+err);});}else{$scope.errorPhoto();}代码分析：navigator是一个浏览器对象，里面包含了浏览器的信息，这个对象就是用来打开这里的摄像头的。$scope是AndularJs语法。第一步是声明navigator.getMedia调用浏览器不同的相机开启函数。目前只有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方法，分别对应通用浏览器、谷歌浏览器、火狐浏览器、IE浏览器。Browse编译器会自动判断调用哪个函数。第二步调用打开浏览器，包含三个参数，分别是要使用的多媒体类型、获取成功返回的流数据处理函数、运行失败返回的错误信息处理函数。其中，使用时不仅可以设置视频，还可以设置麦克风。设置方法为：{video:true,audio:true}调用成功后会开启摄像头，返回视频流数据。我们可以将流数据设置到界面上的video标签中。实时显示图像。mediaStream用于记录获取的流数据，track用于跟踪Chrome浏览器中的摄像头状态。这两个变量可用于关闭相机。3.拍照$scope.snap=function(){varcanvas=document.createElement('canvas');canvas.width="400";canvas.height="304";varctx=canvas.getContext('2d');ctx.drawImage(video,0,0,400,304);$scope.closeCamera();$uibModalInstance.close(canvas.toDataURL("image/png"));};拍照时需要用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸，通过drawImage函数将视频当前图片保存到canvas标签中，最后将图片数据转为base64数据并返回并关闭相机，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的对象，用来控制弹出层的显示。4.如何关闭摄像头!=null){if(track.stop){track.stop();}}}前面提到关闭摄像头的方式是通过mediaStream和track变量，但是track只能在Chrome浏览器，这也是Chrome45及以上版本关闭摄像头的方式。5、集成到AndularJs中其实上面说的都是在AndularJs中实现的。当然，这只是为了实现拍照并返回照片数据。如果我们想在其他地方使用它，我们需要将这部分分离出来。这里我们使用了AngularJs中的服务机制，将这部分做成一个服务注入到项目中，然后其他地方就可以调用了。服务注册：app().registerService("h5TakePhotoService",function($q,$uibModal){this.photo=function(){vardeferred=$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(函数(e){deferred.resolve(e);});});returndeferred.promise;}});调用方法：$scope.takePhoto=function(){h5TakePhotoService.photo().then(function(res){if(res!=null&&res!=""){$scope.myImage=res;}});}h5TakePhotoService是注入controller的cameraservice对象，***处理返回的图像数据，设置界面显示的数据。6、兼容性问题主要存在于Chrome浏览器中。在本地测试时，Chrome浏览器可以正常使用，部署到服务器后无法正常使用。报错信息为[objectNavigatorUserMediaError]，这是因为Chrome浏览器使用了摄像头。只支持安全源访问，所以只能通过https访问才能正常使用。***需要说明一下，测试只能通过http://url访问，不能通过file://url访问，也就是我们需要部署代码才能访问，可以在VisualStudio中完成、javaweb和php。
