前端开发（20）
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的
android手机，浏览器chrome32版本下实现了浏览器调用设备摄像头进行拍照。主要分3个步骤来完成:
1）获取视频流
添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
var video = document.getElementByIdx_x_x(&video&);
&navigator.getUserMedia({video:true}, function (stream) {
&&&&&&&&&&&&&&&&&&&&&&&&video.src = window.webkitURL.createObjectURL(stream);
&&&&&&&&&&&&&&&&&&&&}, function (error) { alert(error); });
关于拍照功能，采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入
&&&&&&&&&&&&function scamera() {
&&&&&&&&&&&&&&&&var videoElement = document.getElementByIdx_x_x('video');
&&&&&&&&&&&&&&&&var canvasObj = document.getElementByIdx_x_x('canvas1');
&&&&&&&&&&&&&&&&var context1 = canvasObj.getContext('2d');
&&&&&&&&&&&&&&&&context1.fillStyle = &#ffffff&;
&&&&&&&&&&&&&&&&context1.fillRect(0, 0, 320, 240);
&&&&&&&&&&&&&&&&context1.drawImage(videoElement, 0, 0, 320, 240);
&&&&&&&&&&&&}
3）图片获取
要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像
var imgData=canvas.toDataURL(“image/png”);
imgData格式如下：”data:image/base64,xxxxx“
真正图像数据是base64编码逗号之后的部分
&代码请到我的csdn空间下载。http://download.csdn.net/detail/mfcai_blog/7130083&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：407817次
积分：5188
积分：5188
排名：第5209名
原创：105篇
转载：120篇
评论：29条
文章：24篇
阅读：79957
文章：42篇
阅读：77553
文章：44篇
阅读：121521
(1)(1)(1)(5)(2)(6)(11)(1)(1)(32)(1)(5)(1)(2)(4)(1)(5)(10)(7)(11)(4)(1)(5)(2)(1)(5)(1)(1)(7)(4)(1)(4)(1)(1)(4)(2)(1)(2)(3)(4)(1)(5)(2)(2)(3)(3)(1)(2)(6)(1)(2)(14)(5)(6)(4)(6)AngularJS中使用HTML5手机摄像头拍照
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS中使用HTML5手机摄像头拍照的相关资料,需要的朋友可以参考下
1. 项目背景
公司开发一个网站，在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于Html5进行开发，所以就直接采用H5来实现拍照。起初觉得这个功能很简单，但是做的时候才发现并不是那么简单的。
这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图：
2. 如何调用摄像头
$scope.photoErr =
$scope.photoBtnDiable =
var mediaStream = null,track =
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 =
track = stream.getTracks()[0];
$scope.photoBtnDiable = $scope.$apply();
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
$scope.errorPhoto();
代码解析：
navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：
video: true，
audio: true
调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。
$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.
调用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage =
h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。
6. 兼容问题
主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。
最后需要说一下，测试时只能通过http://url访问才能使用，不能通过file://url方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。
以上所述是小编给大家介绍的AngularJS中使用HTML5手机摄像头拍照的相关知识，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2015年7月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
项目有个需求，需要调用用户的相机拍照上传单据，请问可以实现吗？有没有案例分享？
capture=”camera”属性只有在iphone里面的浏览器才能识别出摄像头，安卓系列手机有些内置的浏览器可以，不过大多都不行。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
input file image/*
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
上传很简单注意的是安卓下掉相册功能需要原生做配合，将掉相机的功能权限打开，h5这边很简单，具体看列子
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&input type="file" accept="image/*"&
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App