包含Javascript的HTML静态页面调取本机摄像头

news2025/6/3 22:04:16

在实际业务开发中，需要在带有摄像头的工作机上拍摄施工现场工作过程的图片，然后上传到服务器备存。

这便需要编写可以运行在浏览器上的代码，并在代码中实现Javascript调取摄像头、截取帧保存为图片的功能。

为了使用户更快掌握JS调取摄像头的实现机制，现将其与服务器端连接的代码剥离，仅展示包念JavaScript调用摄像头的HTML代码。

JsInvokeVideo.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄像头访问示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        video {
            width: 100%;
            max-width: 640px;
            background-color: #000;
            border-radius: 8px;
        }
        canvas {
            display: none;
        }
        .controls {
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background-color: #45a049;
        }
        #captureButton {
            background-color: #f44336;
        }
        #captureButton:hover {
            background-color: #d32f2f;
        }
        #downloadLink {
            display: none;
            margin-top: 10px;
            text-decoration: none;
            color: #2196F3;
        }
        .captured-image {
            margin-top: 20px;
            max-width: 100%;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>摄像头访问示例</h1>
        
        <video id="videoElement" autoplay></video>
        <canvas id="canvasElement"></canvas>
        
        <div class="controls">
            <button id="startButton">启动摄像头</button>
            <button id="stopButton" disabled>停止摄像头</button>
            <button id="captureButton" disabled>拍照</button>
            <a id="downloadLink" href="#" download="captured-image.jpg">下载图片</a>
        </div>
        
        <img id="capturedImage" class="captured-image" src="" alt="拍摄的照片">
    </div>

    <script>
        // 获取DOM元素
        const videoElement = document.getElementById('videoElement');
        const canvasElement = document.getElementById('canvasElement');
        const startButton = document.getElementById('startButton');
        const stopButton = document.getElementById('stopButton');
        const captureButton = document.getElementById('captureButton');
        const downloadLink = document.getElementById('downloadLink');
        const capturedImage = document.getElementById('capturedImage');
        
        // 存储摄像头流
        let stream = null;
        
        // 启动摄像头
        startButton.addEventListener('click', async () => {
            try {
                // 请求媒体设备
                stream = await navigator.mediaDevices.getUserMedia({ 
                    video: { width: 640, height: 480 },
                    audio: false
                });
                
                // 将流连接到视频元素
                videoElement.srcObject = stream;
                
                // 更新按钮状态
                startButton.disabled = true;
                stopButton.disabled = false;
                captureButton.disabled = false;
                
                console.log('摄像头已启动');
            } catch (error) {
                console.error('访问摄像头时出错:', error);
                alert('无法访问摄像头，请确保您已授予权限。');
            }
        });
        
        // 停止摄像头
        stopButton.addEventListener('click', () => {
            if (stream) {
                // 停止所有轨道
                stream.getTracks().forEach(track => {
                    track.stop();
                });
                
                // 清除视频源
                videoElement.srcObject = null;
                
                // 更新按钮状态
                startButton.disabled = false;
                stopButton.disabled = true;
                captureButton.disabled = true;
                
                console.log('摄像头已停止');
            }
        });
        
        // 拍照
        captureButton.addEventListener('click', () => {
            const context = canvasElement.getContext('2d');
            
            // 设置canvas尺寸与视频相同
            canvasElement.width = videoElement.videoWidth;
            canvasElement.height = videoElement.videoHeight;
            
            // 将当前视频帧绘制到canvas
            context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
            
            // 显示拍摄的图片
            const imageDataURL = canvasElement.toDataURL('image/jpeg');
            capturedImage.src = imageDataURL;
            
            // 启用下载链接
            downloadLink.href = imageDataURL;
            downloadLink.style.display = 'inline-block';
            
            console.log('照片已拍摄');
        });
        
        // 页面关闭时停止摄像头
        window.addEventListener('beforeunload', () => {
            if (stream) {
                stream.getTracks().forEach(track => {
                    track.stop();
                });
            }
        });
    </script>
</body>
</html>

无须配置服务器，将上述代码保存为JsInvokeVideo.html，双击运行即可。

注意：编辑该html文件时一定要保存编码为UTF-8，否则运行时会显示乱码，如下所示：