html5提供了 navigator.getUserMedia接口使用設(shè)備攝像頭，chrome28上測試已經(jīng)可用，復手機端瀏覽器測試發(fā)制現(xiàn)只有opera瀏覽器可用。
目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、峨邊彝族網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
瀏覽器未完善之前可以使用PhoneGap完成，它提供了zhidao navigator.camera.getPicture接口，使用js可以方便調(diào)用設(shè)備攝像頭。
1）獲取視頻流
添加一個HTML5的Video標簽，并將從攝像頭獲得視頻作為這個標簽的輸入來源
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實時捕獲Video標簽的內(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編碼逗號之后的部分。
HTML5 The Media Capture API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。但實際上用html5調(diào)用手機攝像頭存在很多問題：1）谷歌的發(fā)布的Chrome到了21版本后，才新增了一個用于高質(zhì)量視頻音頻通訊的getUserMedia API，該API允許Web應(yīng)用程序訪問攝像頭和麥克風,其他手機瀏覽器只有opera支持html5調(diào)用本地拍照功能2）兩個瀏覽器均不支持訪問多個攝像頭：chrome不支持訪問后置攝像頭，pera支持訪問后置攝像頭的
!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="開啟攝像頭"?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?=?[];?//存儲設(shè)備源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是獲取成功的回調(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，而不是未定義的，我們可以靠這個來檢測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對象內(nèi)指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，實現(xiàn)拍照。
}
//視頻
function?getVedio()?{
drawVideoAtCanvas(video,?context2);
}
/script
/body
/html
重慶分公司
重慶分公司
