如何通过index.html调用本地摄像头权限：HTML5多媒体交互-html教程-PHP中文网

浏览器禁止 file:// 协议下调用摄像头，必须通过 http://localhost 或 https:// 启动并由用户点击等手势触发 getusermedia()，且 video 元素需设 autoplay、playsinline 和 srcobject。

如何通过index.html调用本地摄像头权限：html5多媒体交互

浏览器不会让 index.html 直接“调用”摄像头——它必须由用户主动触发（比如点击按钮），且需运行在安全上下文（https 或 localhost）中，否则 navigator.mediaDevices.getUserMedia() 会直接拒绝或静默失败。

为什么点开 `index.html` 文件双击打不开摄像头

本地双击打开的 file:// 协议不被视为安全上下文，所有现代浏览器（Chrome、Edge、Firefox）都会直接拒绝 getUserMedia() 请求，控制台报错：NotAllowedError: Permission denied 或直接无响应。这不是代码写错了，是协议限制。

必须通过本地服务器启动：用 python3 -m http.server 8000、npx serve、VS Code Live Server 插件等
确保地址栏显示的是 http://localhost:xxxx 或 https:// 开头，而非 file:///
某些旧版 Safari 对 localhost 的权限策略更严格，建议用 127.0.0.1 替代

`getUserMedia()` 调用必须由用户手势触发

自动播放、页面加载时就调用 getUserMedia() 是被禁止的（防止恶意偷采）。浏览器只允许在 click、touchstart 等明确用户操作回调中发起请求。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

不能写在 DOMContentLoaded 或 load 事件里
按钮必须是真实可交互元素（<button></button> 或带 role="button" 的 <div>），禁用 <code>pointer-events: none

示例正确写法：

document.querySelector('#startBtn').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    document.getElementById('video').srcObject = stream;
  } catch (err) {
    console.error('获取摄像头失败:', err.name); // 常见：NotAllowedError、NotFoundError
  }
});