AngularJS中使用HTML5手机摄像头拍照

1. 项目背景

公司开发一个网站，在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于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中完成。

以上所述是小编给大家介绍的AngularJS中使用HTML5手机摄像头拍照的相关知识，希望对大家有所帮助！

赞 (0)

相关推荐

  • 微信或手机浏览器在线显示office文件（已测试ios、android）

    最近开发微信企业号,发现微信andriod版内置浏览器在打开文件方面有问题,但是ios版没有问题,原因是ios版使用的是safari浏览器 支持文档直接打开,但是andriod版使用的是腾讯浏览器x5内核,不知道什么原因不支持,可能是集成出现的问题,这里提供解决方法,这种方法也同样适用手机浏览器或者安卓开发.通过此方法可以在微信上开发自己的第三方应用,或者解决自己的项目问题,解决方法及核心代码如下: 1.判断浏览器类型 HttpServletRequest req = ServletAction

  • unity3d调用手机或电脑摄像头

    功能很实用,代码很简单,这里就不多废话了. WebCamTexture:网络摄像头材质 WebCamTexture.Play() 播放: WebCamTexture.Pause() 暂停: WebCamTexture.Stop() 停止: //经测试此代码可以使用,当你绑定到游戏物体时尽可以了. using unityEngine; using System.Collections; public class Test : MonoBehaviour { public string device

  • iOS如何获取手机的Mac地址

    首先说明下,下面两种方法均可以获得手机的mac地址,但是有个限制,是在iOS7以下才可以获得.iOS7以后苹果对于sysctl和ioctl进行了技术处理,MAC地址返回的都是02:00:00:00:00:00. 官方文档上这样写的: "Twolow-level networking APIs that used to return a MAC address now return thefixed value 02:00:00:00:00:00. The APIs in question are

  • android开发之调用手机的摄像头使用MediaRecorder录像并播放

    我们玩玩手机的录像功能吧.做个DEMO. 看看录制过程: 复制代码 代码如下: mediarecorder = new MediaRecorder();// 创建mediarecorder对象 // 设置录制视频源为Camera(相机) mediarecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA); // 设置录制完成后视频的封装格式THREE_GPP为3gp.MPEG_4为mp4 mediarecorder.setOutputFo

  • IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机短信验证码

    IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机短信验证码

    嘿嘿..sdk是别人的,我只是下载来集成一下. smssdk下载网站:http://www.mob.com/(也有其他很多网站有类似SDK,譬如https://www.juhe.cn/等等,可以自行百度,我在这里就演示一下MOB官网的) 此网站号称smssdk免费,可是进去一看........ 每天免费20条,上限登记了才永久免费.不多说了,开始...... 官网集成文档http://wiki.mob.com/ [1~3步]我就截图官方文档了,傻瓜式操作 [4.1]:先看官网说明: [4.2]再

  • iOS开发中对于摄像头的一些基本使用方法分享

    在一些应用中,我们需要用到iOS设备的摄像头进行拍照,视频.并且从相册中选取我们需要的图片或者视频. 关于iOS摄像头和相册的应用,可以使用UIImagePickerController类来完成控制. UIImagePickerController 这个类可以为大家提供照相的功能,以及图片,视频浏览的功能. 检查硬件是否安装有摄像头或者允许操作相册 复制代码 代码如下: #pragma mark - 摄像头和相册相关的公共类 // 判断设备是否有摄像头 - (BOOL) isCameraAvai

  • iOS利用手机摄像头测心率

    原理 简单介绍一下,网上可以查到很多关于手机测心率的这种项目,大概就是: 把手指放在摄像头和闪光灯上,通过手指处脉搏跳动充血导致的细微颜色变化来确定心跳波动,确定波峰波谷,根据两个波峰之间的时间差来确定瞬时心率. 思路 首先,采集视频流,根据拿到的RGB颜色转成HSV颜色集,其实我们只用到了HSV的H. 对拿到的H进行一些处理,看跟人喜好或者具体情况,主要是用于后面的折线图和计算瞬时心率,如果有能力的话可以处理一下噪音数据,因为可能测的时候手指轻微抖动会造成一些不稳定的数据. 根据处理后的H就可

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • PHP判断手机是IOS还是Android

    本文介绍了PHP判断手机是IOS还是Android的三个小实例,要判断用户的手机是安卓的还是ios的,搜了一下相关的资料,最终获得的结果分享给大家. 实例1:主要是要用到HTTP_USER_AGENT,它表示的意思是用来检查浏览页面的访问者在用什么操作系统(包括版本号)浏览器(包括版本号)和用户个人偏好的代码. 监测代码如下: function get_device_type() { //全部变成小写字母 $agent = strtolower($_SERVER['HTTP_USER_AGENT

  • AngularJS中使用HTML5手机摄像头拍照

    AngularJS中使用HTML5手机摄像头拍照

    1. 项目背景 公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的. 这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图: 2. 如何调用摄像头 $scope.photoErr = false; $scope.photoBtnDiable = true; var mediaStream = null,track = nu

  • Android调用手机摄像头拍照和录音功能

    本文实例为大家分享了Android调用手机摄像头拍照和录音功能的具体代码,供大家参考,具体内容如下 调用摄像头拍照: public class MainActivity extends Activity {       private Button button;     private ImageView imageView;     @Override     protected void onCreate(Bundle savedInstanceState) {         super

  • Python控制自己的手机摄像头拍照并自动发送到邮箱案例讲解

    Python控制自己的手机摄像头拍照并自动发送到邮箱案例讲解

    目录 前言 思路 开始代码 工具导入 调用摄像头,保存图片 邮件端口设置 发送邮件功能 进行封装 运行代码,演示效果 前言 今天这个案例,就是控制自己的摄像头拍照,并且把拍下来的照片,通过邮件发到自己的邮箱里.想完成今天的这个案例,只要记住一个重点:你需要一个摄像头 思路 通过opencv调用摄像头拍照保存图像本地用email库构造邮件内容,保存的图像以附件形式插入邮件内容用smtplib库发送邮件到指定邮箱 开始代码 工具导入 import time import cv2 # pip inst

  • 微信JSSDK实现打开摄像头拍照再将相片保存到服务器

    在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传图片接口(uploadImage) 参考资料: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 https://www.easywechat.com/docs/3.x/material 一:引入微信js <script src="http://re

  • Android实现调用摄像头拍照与视频功能

    应用场景: 在Android开发过程中,有时需要调用手机自身设备的功能,上篇文章主要侧重摄像头拍照功能的调用.本篇文章将综合实现拍照与视频的操作. 知识点介绍: 该部分请阅读 [Android 调用摄像头功能] 使用方式: 第一步: 新建一个Android项目CameraPhotoVedio,包含两个Activity: MainActivity.CameraActivity. 第二步: activity_main.xml <RelativeLayout xmlns:android="htt

  • Android实现摄像头拍照功能

    应用场景: 在Android开发过程中,有时需要调用手机自身设备的功能,本文侧重摄像头拍照功能的调用. 知识点介绍: 使用权限:调用手机自身设备功能(摄像头拍照功能),应该确保已经在AndroidManifest.xml中正确声明了对摄像头的使用及其它相关的feature. <!--摄像头权限 --> <uses-permission android:name="android.permission.CAMERA" /> <!--存储权限 SD卡读写权限

  • vue实现调取手机摄像头和相册功能

    本文实例为大家分享了vue实现调取手机摄像头和相册的具体代码,供大家参考,具体内容如下 自己总结的手机端拍照和相册原生的方法 HTML代码 <div> //要显示的图片 <div class="imgBox name"> <img :src="imgSrc" /> </div> <van-action-sheet v-model="show1"> <ul> <li cl

  • Android实现调用摄像头拍照并存储照片

    目录 1.前期准备 2.主要方法 1.需要使用Intent调用摄像头 2.需要检查SD卡(外部存储)状态 3.获取图片及其压缩图片 3.案例展示 1.Layout 2.MainActivity 1.前期准备 需要在Manifest中添加相关权限 <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.ca

  • 使用AngularJS中的SCE来防止XSS攻击的方法

    使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

随机推荐