跳过主要内容 介绍 <usermedia> HTML 元素 Mari Viana 发布日期：2026 年 6 月 29 日 在 Chrome 144 中推出 <geolocation> 元素后，功能元素套件中的下一个控制是 <usermedia> HTML 元素。 从 Chrome 151 开始，这个元素标志着从通用权限请求向访问相机和麦克风流的有针对性和功能控制过渡的下一个阶段。 通过从脚本触发的提示转向声明式和用户激活的体验，<usermedia> 减少了样板代码，提高了安全性，并为以前拒绝访问的用户提供无缝的恢复路径，有效解决了长期存在的权限漏洞。 从权限管理到能力控制 <usermedia> 元素是能力元素套件中下一个专用控制，在成功介绍 <geolocation> 后推出。 从原始且通用的 <permission> 提案（PEPC 计划的一部分）过渡，允许浏览器更有效地处理不同硬件能力的独特复杂性和行为。 尽管早期提案主要侧重于管理权限状态，例如允许与拒绝，但能力元素作为数据中介。 <geolocation> 元素为您的网站提供位置对象，而 <usermedia> 管理相机和麦克风访问的整个流程。 它捕获用户意图，管理浏览器提示，并将 MediaStream 对象传递给应用程序。 此变化消除了单独调用 getUserMedia() 的需要，简化了实现，并确保浏览器具有用户意图的可信信号。 概念验证 来自初始原始试验的真实数据表明，上下文中的用户启动的权限控制显著提高了用户成功率。 思科观察到，最初拒绝权限的用户使用传统提示后，仅有约 10% 的可能性成功授予权限，而使用新元素后，该比例跃升至超过 65%。 Zoom 报告使用该元素指导用户通过恢复减少了 46.9% 的相机或麦克风捕获错误，例如系统级阻止；Google Meet 看到 "麦克风失灵" 反馈减少了 17%，而最初拒绝访问的用户成功恢复权限的比例增加了 131%。 基于 <geolocation> 建立的模式，<usermedia> 元素解决了请求强大功能的核心挑战。 媒体请求依赖于通常会触发上下文外提示的指令式 JavaScript 调用。 如果您意外阻止了您的网站，反转该决定需要深入浏览器设置，这是一个常常导致弃用功能的 "权限漏洞"。 <usermedia> 元素通过提供以下内容来解决这些问题： 明确的意图和时机：由于提示仅在物理点击浏览器控制元素后出现，因此它提供了意图的可靠信号。 这允许浏览器绕过自动静默阻止，通常会导致典型的脚本触发请求失败。 简化恢复：如果先前拒绝访问，点击该元素将触发专题恢复流程，使您能够立即在页面上重新启用相机或麦克风，而无需浏览复杂的浏览器设置。 直接流访问：作为数据中介，该元素直接暴露媒体流。 这减少了管理回调和错误状态所需的样板代码。 功能 getUserMedia() JS API <usermedia> HTML 元素 触发权限提示的事件 指令式脚本执行（getUserMedia） 用户单击浏览器控制的元素 浏览器角色 根据状态和启发式决定提示 作为数据中介（管理同意和流交付） 站点责任 手动调用 JavaScript API，处理回调并管理错误 监听流事件并访问流属性 核心目标 基本相机和麦克风访问 流访问、权限管理和减少摩擦的恢复 实现 集成该元素所需的样板代码显著少于传统的 JavaScript API。 遵循<geolocation> 元素建立的声明式模式，您可以将 <usermedia> 标签添加到您的 HTML 中，并使用 setConstraints() 方法配置硬件要求。 <usermedia id="media-ctrl"> <button>启用相机和麦克风</button> </usermedia> const el = document.getElementById('media-ctrl'); // 在用户交互之前指定硬件首选项： el.setConstraints({ video: { width: 1280, height: 720 }, audio: { echoCancellation: true } }); // 处理成功获取流： el.addEventListener('stream', () => { videoPreview.srcObject = el.stream; }); // 处理流获取失败： el.addEventListener('error', () => { console.error('访问失败'); });