浏览器摄像头抓拍

C++++‍♂️

已于 2023-08-24 15:15:36 修改

阅读量63

点赞数

文章标签： javascript 前端开发语言

于 2023-08-11 09:09:39 首次发布

本文链接：https://blog.csdn.net/m0_62959350/article/details/132223759

版权

<!DOCTYPE html>
<html>

<head>
    <title>摄像头</title>
</head>

<body>
    <div style="margin: 0 auto;width: 500px;height: 500px;transform: translateX(-20%);">
        <h1 style="text-align: center;">摄像头</h1>
        <button id="button">抓拍</button>
        <video id="videoElement" autoplay></video>
    </div>
    <canvas id="canvas" style="display: none;"></canvas>
</body>
<script>
    async function getMediaStream() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            const videoElement = document.getElementById('videoElement');
            videoElement.srcObject = stream;
        } catch (error) {
            console.error('访问摄像头失败: ', error);
        }
    }

    async function captureFrame() {
        const videoElement = document.getElementById('videoElement');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;

        // 将当前视频帧绘制到画布上
        context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

        // 抓拍后的图像数据 URL
        const snapshot = canvas.toDataURL('image/png');
        // 在这里可以使用抓拍后的图像数据进行后续处理，比如显示在页面上或保存到服务器等
        console.log('抓拍成功:', snapshot);

        // 继续下一次抓拍
        // requestAnimationFrame(captureFrame);
    }

    window.onload = function() {
        getMediaStream();
        // 在视频流开始后开始自动抓拍
        // document.getElementById('videoElement').addEventListener('play', () => {
        //         captureFrame();
        // });
         // 添加按钮点击事件监听器
         const button = document.getElementById('button');
        button.addEventListener('click', () => {
            captureFrame();
        });
    };
</script>

</html>