HTML5 Camera(摄像头) 和 Video(视频)控制

最近写了一个上传头像的功能,主要是使用了HTML5的方法来开发.主要从两个方面处理.一是通过input文件控件,二是通过摄像头,今天我们主要是从摄像头来处理.那我们开始怎么从浏览器中获取摄像头的操作.

首先我们先编写HTML代码

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>

首要确认下你的浏览器是否支持video和canvas,否则是不支持这个功能的,我们创建了一个640x480的视频和画板.

下面我们加入javascript代码来控制video

window.addEventListener("DOMContentLoaded", function() {
	// 获取基本的元素,设置.
	var canvas = document.getElementById("canvas", 0, 0);
	var context = canvas.getContext("2d", 0, 0);
	var video = document.getElementById("video", 0, 0);
	var videoObj = { "video": true };
	var errBack = function(error) {
		console.log("Video capture error: ", error.code, 0, 0); 
	};

	// 获取摄像头的方式
	if(navigator.getUserMedia) { // 标准
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play(, 0, 0);
		}, errBack, 0, 0);
	} else if(navigator.webkitGetUserMedia) { // WebKit浏览器
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream, 0, 0);
			video.play(, 0, 0);
		}, errBack, 0, 0);
	}
	else if(navigator.mozGetUserMedia) { // Firefox浏览器
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream, 0, 0);
			video.play(, 0, 0);
		}, errBack, 0, 0);
	}
}, false, 0, 0);

现在的浏览器获取摄像头流的方式是不一样的,因为之前没有统一的标准,浏览器商使用各自处理方式,所以我们获取相关元素后,做相关的处理.

其实在这里,浏览器会提示你是否允许或拒绝使用摄像头,点允许就可以显示到页面上了,否则就不可以.

下面我们对摄像头进行拍照,给拍照按钮,加入事件

document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480, 0, 0);
}, 0, 0);

也就是将数据放入到画板中,这样就显示了拍照的图片了.通过画板获取图片的64位数据,然后通过这个数据进行上传功能.拍照和上传头像就可以完成了