在HTML中嵌入本地相机或摄像头控件

翻滚的胖子
2023-06-12 18:28:59
HTML JavaScript 图片处理

随着科技的不断进步，越来越多的Web应用需要使用到本地相机或摄像头。本文将介绍如何在HTML中嵌入本地相机或摄像头控件，并附带对应的代码案例。让我们开始吧！

函数介绍

在HTML中嵌入本地相机或摄像头控件，需要使用到以下两个函数：getUserMedia()和URL.createObjectURL()。

getUserMedia()函数是WebRTC API的一部分，用于获取用户的媒体设备，包括摄像头、麦克风等。其语法如下：

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
    /* success callback */
})
.catch(function(err) {
    /* error callback */
});

其中，constraints参数用于指定获取的媒体类型和相关限制条件，如只获取视频流、获取指定分辨率等。mediaStream参数则代表获取到的媒体流对象，可以用于后续的操作。

URL.createObjectURL()函数用于生成Blob URL，将Blob对象转换成URL地址。其语法如下：

URL.createObjectURL(blob)

其中，blob参数代表需要转换的Blob对象。

代码案例

下面是一个简单的代码案例，演示如何在HTML中嵌入本地相机或摄像头控件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Camera Demo</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="capture">Capture</button>
    <script>
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false
        })
        .then(function(mediaStream) {
            var video = document.getElementById('video');
            video.srcObject = mediaStream;
            video.play();
        })
        .catch(function(err) {
            console.log('getUserMedia error: ' + err.name);
        });
        
        var captureButton = document.getElementById('capture');
        captureButton.addEventListener('click', function() {
            var canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            var data = canvas.toDataURL('image/png');
            console.log(data);
        });
    </script>
</body>
</html>

在上面的代码中，我们首先使用getUserMedia()函数获取用户的摄像头（video: true）和关闭麦克风（audio: false），并将获取到的媒体流对象赋值给video元素的srcObject属性，从而在页面上显示摄像头的实时画面。之后，我们通过addEventListener()函数为“Capture”按钮添加了一个click事件，当用户点击按钮时，我们使用canvas元素将当前摄像头的画面截图，并将截图转换成data URL格式输出到控制台上。