导语
2025年3月,万维网联盟(W3C)内部流出一份技术草案,提议在HTML标准中新增一个名为<usermedia>的专用元素,旨在将过去依赖复杂JavaScript API的摄像头、麦克风等用户媒体设备调用,转化为声明式的标签语言。如果这一提案最终通过,Web开发者将能像插入一张图片或一段视频那样,轻松地将用户实时音视频流嵌入网页——这被视为Web平台在“权限感知型UI”领域迈出的关键一步。

背景:从getUserMedia到“声明式媒体”

长期以来,网页调用用户摄像头或麦克风必须借助navigator.mediaDevices.getUserMedia() API,开发者需要编写异步代码处理权限请求、设备选择、流管理以及错误回调。尽管WebRTC已较为成熟,但其门槛依然较高,尤其对于非精通JavaScript的前端新手而言。而像<input type="file" capture>这样的原生元素虽然能拍照或录像,但无法提供实时流,也难以进行二次处理。

W3C内部多个工作组近年一直在探索“声明式媒体”路径,希望将媒体获取行为从脚本层剥离,直接交由浏览器内核处理。<usermedia>元素正是这一思想的具象化产物。

新元素核心特性

根据草案描述,<usermedia>是一个空元素(类似<img>),通过属性控制媒体源与行为。其关键属性包括:

  • src:可指定为"camera""microphone""camera+microphone",或更细粒度的设备ID。
  • constraints:接收JSON字符串,对应标准MediaTrackConstraints,如{video:{width:1280,height:720}}
  • autoplaymuted:与<video>类似,控制自动播放及静音。
  • capture:布尔属性,表示是否在用户确认后立即开始捕获。

浏览器在解析到<usermedia>时,会主动触发权限弹窗(类似地理位置请求),用户同意后,该元素在DOM中表现为一个MediaStream的直接消费者。开发者只需通过element.stream属性即可获得流对象,或直接使用<usermedia>作为<canvas><video>的输入源——无需编写一行JavaScript。

安全与隐私设计:权限强制分离

草案特别强调安全性。<usermedia>元素的权限请求不可自动静默通过,且必须在用户手势(如点击)的事件循环中触发。此外,浏览器必须提供“持久化授权”的UI选项,用户可随时在站点信息面板中撤销对该元素的媒体权限。

更值得注意的是,<usermedia>产生的流默认不允许被跨域访问,除非目标页面通过allow="camera *"的CSP策略明确授权。这一设计有效防止了第三方脚本在用户不知情的情况下窃取音视频流。

业界反响:喜悦与争议并存

消息一出,国外前端社区迅速展开讨论。知名WebRTC专家、谷歌工程师Jesper Kristensen在社交媒体上表示:“这是Web平台从‘指令式’走向‘声明式’的又一个里程碑。<usermedia>将让构建视频会议、AR滤镜、语音输入等功能的门槛降到极低。”

但也有安全研究员持保留态度。独立研究员Sophie Turner指出:“虽然权限弹窗机制看似安全,但恶意站点完全可能设计欺诈性UI诱导用户点击‘允许’。浏览器需要更严格的提示——例如在顶层域名变化时重新请求权限。”

此外,部分开发者担心该元素会降低灵活性。比如无法在授权前预览设备画面或设置自定义UI。W3C回应称,高级用例仍可回退至getUserMedia<usermedia>仅定位为80%通用场景的解决方案。

未来展望:或于HTML 6中正式亮相

目前该草案尚处于“非正式社区草稿”阶段,预计最快将在2026年纳入HTML 6的候选推荐标准。如果在广泛测试中未发现严重安全问题,Chrome、Edge、Firefox均已表态有意优先实现。

可以预见,一旦<usermedia>落地,视频聊天、在线面试、虚拟背景、语音搜索等功能的开发将迎来“标签化”时代,前端工程师的平均媒体处理代码量有望减少80%以上。而对用户而言,每一次摄像头调用都会变得更透明、可预期——这或许是Web平台向“可信赖计算”迈进的一个小而坚实的脚印。