建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)公司依托強大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！
1. 項目背景
公司開發(fā)一個網(wǎng)站，在做用戶頭像修改的時候領(lǐng)導(dǎo)提到增加一個由攝像頭拍照實現(xiàn)修改頭像的功能。因為我們網(wǎng)站是基于Html5進(jìn)行開發(fā)，所以就直接采用H5來實現(xiàn)拍照。起初覺得這個功能很簡單，但是做的時候才發(fā)現(xiàn)并不是那么簡單的。
這是在AngularJs中成功實現(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為瀏覽器對象，包含瀏覽器的信息，這里就是用這個對象打開攝像頭。$scope為AndularJs語法。***步聲明 navigator.getMedia來調(diào)用瀏覽器不同的打開攝像頭函數(shù)，目前僅有g(shù)etUserMedia、webkitGetUserMedia、 mozGetUserMedia、msGetUserMedia四種方式分別對應(yīng)通用瀏覽器、Google瀏覽器、火狐瀏覽器和IE瀏覽器，瀏覽器會自動 判斷調(diào)用哪一個函數(shù)。第二步是調(diào)用打開瀏覽器，包含三個參數(shù)，分別為需要使用的多媒體類型、獲取成功返回的流數(shù)據(jù)處理函數(shù)以及操作失敗返回錯誤消息處理函 數(shù)。其中，使用時不僅可以設(shè)置視頻還能設(shè)置使用麥克風(fēng)，設(shè)置方式為：
- {
- video: true，
- audio: true
- }
調(diào)用成功即打開攝像頭后返回視頻流數(shù)據(jù)，我們可以將流數(shù)據(jù)設(shè)置到video標(biāo)簽在界面上實時顯示圖像。mediaStream用來記錄獲取到的流數(shù)據(jù)，track在Chrome瀏覽器中用來跟蹤攝像頭狀態(tà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"));
- };
拍照時需要使用到canvas標(biāo)簽，創(chuàng)建一個canvas標(biāo)簽，設(shè)置我們需要拍照的尺寸大小，通過drawImage函數(shù)將video當(dāng)前的圖像保 存到canvas標(biāo)簽，***將圖像數(shù)據(jù)轉(zhuǎn)換為base64數(shù)據(jù)返回并關(guān)閉攝像頭，這樣就完成了我們的拍照功能。這里的$uibModalInstance 對象是我們項目中打開彈出層的一個對象，用來控制彈出層的顯示。
4. 如何關(guān)閉攝像頭
- $scope.closeCamera = function () {
- if (mediaStream != null) {
- if (mediaStream.stop) {
- mediaStream.stop();
- }
- $scope.videosrc = "";
- }
- if (track != null) {
- if (track.stop) {
- track.stop();
- }
- }
- }
正如前面所說，關(guān)閉攝像頭的方式是通過mediaStream和track變量，只不過，track只能關(guān)閉Chrome瀏覽器中的攝像頭，這也是Chrome 45版本以上關(guān)閉攝像頭的方式。
5. 集成到AndularJs
事實上，前面所說的都是在AndularJs中實現(xiàn)的，當(dāng)然，這里只是實現(xiàn)了拍照并返回拍照數(shù)據(jù)，我們想要在其他地方也使用，就需要將這部分獨立出 來，這里我們用到了AngularJs中的service機制，將這部分單獨做成一個service并在項目中注入，然后就可以在其他地方調(diào)用了。
- 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;
- }
- });
調(diào)用方式：
- $scope.takePhoto = function () {
- h5TakePhotoService.photo().then(function (res) {
- if (res != null && res != "") {
- $scope.myImage = res;
- }
- });
- }
h5TakePhotoService為控制器中注入的拍照service對象，***處理返回的圖像數(shù)據(jù)，設(shè)置數(shù)據(jù)顯示到界面上。
6. 兼容問題
主要存在Chrome瀏覽器中，本地測試時，Chrome瀏覽器中能夠正常使用，但是部署到服務(wù)器后就不能正常使用，報錯消息 為 [object NavigatorUserMediaError]，這是因為Chrome瀏覽器在使用攝像頭時只支持安全源訪問，所以只能通過 https訪問才能正常使用。
***需要說一下，測試時只能通過http://url訪問才能使用，不能通過file://url方式訪問，即我們需要將代碼部署才能訪問，可以在Visual Studio、 java web、php中完成。
本文鏈接：http://www.codeceo.com/article/angularjs-html5-take-photo.html
網(wǎng)頁名稱：AngularJS中使用HTML5攝像頭拍照
文章鏈接：http://m.5511xx.com/article/coigecd.html
