使用 HTML5 控制摄像头摄像和拍照-蒲公英云

访问相机的方法最初是navigator.getUserMedianavigator.mediaDevices.getUserMedia.

浏览器供应商最近裁定，它getUserMedia应该只适用于https:协议。您需要 SSL 证书才能使此 API 工作。

移动和桌面设备上的客户端 API 正在快速提供相同的 API。当然，我们的移动设备首先可以访问其中一些 API，但这些 API 正在慢慢进入桌面。这些 API 之一是 getUserMedia API，为开发人员提供对用户相机的访问。让我向您展示如何从浏览器中获取简单的相机访问权限！

查看演示

HTML

请阅读我关于以下 HTML 结构的说明：

<!--
    Ideally these elements aren't created until it's confirmed that the 
    client supports video/camera, but for the sake of illustrating the 
    elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

一旦确认相机支持，就应该创建这些元素中的每一个，但为了本教程，我想向您展示基本 HTML 元素的外观。请注意，我们使用的尺寸是 640x480。

JavaScript

由于上面的 HTML 元素已经创建，JavaScript 部分看起来比您想象的要小：

// Grab elements, create settings, etc.
var video = document.getElementById('video');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}
/* Legacy code below: getUserMedia 
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.srcObject = stream;
        video.play();
    }, errBack);
}
*/

一旦确定浏览器支持navigator.mediaDevices.getUserMedia，一个简单的方法将video元素设置src为用户的实时摄像头/网络摄像头。调用play视频的方法然后启动元素的实时流视频连接。这就是将您的相机连接到浏览器所需的全部内容！

拍照只是稍微困难一些。只需将点击监听器添加到通用按钮，然后从视频中绘制图像即可！

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});

当然，您可以添加一些性感的图像过滤器并赚取 10 亿美元……但我会将其留到另一篇文章中。不过，您至少可以将画布快照转换为图像！我将在未来谈论画布图像过滤器……

查看演示

能够在不使用第三方软件的情况下在浏览器中访问相机是一项了不起的进步。搭配画布和一些 JavaScript，相机变得快速且易于访问。不仅可以使用相机，而且由于画布非常灵活，我们将来可以添加性感的 Instagram 风格的图像过滤器。然而，就目前而言，只需访问浏览器中的摄像头即可让我们领先数英里。玩得开心在浏览器中拍摄图像！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="generator" content="PSPad editor, www.pspad.com">
        <title></title>
    </head>
    <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script type="text/javascript">
        // Grab elements, create settings, etc.
        var video = document.getElementById('video');
        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // Not adding `{ audio: true }` since we only want video now
            navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            });
        }
        /* Legacy code below: getUserMedia 
         else if(navigator.getUserMedia) { // Standard
         navigator.getUserMedia({ video: true }, function(stream) {
         video.src = stream;
         video.play();
         }, errBack);
         } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
         navigator.webkitGetUserMedia({ video: true }, function(stream){
         video.src = window.webkitURL.createObjectURL(stream);
         video.play();
         }, errBack);
         } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
         navigator.mozGetUserMedia({ video: true }, function(stream){
         video.srcObject = stream;
         video.play();
         }, errBack);
         }
         */
        // Elements for taking the snapshot
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
    </script>
</body>
</html>