最近寫了一個上傳頭像的功能,主要是使用了HTML5的方法來開發.主要從兩個方面處理.一是通過input檔案控件,二是通過攝像頭,今天我們主要是從攝像頭來處理.那我們開始怎麼從浏覽器中擷取攝像頭的操作.
首先我們先編寫HTML代碼
拍照
首要确認下你的浏覽器是否支援video和canvas,否則是不支援這個功能的,我們建立了一個640x480的視訊和畫闆.
下面我們加入javascript代碼來控制video
window.addEventListener("DOMContentLoaded", function() {// 擷取基本的元素,設定.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var video = document.getElementById("video");
var videoObj = { "video": true };
var errBack = function(error) {
console.log("Video capture error: ", error.code);
};// 擷取攝像頭的方式
if(navigator.getUserMedia) { // 标準
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit浏覽器
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}else if(navigator.mozGetUserMedia) { // Firefox浏覽器
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
現在的浏覽器擷取攝像頭流的方式是不一樣的,因為之前沒有統一的标準,浏覽器商使用各自處理方式,是以我們擷取相關元素後,做相關的處理.
其實在這裡,浏覽器會提示你是否允許或拒絕使用攝像頭,點允許就可以顯示到頁面上了,否則就不可以.
下面我們對攝像頭進行拍照,給拍照按鈕,加入事件
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
也就是将資料放入到畫闆中,這樣就顯示了拍照的圖檔了.通過畫闆擷取圖檔的64位資料,然後通過這個資料進行上傳功能.拍照和上傳頭像就可以完成了
本文屬于吳統威的部落格原創文章,轉載時請注明出處及相應連結:http://www.wutongwei.com/front/infor_showone.tweb?id=103