使用 HTML5 控制摄像头摄像和拍照

阳光穿透心脏的1/2处 2023-10-02 11:00 3阅读 0赞

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

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

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

[查看演示][Link 1]

### **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 元素的外观。请注意，我们使用的尺寸是 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 亿美元……但我会将其留到另一篇文章中。不过，您至少可以将[画布快照][Link 2]转换为[图像][Link 2] ！我将在未来谈论画布图像过滤器......

[查看演示][Link 1]

能够在不使用第三方软件的情况下在浏览器中访问相机是一项了不起的进步。搭配画布和一些 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>

[Link 1]: https://davidwalsh.name/demo/camera.php
[Link 2]: https://davidwalsh.name/convert-canvas-image