1. 項(xiàng)目背景
為撫遠(yuǎn)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及撫遠(yuǎn)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、撫遠(yuǎn)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
網(wǎng)站項(xiàng)目基于HTML5+AngularJs開(kāi)發(fā)，正在做一個(gè)由HTML5調(diào)用攝像頭拍照，從而實(shí)現(xiàn)修改頭像的功能。起初覺(jué)得HTML5拍照很簡(jiǎn)單，但是做的時(shí)候才發(fā)現(xiàn)HTML5獲取攝像頭并不是那么容易。
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ò)訪問(wèn)才能使用，不能通過(guò)方式訪問(wèn)，即我們需要將代碼部署才能訪問(wèn)，可以在Visual Studio、 java web、php中完成。
用input type=file capture=camcorder調(diào)用攝像頭，會(huì)先讓你選擇拍照或者從相冊(cè)選取。
首先實(shí)現(xiàn)在瀏覽器中調(diào)用手機(jī)攝像頭，實(shí)現(xiàn)拍照功能并且把拍下的照片顯示在頁(yè)面并上傳到服務(wù)器上，然后再在服務(wù)器端進(jìn)行分析。
首先實(shí)現(xiàn)在瀏覽器中調(diào)用攝像頭，當(dāng)然用現(xiàn)在火的不行的html5，html5中的video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來(lái)源。實(shí)現(xiàn)拍照功能的html5代碼：
article
style scoped
video { transform: scaleX(-1); }
p { text-align: center; }
/style
h1Snapshot Kiosk/h1
section id="splash"
p id="errorMessage"Loading.../p
/section
section id="app" hidden
pvideo id="monitor" autoplay/video canvas id="photo"/canvas
pinput type=button value="????" onclick="snapshot()"
/section
script
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
/script
/article
經(jīng)本人測(cè)試在android手機(jī)的opera瀏覽器瀏覽器下可以正常實(shí)現(xiàn)手機(jī)拍照功能。android手機(jī)下的google chrome瀏覽器還不行，自帶的瀏覽器也測(cè)試沒(méi)有通過(guò)。iphone手機(jī)的safari瀏覽器也是不支持的。
想了解更多關(guān)于html5調(diào)用手機(jī)攝像頭的內(nèi)容可以點(diǎn)擊。
圖片的獲?。?/p>
下面我們要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
Html代碼
var imgData =canvas.toDataURL("image/png");
因?yàn)檎嬲龍D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分，所以我們實(shí)際服務(wù)器處理的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來(lái)獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
Html代碼
var data = imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
Html代碼
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語(yǔ)言截取22位以后的字符串。例如PHP里
php代碼:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
圖片上傳：
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)：
js代碼
$.post('upload.php',{ 'data' : data } );
在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
php代碼
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image); fclose($fp);
}
請(qǐng)注意，以上的解決方案不僅能用于Web App拍照上傳，并且你可以實(shí)現(xiàn)把Canvas的輸出轉(zhuǎn)換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫(huà)板功能，然后把用戶編輯完的圖片保存到服務(wù)器上。
HTML5技術(shù)支持WebApp在手機(jī)上拍照，顯示在頁(yè)面上并上傳到服務(wù)器。這是手機(jī)微博應(yīng)用中常見(jiàn)的功能，當(dāng)然你也可以在其它類型應(yīng)用中適當(dāng)使用此技術(shù)。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對(duì)攝像頭的可編程訪問(wèn)，用戶可以直接用 getUserMedia（請(qǐng)注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個(gè)HTML5 的 Video 標(biāo)簽，并將從攝像頭獲得的視頻作為這個(gè)標(biāo)簽的輸入來(lái)源。
video id=”video” autoplay=”"/video
script
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應(yīng)使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當(dāng)然你也可以直接在此寫(xiě)一個(gè)匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
/script
此時(shí)，video 標(biāo)簽內(nèi)將顯示動(dòng)態(tài)的攝像視頻流。下面需要進(jìn)行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，因?yàn)閂ideo元素可以作為Canvas圖像的輸入，所以這一點(diǎn)很好實(shí)現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動(dòng)態(tài)創(chuàng)建畫(huà)布對(duì)象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對(duì)象內(nèi)指定的區(qū)域捕捉繪制到畫(huà)布上指定的區(qū)域，可進(jìn)行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲(chǔ)了一長(zhǎng)串的字符數(shù)據(jù)內(nèi)容，表示的就是一個(gè)PNG圖像的base64編碼。因?yàn)檎嬲膱D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分，所以要讓實(shí)際服務(wù)器接收的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來(lái)獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語(yǔ)言截取22位以后的字符串（也就是在前臺(tái)略過(guò)上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解決方案不僅能用于Web App拍照上傳，也可以通過(guò)Canvas的編輯功能函數(shù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點(diǎn)等功能，然后把用戶編輯完的圖片上傳保存到服務(wù)器上。
在還在不斷補(bǔ)充修正的HTML5的驅(qū)動(dòng)下，Web App與Native App之間的距離將越來(lái)越小。在可預(yù)見(jiàn)的不遠(yuǎn)的未來(lái)，越來(lái)越多老的和新的開(kāi)發(fā)項(xiàng)目必將會(huì)遷移到WEB應(yīng)用上來(lái)。
相關(guān)規(guī)范：
The MediaCapture API：
Canvas：
html5中的video這個(gè)標(biāo)簽是引入視頻的，通過(guò)navigator.getUserMedia去獲取攝像頭的視頻流，所以要在事件里用關(guān)閉的代碼都不能執(zhí)行關(guān)閉攝像頭，只有關(guān)閉網(wǎng)頁(yè)，攝像頭才關(guān)閉。
html5打開(kāi)攝像頭代碼：
!DOCTYPE html
html lang="zh-cn"
head
meta content="text/html; charset=UTF-8" http-equiv="content-type"
titleSmart Home - Camera/title
link href="css/main.css" rel="stylesheet" type="text/css"
script src="js/jq.js"/script
script type="text/javascript"
/*
*/
function init(t){
accessLocalWebCam("camera_box");
}
// Normalizes window.URL
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
// Normalizes navigator.getUserMedia
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia|| navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//);
return (testChromium (parseInt(testChromium[1].split('.')[0]) 19));
}
function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none';
document.getElementById('camera_box').src = (window.URL
window.URL.createObjectURL) ?
window.URL.createObjectURL(stream) : stream;
}
function errorCallback(err) {
}
function accessLocalWebCam(id) {
try {
// Tries it with spec syntax
navigator.getUserMedia({ video: true }, successsCallback, errorCallback);
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia('video', successsCallback, errorCallback);
}
}
/script
style type="text/css"
#camera_errbox{
width:320px; height:auto; border:1px solid #333333; padding:10px;
color:#fff; text-align:left;margin:20px auto;
font-size:14px;
}
#camera_errbox b{
padding-bottom:15px;
}
/style
/head
body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false"
div class="Screen_outer"
div id="mainbox" class="Screen_inner"
div id="bt_goback"/div
div class="logobox"/divdiv id="t_iconbox"
class="icon_12"/divdiv id="t_text"
div id="el_title" class="font_h2"Camera/div
div id="el_descr" class="font_2"/div
/div
div class="t_descri_bt"/div
div class="sp_title"span
class="sp_title_text"Camera/spandiv class="sp_oc
sp_oc_1"/div/div
dl id="el_actionbox" class="menu_btbox" style="text-align:center;"
video id="camera_box" autoplay="" src=""/video
div id="camera_errbox"
b請(qǐng)點(diǎn)擊“允許”按鈕，授權(quán)網(wǎng)頁(yè)訪問(wèn)您的攝像頭！/b
div若您并未看到任何授權(quán)提示，則表示您的瀏覽器不支持Media Capture或您的機(jī)器沒(méi)有連接攝像頭設(shè)備。/div
/div
/dl
/div
/div
/body
/html
重慶分公司
重慶分公司
