1. 項(xiàng)目背景
公司開(kāi)發(fā)一個(gè)網(wǎng)站，在做用戶頭像修改的時(shí)候領(lǐng)導(dǎo)提到增加一個(gè)由攝像頭拍照實(shí)現(xiàn)修改頭像的功能。因?yàn)槲覀兙W(wǎng)站是基于Html5進(jìn)行開(kāi)發(fā)，所以就直接采用H5來(lái)實(shí)現(xiàn)拍照。起初覺(jué)得這個(gè)功能很簡(jiǎn)單，但是做的時(shí)候才發(fā)現(xiàn)并不是那么簡(jiǎn)單的。
這是在AngularJs中成功實(shí)現(xiàn)調(diào)用攝像頭拍照并截圖上傳的例圖：
2. 如何調(diào)用攝像頭
$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為瀏覽器對(duì)象，包含瀏覽器的信息，這里就是用這個(gè)對(duì)象打開(kāi)攝像頭。$scope為AndularJs語(yǔ)法。第一步聲明navigator.getMedia來(lái)調(diào)用瀏覽器不同的打開(kāi)攝像頭函數(shù)，目前僅有g(shù)etUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四種方式分別對(duì)應(yīng)通用瀏覽器、Google瀏覽器、火狐瀏覽器和IE瀏覽器，瀏覽器會(huì)自動(dòng)判斷調(diào)用哪一個(gè)函數(shù)。第二步是調(diào)用打開(kāi)瀏覽器，包含三個(gè)參數(shù)，分別為需要使用的多媒體類型、獲取成功返回的流數(shù)據(jù)處理函數(shù)以及操作失敗返回錯(cuò)誤消息處理函數(shù)。其中，使用時(shí)不僅可以設(shè)置視頻還能設(shè)置使用麥克風(fēng)，設(shè)置方式為：
{
video: true，
audio: true
}調(diào)用成功即打開(kāi)攝像頭后返回視頻流數(shù)據(jù)，我們可以將流數(shù)據(jù)設(shè)置到video標(biāo)簽在界面上實(shí)時(shí)顯示圖像。mediaStream用來(lái)記錄獲取到的流數(shù)據(jù)，track在Chrome瀏覽器中用來(lái)跟蹤攝像頭狀態(tài)，這兩個(gè)變量都能用來(lái)關(guān)閉攝像頭。
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"));
};拍照時(shí)需要使用到canvas標(biāo)簽，創(chuàng)建一個(gè)canvas標(biāo)簽，設(shè)置我們需要拍照的尺寸大小，通過(guò)drawImage函數(shù)將video當(dāng)前的圖像保存到canvas標(biāo)簽，最后將圖像數(shù)據(jù)轉(zhuǎn)換為base64數(shù)據(jù)返回并關(guān)閉攝像頭，這樣就完成了我們的拍照功能。這里的$uibModalInstance對(duì)象是我們項(xiàng)目中打開(kāi)彈出層的一個(gè)對(duì)象，用來(lái)控制彈出層的顯示。
4. 如何關(guān)閉攝像頭
$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
}
$scope.videosrc = "";
}
if (track != null) {
if (track.stop) {
track.stop();
}
}
}正如前面所說(shuō)，關(guān)閉攝像頭的方式是通過(guò)mediaStream和track變量，只不過(guò)，track只能關(guān)閉Chrome瀏覽器中的攝像頭，這也是Chrome 45版本以上關(guān)閉攝像頭的方式。
5. 集成到AndularJs
事實(shí)上，前面所說(shuō)的都是在AndularJs中實(shí)現(xiàn)的，當(dāng)然，這里只是實(shí)現(xiàn)了拍照并返回拍照數(shù)據(jù)，我們想要在其他地方也使用，就需要將這部分獨(dú)立出來(lái)，這里我們用到了AngularJs中的service機(jī)制，將這部分單獨(dú)做成一個(gè)service并在項(xiàng)目中注入，然后就可以在其他地方調(diào)用了。
service注冊(cè):
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;
}
});調(diào)用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}h5TakePhotoService為控制器中注入的拍照service對(duì)象，最后處理返回的圖像數(shù)據(jù)，設(shè)置數(shù)據(jù)顯示到界面上。
6. 兼容問(wèn)題
主要存在Chrome瀏覽器中，本地測(cè)試時(shí)，Chrome瀏覽器中能夠正常使用，但是部署到服務(wù)器后就不能正常使用，報(bào)錯(cuò)消息為 [object NavigatorUserMediaError]，這是因?yàn)镃hrome瀏覽器在使用攝像頭時(shí)只支持安全源訪問(wèn)，所以只能通過(guò)https訪問(wèn)才能正常使用。
最后需要說(shuō)一下，測(cè)試時(shí)只能通過(guò)http://url訪問(wèn)才能使用，不能通過(guò)file://url方式訪問(wèn)，即我們需要將代碼部署才能訪問(wèn)，可以在Visual Studio、 java web、php中完成。
原文：http://www.codeceo.com/article/angularjs-html5-take-photo.html
作者：碼農(nóng)網(wǎng) – 楊勇