从零开始：3步实现HTML调用摄像头
第1步：搭好HTML“舞台”——给摄像头画面安个家
其实网页调用摄像头，就像搭戏台一样，得先有个“舞台”让画面展示。这个舞台就是HTML里的标签，你可以把它想象成一个专门用来显示摄像头画面的小屏幕。我第一次做的时候，就忘了加这个标签，结果JS写得再好，画面也没地方放，折腾了半小时才发现问题出在这。
你只需要在HTML里加这么几行：
<!-摄像头画面显示区域 >
<!-
控制按钮 >
<!-
拍照结果显示区域 >
这里有几个细节得注意，都是我踩过坑的：
autoplay：不加这个，摄像头打开后画面不会自动动，得用户点一下才开始播放，体验特别差； playsinline：这是给苹果设备用的，不加的话，iOS Safari会强制全屏显示摄像头画面，把你整个页面布局都打乱，我之前给一个教育机构做在线课堂时就踩过这个坑，安卓没问题，iPhone一打开就全屏，后来加上这个属性立马好了； style里的宽高：最好给个固定值，不然画面可能会拉伸变形，我一般设600×400像素，兼顾清晰度和页面空间。第2步：用JavaScript“牵线搭桥”——让网页和摄像头“对话”
有了舞台，接下来就得让网页和摄像头“说上话”。这里要用到浏览器自带的MediaDevices API，你不用记这个名字，就把它理解成一个“翻译官”，帮网页问摄像头：“能不能把你的画面借给我用用？”
我写了一段通用代码，你直接复制过去就行，我会一句句给你解释：
// 获取页面元素
const startBtn = document.getElementById('startBtn');
const cameraView = document.getElementById('cameraView');
const captureBtn = document.getElementById('captureBtn');
const captureResult = document.getElementById('captureResult');
// 开启摄像头按钮点击事件
startBtn.addEventListener('click', async () => {
try {
// 调用摄像头，获取视频流
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 600, height: 400 }, // 设置画面宽高
audio: false // 不需要音频的话设为false
});
// 把视频流“放进”video标签
cameraView.srcObject = stream;
// 隐藏按钮（可选，避免重复点击）
startBtn.style.display = 'none';
} catch (error) {
// 出错时提示用户
console.error('调用摄像头失败:', error);
alert('开启摄像头失败！可能原因：n
未授予摄像头权限n 设备没有摄像头n3. 浏览器不支持');
}
});
// 拍照按钮点击事件（可选功能）
captureBtn.addEventListener('click', () => {
// 设置canvas大小和video一致
captureResult.width = cameraView.videoWidth;
captureResult.height = cameraView.videoHeight;
// 把video当前画面画到canvas上
captureResult.getContext('2d').drawImage(cameraView, 0, 0);
// 显示拍照结果
captureResult.style.display = 'block';
});
这段代码里有几个关键点，我当初琢磨了好久才弄明白：
async/await：调用摄像头是个“需要等”的操作，就像点外卖要等骑手接单，不能刚点就催。await就是告诉代码“先别急，等摄像头回应了再说”，如果不用这个，可能画面还没加载出来，代码就跑完了，导致黑屏； getUserMedia参数：video: { width: 600, height: 400 }是告诉摄像头“我要600×400的画面”，如果设备不支持这个分辨率，会自动调整到最接近的；audio: false是说“我只要画面，不要声音”，如果做视频聊天就设为true； try/catch：这是“保险措施”，万一用户拒绝权限或设备没摄像头，代码不会报错崩溃，而是弹出友好提示。我之前帮朋友做项目时没加这个，用户点了拒绝后页面直接卡住，后来加上catch里的提示，用户反馈好多了。第3步：测试运行——看看你的摄像头能不能“听话”
代码写完了，怎么测试呢？你新建一个文本文件，把上面的HTML和JS代码复制进去，保存为.html格式（比如camera-test.html），然后用浏览器打开。点击“开启摄像头”按钮，这时候浏览器会弹权限请求，点“允许”，你应该就能看到自己的画面了！
如果没反应，先检查这3点（都是我踩过的坑）：
video标签有没有autoplay？没加的话画面不会动； 避坑指南：权限设置和兼容性处理
用户授权：别让“拒绝”变成死胡同
摄像头调用最容易出问题的就是权限。很多用户第一次看到权限弹窗会害怕，直接点“拒绝”，这时候如果你的网页没做处理，用户就再也打不开摄像头了，只能关掉页面重来。我帮一个在线问诊平台做项目时，就遇到用户反馈“点了拒绝就再也用不了”，后来加了权限引导，问题少了一大半。
3个权限处理小技巧（亲测有效）：
Permissions API判断用户是否拒绝过权限，拒绝的话给具体操作指引。代码可以这么写：// 检查摄像头权限状态
navigator.permissions.query({ name: 'camera' }).then(permission => {
if (permission.state === 'denied') {
alert('摄像头权限已被拒绝，请按以下步骤开启：n
点击浏览器地址栏右侧的🔒图标n 在弹出的菜单中找到“摄像头”n3. 选择“允许”');
}
});
跨浏览器兼容：不同浏览器的“小脾气”
不同浏览器对摄像头调用的支持不太一样，就像不同的人有不同的习惯——有的喜欢直接说“行”或“不行”，有的需要你多问一句。下面这个表格是我整理的主流浏览器“脾气”，你照着避坑就行：
| 浏览器 | 最低支持版本 | 特殊要求 | 权限提示位置 |
|---|---|---|---|
| Chrome/Edge | Chrome 21+/Edge 12+ | 无特殊要求 | 地址栏下方弹窗 |
| Firefox | Firefox 17+ | 本地文件需开启设置 | 页面中央弹窗 |
| Safari（桌面） | Safari 11+ | 必须HTTPS环境（本地localhost除外） | 顶部导航栏提示 |
| Safari（iOS） | iOS 11+ | 需加playsinline属性，必须HTTPS | 底部弹窗 |
特别注意Safari的“傲娇”：
苹果的Safari浏览器对摄像头权限要求最严，必须在HTTPS环境下才能调用（本地开发用localhost可以），我之前帮一个电商平台做商品AR预览，在安卓上测试好好的，到了iPhone就不行，查了半天才发现是用了HTTP协议，后来换成HTTPS立马好了。如果你是在本地测试，可以用localhost启动服务器，或者在Safari设置里开启“开发 > 禁用本地文件限制”（仅测试用）。
移动端适配小细节：
在手机上调用摄像头时，记得给video标签加object-fit: cover;样式，避免画面被拉伸，代码：
#cameraView {
object-fit: cover; / 保持比例，填满容器 /
}
我之前没加这个，在全面屏手机上画面被拉得又瘦又长，用户都说“脸变形了”，加上后就正常了。
你现在就可以把上面的代码复制到HTML文件里试试，遇到问题别慌，先看看是不是权限没开，或者浏览器不支持。如果卡在哪一步，记得回来告诉我是权限问题、代码报错还是画面显示异常，我帮你一起排查！
其实关于HTTPS这个事儿，你不用记那么多专业说法，我给你说个大白话版本。现在的浏览器都跟“安全警察”似的，对摄像头这种涉及隐私的功能盯得特别紧，HTTP协议下的数据传输就像快递没打包直接扔马路上，谁都能看两眼，所以浏览器觉得不安全，就不让你随便调用摄像头。我去年帮一个做在线绘画教室的朋友改代码，他的网站在测试服务器（HTTP环境）上好好的，一传到正式服务器（也是HTTP），iPhone用户全反馈“打不开摄像头”，我一看控制台，Safari直接报错“NotAllowedError: The request is not allowed by the user agent or the platform in the current context”，后来换成HTTPS协议，刷新页面立马就好了——这就是Safari的“死规定”，非localhost的HTTP环境，想都别想用摄像头。
不过本地开发的时候你倒不用慌，比如你用VS Code的Live Server插件启动，地址是http://localhost:5500这种，浏览器会网开一面，因为它知道“这是你自己电脑上的东西，相对安全”，所以HTTP也能调摄像头。但你要记住，这仅限本地测试，一旦要放到线上给用户用，HTTPS是必须的，不然Chrome、Edge这些浏览器也会跳出来拦着。我之前就见过一个团队，本地测试没问题，直接把HTTP版本部署上线了，结果用户投诉“点了允许还是黑屏”，查了半天才发现是协议的锅，紧急换成HTTPS后，90%的问题都解决了。所以你要是打算把带摄像头功能的网页正式发布，记得提前让服务器配置好HTTPS证书，现在很多云服务器都有免费的SSL证书，申请也不麻烦，别省这个事。
用户不小心拒绝了摄像头权限，怎么重新开启？
如果用户拒绝了权限，可以通过浏览器地址栏的设置重新开启：点击地址栏右侧的🔒图标，在弹出的菜单中找到“摄像头”选项，选择“允许”即可。也可以在代码中添加权限状态检测，当检测到权限被拒绝时，主动提示用户操作步骤，比如通过 navigator.permissions.query({ name: 'camera' }) 判断权限状态，引导用户在浏览器设置中重新开启。
为什么在Safari浏览器里摄像头画面不显示？
Safari浏览器对摄像头调用有两个特殊要求：一是必须在HTTPS环境下（本地开发用 localhost 除外），二是需要给 标签添加 playsinline 属性。如果是iOS设备，缺少 playsinline 会导致画面强制全屏；如果是线上环境用HTTP协议，Safari会直接阻止摄像头调用。 确保没有同时开启其他占用摄像头的应用，比如微信视频、Zoom等。
摄像头画面卡顿或黑屏怎么办？
先检查三个常见原因：① 摄像头被其他应用占用（比如微信、视频会议软件），关闭这些应用后重试；② 分辨率设置过高，比如代码中设置了超过设备支持的宽高（如 video: { width: 1920, height: 1080 }），可以降低分辨率（如600×400）；③ 浏览器版本过旧， 使用Chrome 21+、Firefox 17+、Safari 11+等较新版本。如果是本地测试，用 localhost 启动服务器（如VS Code的Live Server插件），避免直接打开本地HTML文件。
如何在网页里实现拍照并保存图片？
可以借助 标签实现拍照功能。在文章的代码示例中，点击“拍照”按钮时，通过 drawImage() 方法将 当前画面绘制到 上，再用 toDataURL() 获取图片数据（如 const imageData = captureResult.toDataURL('image/png')），最后可以将这个数据作为图片链接显示，或通过JS发送到服务器保存。
必须用HTTPS才能调用摄像头吗？
多数浏览器要求线上环境必须使用HTTPS（本地开发除外）。比如Safari（包括iOS和桌面版）明确规定，非 localhost 的HTTP环境会阻止摄像头调用；Chrome、Edge等浏览器从2020年起也逐步限制HTTP环境的摄像头权限。本地开发时，用 localhost 启动服务器（如 http://localhost:5500）可以正常调用，无需HTTPS；但线上部署时， 使用HTTPS协议，避免权限被浏览器阻止。
