如何通過html5調用攝像頭拍照

1. 項目背景

十余年的廣陵網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都營銷網(wǎng)站建設的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整廣陵建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“廣陵網(wǎng)站設計”,“廣陵網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

網(wǎng)站項目基于HTML5+AngularJs開發(fā)，正在做一個由HTML5調用攝像頭拍照，從而實現(xiàn)修改頭像的功能。起初覺得HTML5拍照很簡單，但是做的時候才發(fā)現(xiàn)HTML5獲取攝像頭并不是那么容易。

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來調用瀏覽器不同的打開攝像頭函數(shù)，目前僅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四種方式分別對應通用瀏覽器、Google瀏覽器、火狐瀏覽器和IE瀏覽器，瀏覽器會自動判斷調用哪一個函數(shù)。第二步是調用打開瀏覽器，包含三個參數(shù)，分別為需要使用的多媒體類型、獲取成功返回的流數(shù)據(jù)處理函數(shù)以及操作失敗返回錯誤消息處理函數(shù)。其中，使用時不僅可以設置視頻還能設置使用麥克風，設置方式為：

{

video: true，

audio: true

}

調用成功即打開攝像頭后返回視頻流數(shù)據(jù)，我們可以將流數(shù)據(jù)設置到video標簽在界面上實時顯示圖像。mediaStream用來記錄獲取到的流數(shù)據(jù)，track在Chrome瀏覽器中用來跟蹤攝像頭狀態(tài)，這兩個變量都能用來關閉攝像頭。

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標簽，創(chuàng)建一個canvas標簽，設置我們需要拍照的尺寸大小，通過drawImage函數(shù)將video當前的圖像保存到canvas標簽，最后將圖像數(shù)據(jù)轉換為base64數(shù)據(jù)返回并關閉攝像頭，這樣就完成了我們的拍照功能。這里的$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中實現(xiàn)的，當然，這里只是實現(xiàn)了拍照并返回拍照數(shù)據(jù)，我們想要在其他地方也使用，就需要將這部分獨立出來，這里我們用到了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對象，最后處理返回的圖像數(shù)據(jù)，設置數(shù)據(jù)顯示到界面上。

6. 兼容問題

主要存在Chrome瀏覽器中，本地測試時，Chrome瀏覽器中能夠正常使用，但是部署到服務器后就不能正常使用，報錯消息為 [object NavigatorUserMediaError]，這是因為Chrome瀏覽器在使用攝像頭時只支持安全源訪問，所以只能通過https訪問才能正常使用。

最后需要說一下，測試時只能通過訪問才能使用，不能通過方式訪問，即我們需要將代碼部署才能訪問，可以在Visual Studio、 java web、php中完成。

現(xiàn)在HTML5可以調用攝像頭錄像嗎

可以的

input type="file" accept="video/*;capture=camcorder"

input type="file" accept="audio/*;capture=microphone"

input type="file" accept="image/*;capture=camera"直接調用相機

input type="file" accept="image/*" /調用相機 圖片或者相冊

還是要根據(jù)手機的類型來說，有些手機只能調相機，有些手機只能調相冊，或者兩者都行。

html5怎么調用系統(tǒng)相機

!DOCTYPE?html??

head??

titleHTML5?GetUserMedia?Demo/title??

?meta?charset="utf-8"

meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0"?/??

/head??

body??

input?type="button"?title="開啟攝像頭"?value="開啟攝像頭"?onclick="getMedia();"?/br?/??

video?height="120px"?autoplay="autoplay"/videohr?/??

input?type="button"?title="拍照"?value="拍照"?onclick="getPhoto();"?/br?/??

canvas?id="canvas1"?height="120px"?/canvashr?/??

input?type="button"?title="視頻"?value="視頻"?onclick="getVedio();"?/br?/??

canvas?id="canvas2"?height="120px"/canvas??

script?type="text/javascript"??

var?video?=?document.querySelector('video');??

var?audio,?audioType;??

var?canvas1?=?document.getElementById('canvas1');??

var?context1?=?canvas1.getContext('2d');??

var?canvas2?=?document.getElementById('canvas2');??

var?context2?=?canvas2.getContext('2d');??

navigator.getUserMedia?=?navigator.getUserMedia?||?navigator.webkitGetUserMedia?||?navigator.mozGetUserMedia?||?navigator.msGetUserMedia;??

window.URL?=?window.URL?||?window.webkitURL?||?window.mozURL?||?window.msURL;??

var?exArray?=?[];?//存儲設備源ID??

MediaStreamTrack.getSources(function?(sourceInfos)?{??

for?(var?i?=?0;?i?!=?sourceInfos.length;?++i)?{??

var?sourceInfo?=?sourceInfos[i];??

//這里會遍歷audio,video，所以要加以區(qū)分??

if?(sourceInfo.kind?===?'video')?{??

exArray.push(sourceInfo.id);??

}??

}??

});??

function?getMedia()?{??

if?(navigator.getUserMedia)?{??

navigator.getUserMedia({??

'video':?{??

'optional':?[{??

'sourceId':?exArray[1]?//0為前置攝像頭，1為后置??

}]??

},??

'audio':true??

},?successFunc,?errorFunc);????//success是獲取成功的回調函數(shù)??

}??

else?{??

alert('Native?device?media?streaming?(getUserMedia)?not?supported?in?this?browser.');??

}??

}??

function?successFunc(stream)?{??

//alert('Succeed?to?get?media!');??

if?(video.mozSrcObject?!==?undefined)?{??

//Firefox中，video.mozSrcObject最初為null，而不是未定義的，我們可以靠這個來檢測Firefox的支持??

video.mozSrcObject?=?stream;??

}??

else?{??

video.src?=?window.URL??window.URL.createObjectURL(stream)?||?stream;??

}??

//video.play();??

//?音頻??

audio?=?new?Audio();??

audioType?=?getAudioType(audio);??

if?(audioType)?{??

audio.src?=?'polaroid.'?+?audioType;??

audio.play();??

}??

}??

function?errorFunc(e)?{??

alert('Error！'+e);??

}??

//?將視頻幀繪制到Canvas對象上,Canvas每60ms切換幀，形成肉眼視頻效果??

function?drawVideoAtCanvas(video,context)?{??

window.setInterval(function?()?{??

context.drawImage(video,?0,?0,90,120);??

},?60);??

}??

//獲取音頻格式??

function?getAudioType(element)?{??

if?(element.canPlayType)?{??

if?(element.canPlayType('audio/mp4;?codecs="mp4a.40.5"')?!==?'')?{??

return?('aac');??

}?else?if?(element.canPlayType('audio/ogg;?codecs="vorbis"')?!==?'')?{??

return?("ogg");??

}??

}??

return?false;??

}??

//?vedio播放時觸發(fā)，繪制vedio幀圖像到canvas??

//????????video.addEventListener('play',?function?()?{??

//????????????drawVideoAtCanvas(video,?context2);??

//????????},?false);??

//拍照??

function?getPhoto()?{??

context1.drawImage(video,?0,?0,90,120);?//將video對象內指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，實現(xiàn)拍照。??

}??

//視頻??

function?getVedio()?{??

drawVideoAtCanvas(video,?context2);??

}??

/script??

/body

怎么用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片

1、實現(xiàn)頭的方法代碼。

2、編寫CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結果如下。

注意事項：

JavaScript是一種網(wǎng)絡腳本語言，在web應用開發(fā)中得到了廣泛的應用，它經(jīng)常被用來為網(wǎng)頁添加各種動態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現(xiàn)自己的功能。

html5怎樣調用手機攝像頭或者相冊?

HTML5技術支持WebApp在手機上拍照，顯示在頁面上并上傳到服務器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。

1、 視頻流

HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，并將從攝像頭獲得的視頻作為這個標簽的輸入來源。

video id=”video” autoplay=”"/video

script

var video_element=document.getElementById(‘video’);

if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error); //success是回調函數(shù),當然你也可以直接在此寫一個匿名函數(shù)

}

function success(stream){

video_element.src=stream;

}

/script

此時，video 標簽內將顯示動態(tài)的攝像視頻流。下面需要進行拍照了。

2、 拍照

拍照是采用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現(xiàn)。主要代碼如下：

var canvas=document.createElement(‘canvas’); //動態(tài)創(chuàng)建畫布對象

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對象內指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，可進行不等大不等位的繪制。

document.body.append(canvas);

3、 圖片獲取

從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”);

這樣，imgData變量就存儲了一長串的字符數(shù)據(jù)內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實際服務器接收的圖像數(shù)據(jù)應該是這部分，我們可以用兩種辦法來獲取。

第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：

var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：

var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺語言截取22位以后的字符串（也就是在前臺略過上面這步直接上傳）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、 圖片上傳

在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時可以用：

$.post(‘upload.php’,{‘data’:data});

在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。

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拍照上傳，也可以通過Canvas的編輯功能函數(shù)提供圖片編輯，例如裁剪、上色、涂鴉、圈點等功能，然后把用戶編輯完的圖片上傳保存到服務器上。

在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發(fā)項目必將會遷移到WEB應用上來。

相關規(guī)范：

The MediaCapture API：

Canvas：

HTML5都有哪些新特性呢？

HTML5新特性如下：

1、脫機緩存。您可以在關閉瀏覽器并再次打開時還原數(shù)據(jù)，以減少網(wǎng)絡流量。

2、音頻和視頻可以自由嵌入，多媒體形式更加靈活。

3、地理位置。地理位置定位使得定位導航不再是專屬導航軟件，地圖也不需要下載很大的地圖包。它可以通過緩存、去哪里、去哪里以及更靈活的方式來解決。

4、畫布繪制提高了移動平臺的繪制能力。canvas API可以用來繪制一個簡單的熱點地圖來收集用戶體驗數(shù)據(jù)，并支持對圖像的移動、旋轉、縮放等常規(guī)編輯。

5、豐富的互動方式。提高交互能力：拖動、撤消歷史操作、文本選擇等。

6、與原生app相比，開發(fā)維護成本低。降低開發(fā)和維護成本；？使頁面更小，減少用戶不必要的開銷；性能更好，功耗更低。

7、CSS3視覺設計師的輔助利器支持。CSS3支持字體嵌入、布局和最令人印象深刻的動畫功能。

8、HTML5調用相機、相冊和通訊錄的功能。

擴展資料：

2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，HTML第五次重大修訂，經(jīng)過近8年的努力，標準規(guī)范終于完成。HTML5旨在支持移動設備上的多媒體。引入了新的語法特性來支持這一點，如視頻、音頻和畫布標記。HTML5還引入了一些新功能，這些功能可以真正改變用戶與文檔交互的方式，包括增強靈活性的新解析規(guī)則、新屬性、過時或冗余屬性等。

網(wǎng)站欄目：html5調用相機,js調用相機
文章網(wǎng)址：http://sd-ha.com/article46/dsihceg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、域名注冊、網(wǎng)站改版、網(wǎng)站營銷、網(wǎng)站設計、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)