当前位置：首页 > article >正文

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

article 2025/8/25 17:26:58

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

这便需要编写可以运行在浏览器上的代码，并在代码中实现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;// 将当前视频帧绘制到canvascontext.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，否则运行时会显示乱码，如下所示：