HTML5 控制摄像头和录制视频

Question

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

HTML

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

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

一旦确认相机支持确认这些元素应该被创建，但为了这个教程中，我想告诉你什么元素看起来像基本的 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 风格的图像过滤器。 但就目前而言，只需访问摄像机在我们的浏览器中感动着我们英里之遥。有乐趣你的浏览器中拍摄图像。