如何通過(guò)html5調(diào)用攝像頭拍照

1. 項(xiàng)目背景

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

網(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中完成。

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

可以的

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

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

input type="file" accept="image/*;capture=camera"直接調(diào)用相機(jī)

input type="file" accept="image/*" /調(diào)用相機(jī) 圖片或者相冊(cè)

還是要根據(jù)手機(jī)的類型來(lái)說(shuō)，有些手機(jī)只能調(diào)相機(jī)，有些手機(jī)只能調(diào)相冊(cè)，或者兩者都行。

html5怎么調(diào)用系統(tǒng)相機(jī)

!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="開(kāi)啟攝像頭"?value="開(kāi)啟攝像頭"?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?=?[];?//存儲(chǔ)設(shè)備源ID??

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

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

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

//這里會(huì)遍歷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是獲取成功的回調(diào)函數(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，而不是未定義的，我們可以靠這個(gè)來(lái)檢測(cè)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對(duì)象上,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播放時(shí)觸發(fā)，繪制vedio幀圖像到canvas??

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

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

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

//拍照??

function?getPhoto()?{??

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

}??

//視頻??

function?getVedio()?{??

drawVideoAtCanvas(video,?context2);??

}??

/script??

/body

怎么用html5或js調(diào)用手機(jī)的攝像頭拍照上傳以及調(diào)用手機(jī)相冊(cè)選取照片

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

2、編寫(xiě)CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測(cè)試結(jié)果如下。

注意事項(xiàng)：

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

html5怎樣調(diào)用手機(jī)攝像頭或者相冊(cè)?

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都有哪些新特性呢？

HTML5新特性如下：

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

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

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

4、畫(huà)布繪制提高了移動(dòng)平臺(tái)的繪制能力。canvas API可以用來(lái)繪制一個(gè)簡(jiǎn)單的熱點(diǎn)地圖來(lái)收集用戶體驗(yàn)數(shù)據(jù)，并支持對(duì)圖像的移動(dòng)、旋轉(zhuǎn)、縮放等常規(guī)編輯。

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

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

7、CSS3視覺(jué)設(shè)計(jì)師的輔助利器支持。CSS3支持字體嵌入、布局和最令人印象深刻的動(dòng)畫(huà)功能。

8、HTML5調(diào)用相機(jī)、相冊(cè)和通訊錄的功能。

擴(kuò)展資料：

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

網(wǎng)站欄目：html5調(diào)用相機(jī),js調(diào)用相機(jī)
文章網(wǎng)址：http://www.2m8n56k.cn/article46/dsihceg.html

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

廣告

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