html5調(diào)用手機(jī)攝像頭 ，并實(shí)現(xiàn)定時(shí)拍照？

html5提供了 navigator.getUserMedia接口使用設(shè)備攝像頭，chrome28上測(cè)試已經(jīng)可用，復(fù)手機(jī)端瀏覽器測(cè)試發(fā)制現(xiàn)只有opera瀏覽器可用。

目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、峨邊彝族網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

瀏覽器未完善之前可以使用PhoneGap完成，它提供了zhidao navigator.camera.getPicture接口，使用js可以方便調(diào)用設(shè)備攝像頭。

如何通過(guò)html5調(diào)用手機(jī)攝像頭

1）獲取視頻流

添加一個(gè)HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來(lái)源

var video = document.getElementByIdx_x_x("video")；

navigator.getUserMedia({video:true}， function (stream) {

video.src = window.webkitURL.createObjectURL(stream)；

}， function (error) { alert(error)； })；

2）拍照

關(guān)于拍照功能，采用HTML5的Canvas實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，Video元素能作為Canvas圖像的輸入

function scamera() {

var videoElement = document.getElementByIdx_x_x('video')；

var canvasObj = document.getElementByIdx_x_x('canvas1')；

var context1 = canvasObj.getContext('2d')；

context1.fillStyle = "#ffffff"；

context1.fillRect(0， 0， 320， 240)；

context1.drawImage(videoElement， 0， 0， 320， 240)；

}

3）圖片獲取

要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像

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

imgData格式如下:”data:image/png;base64,xxxxx“

真正圖像數(shù)據(jù)是base64編碼逗號(hào)之后的部分。

如何html5在瀏覽器里訪(fǎng)問(wèn)手機(jī)后置攝像頭

HTML5 The Media Capture API提供了對(duì)攝像頭的可編程訪(fǎng)問(wèn)，用戶(hù)可以直接用getUserMedia獲得攝像頭提供的視頻流。但實(shí)際上用html5調(diào)用手機(jī)攝像頭存在很多問(wèn)題：1）谷歌的發(fā)布的Chrome到了21版本后，才新增了一個(gè)用于高質(zhì)量視頻音頻通訊的getUserMedia API，該API允許Web應(yīng)用程序訪(fǎng)問(wèn)攝像頭和麥克風(fēng),其他手機(jī)瀏覽器只有opera支持html5調(diào)用本地拍照功能2）兩個(gè)瀏覽器均不支持訪(fǎng)問(wèn)多個(gè)攝像頭：chrome不支持訪(fǎng)問(wèn)后置攝像頭，pera支持訪(fǎng)問(wèn)后置攝像頭的

!DOCTYPE?html

html?xmlns=""

head

titleHTML5?GetUserMedia?Demo/title

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

/html

網(wǎng)站欄目：html5攝像頭,HTML5調(diào)用攝像頭
文章URL：http://chinadenli.net/article23/dseccjs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、建站公司、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化

廣告

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