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）拍照
關于拍照功能，采用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編碼逗號之后的部分
轉(zhuǎn)載，僅供參考。