html5桌面录制,HTML5 控制摄像头和录制视频 - 文章教程

在移动和桌面设备的客户端 API 正迅速提供相同的 API。 当然我们的移动设备已取得了一些这些 API 的第一次，但这些 API 正在慢慢地使他们的方式到桌面。 其中之一的 API 是 getUserMedia 的 API，为开发者提供访问用户的摄像头的方法，让我告诉你如何在你的浏览器中简单的调用摄像头。

HTML

请阅读我的备注下面的HTML结构：

Snap Photo

一旦确认相机支持确认这些元素应该被创建，但为了这个教程中，我想告诉你什么元素看起来像基本的 HTML。 请注意我们正在使用的设备尺寸为 640×480。

JavaScript

既然已经创建了上面的 HTML 元素，JavaScript 的部分看起来比你想象的更小：

// Put event listeners into place

window.addEventListener("DOMContentLoaded", function() {

// Grab elements, create settings, etc.

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Video capture error: ", error.code);

};

// Put video listeners into place

if(navigator.getUserMedia) { // Standard

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

navigator.webkitGetUserMedia(videoObj, function(stream){

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

video.play();

}, errBack);

}

else if(navigator.mozGetUserMedia) { // Firefox-prefixed

navigator.mozGetUserMedia(videoObj, function(stream){

video.src = window.URL.createObjectURL(stream);

video.play();

}, errBack);

}

}, false);

一旦它被确定浏览器支持 getUserMedia，一个简单的方法将视频元素的 SRC 属性设置为用户的摄像头/网络摄像头对象。 调用视频的播放方法，然后颁布元素的实时视频连接。 这就是这一切需要将相机连接到浏览器的所有， 拍摄照片要麻烦一点。 只需添加一个点击侦听器添加到一个通用的按钮，并从视频中绘制图像。

// Trigger photo take

document.getElementById("snap").addEventListener("click", function() {

context.drawImage(video, 0, 0, 640, 480);

});

当然你也可以添加一些好看的图像滤镜，如果能够在浏览器中访问摄像机，而无需使用第三方软件是一个令人难以置信的进步。 搭配 Canvas 和一点 JavaScript，相机已经成为快速，轻松地访问。

不仅是基于摄像头访问，但由于 Canvas 是超灵活，我们就可以在将来添加的 Instagram 风格的图像过滤器。 但就目前而言，只需访问摄像机在我们的浏览器中感动着我们英里之遥。有乐趣你的浏览器中拍摄图像。