在现代 Web 应用中，调用摄像头 已经成为常见需求，比如视频会议、扫码登录、人脸识别等场景。浏览器本身提供了相应的 Web API，让开发者无需安装插件即可直接访问摄像头和麦克风。本文将从 原理、使用方式 到 实战案例，带你全面了解如何在浏览器中使用摄像头，并配合示意图和截图。
一、原理解析浏览器访问摄像头的能力主要依赖于 WebRTC（Web Real-Time Communication） 标准，其中最关键的 API 是 MediaDevices.getUserMedia()。
下面是一个简化的原理示意图：
代码语言：txt复制 ┌───────────────┐ ┌─────────────┐
│ 用户设备 │ │ 浏览器 │
│ 摄像头/麦克风 │──────▶│ getUserMedia│
└───────────────┘ └─────┬───────┘
│
▼
┌─────────────┐
│ MediaStream│
└───────┬─────┘
│
┌──────────▼─────────┐
│
└────────────────────┘简而言之：摄像头 → getUserMedia → MediaStream →
二、使用方式基本调用代码语言：javascript复制navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
const videoElement = document.querySelector("video");
videoElement.srcObject = stream;
})
.catch(error => {
console.error("无法访问摄像头：", error);
});三、实战案例：拍照功能我们实现一个“拍照应用”，点击按钮即可将摄像头画面截图保存。
HTML代码语言：html复制
JavaScript代码语言：javascript复制const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const snapBtn = document.getElementById("snap");
const ctx = canvas.getContext("2d");
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { video.srcObject = stream; })
.catch(err => { console.error("摄像头打开失败：", err); });
snapBtn.addEventListener("click", () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL("image/png");
console.log("拍摄的图片：", dataURL);
});👉 实际效果：
左边
代码语言：txt复制 ┌───────────────┐ 点击拍照 ┌───────────────┐
│ 摄像头视频 │────────────▶│ 拍摄的照片 │
│
└───────────────┘ └───────────────┘四、常见问题与解决方案为什么在本地打不开？
getUserMedia 需要在 HTTPS 或 localhost 环境下才能使用。如何切换前后摄像头？
使用 facingMode 参数："user" → 前置摄像头"environment" → 后置摄像头（扫码常用）多摄像头选择
通过 navigator.mediaDevices.enumerateDevices() 获取设备列表，再指定 deviceId。用户拒绝权限
浏览器会返回 NotAllowedError，需要提示用户手动开启权限。五、进阶应用场景扫码应用：结合 jsQR 实现二维码识别。人脸识别：配合 TensorFlow.js 或 Face API。视频会议：WebRTC PeerConnection 实现实时通话。滤镜/特效：结合 WebGL / Three.js 实现 AR 效果。六、总结核心 API：navigator.mediaDevices.getUserMedia运行环境：HTTPS / localhost