广泛部署的技术

音频/视频播放

HTML5 新增的 <video><audio> 标签极大地改善了 Web 对多媒体内容的集成能力。它们允许将音频和视频内容无插件的嵌入到 Web 上,并允许开发者与音视频内容进行更加自由地交互。这些标签使得音频和视频内容成为 Web 上的一等公民,就像 Web 上已经存在了二十多年的图片一样。

生成媒体内容

媒体源扩展可以让开发人员用 JavaScript 缓冲和生成媒体内容,播放内容可以通过媒体源扩展被流化、增强以及补充完整,这就使得Web应用程序开发人员创建能够处理自适应流格式和协议的库。

受保护的内容播放

对于那些需要对内容进行特定保护的媒体分发,加密媒体扩展使 Web 应用可以渲染基于内容加密模块的加密媒体流。

捕捉音频/视频

随着新的HTML5标签允许播放多更多媒体内容,HTML媒体捕捉定义了一个基于标记的机制,使用移动设备上常见的附加相机和麦克风来获取捕捉到的多媒体内容。通过媒体捕捉与媒体流API可以直接处理来自摄像机和麦克风的媒体流

图像和视频的分析和修改

画布2D上下文 API 允许修改图像,这也为编辑视频开启了可能,并为 Web 平台带来了多媒体处理的能力。

特性规范 / 小组成熟度现有实现
选择浏览器…
音频/视频播放HTML标准中的video 元素 (video element in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
HTML标准中的audio 元素 (audio element in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准
生成媒体内容媒体源扩展™ (Media Source Extensions™)
媒体工作组 (Media Working Group)
工作草案
受保护的内容播放加密媒体扩展 (Encrypted Media Extensions)
媒体工作组 (Media Working Group)
正式推荐标准
捕捉音频/视频HTML媒体捕捉 (HTML Media Capture)
设备与传感器工作组 (Devices and Sensors Working Group)
正式推荐标准
媒体捕捉与媒体流 (Media Capture and Streams)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准
图像和视频的分析和修改HTML标准中的The 2D rendering context (The 2D rendering context in HTML Standard)
Web 超文本应用技术工作小组 (WHATWG)
持续更新标准

开发中的技术

音频播放

<audio> 元素启用的声明性方法之外,Web 音频 API 提供了一个成熟的音频处理API,包括对音频内容低延迟播放的支持。

分布式渲染

随着用户拥有的互联设备的增多,这些设备之间协同工作的需求也随之增涨:

  • 呈现 API 使网页可以从移动设备打开并控制位于另一个屏幕上的页面,为多屏 Web 应用开辟了道路。
  • 远程回放 API 更专注于控制单独设备上的媒体呈现。
  • 开放屏幕协议是一套允许控制和接收设备以可互操作的方式实现呈现 API 和远程回放 API 的网络协议。
  • 画中画规范将允许应用在一个其他活动之上都可以看到的单独微型窗口中启动和控制视频的呈现。
  • 音频输出设备 API 为音频流提供了类似的功能,使 Web 应用能够选择在哪个音频输出设备上播放给定的声音。

媒体处理能力

移动设备具有广泛的解码(和编码)能力。为了改进用户体验,并在可用时利用先进的设备功能,媒体提供方需要知道用户的设备特定的编解码器是否可以解码一个给定的分辨率、码率或帧率。播放是否流畅和省电?HDR和宽色域内容是否可以呈现?媒体能力规范定义了一个暴露这些信息的 API,以便替换掉 HTML 中比较基础且不够明确的 isTypeSupported()canPlayType() 功能。

媒体提供者同样也需要一个机制来获取用户所感知的播放质量,以便通过自适应流改变传输内容的质量。媒体播放质量规范最初是媒体源扩展规范的一部分,可以显示出显示或丢弃的帧的数量。

媒体聚焦

移动设备常常在锁屏或通知区域有快捷方式来处理主应用程序(例如音乐播放器)的音频输出。底层操作系统负责确定哪些应用程序应该具有媒体焦点。媒体会话规范可以将这些焦点的变化暴露给Web应用。

自动播放

为了在移动设备上节约流量、内存和电池使用,并防止可能不需要的媒体播放,浏览器已经制定了自动播放策略,并且可能拒绝自动播放媒体内容。自动播放策略检测规范是一个让应用知道某个媒体元素的自动播放是否会成功的早期提案。

VR头盔中的渲染

WebXR 设备 API 规范是一个允许应用通过 JavaScript 访问和控制头戴式显示器,并创建引人注目的虚拟现实(VR)/增强现实(AR)体验的底层 API,这是使360°的视频内容能够在虚拟现实头盔和移动设备中使用的关键。

捕捉音频/视频

Web实时通讯工作组开发了记录来自相机和麦克风的媒体流的API,以及通过程序访问相机并拍照的API

点对点连接以及音视频流

Web实时通讯工作组目前还负责的相关工作如下:

  • 跨设备的点对点通讯
  • 内容提示允许Web应用提示媒体内容的类型(例如语音、音乐、电影、屏幕录制等),以便用户代理可以优化编码或处理参数,
  • 可伸缩视频编码(SVC),允许Web应用配置编码参数以利用SVC(视频流的子集可以从丢弃较大的视频流中的数据包派生而来),从而使从单一初始视频流向多个目标提供不同播放质量的视频更加容易,
  • 允许用户间实时通讯的P2P音视频流
特性规范 / 小组成熟度现有实现
选择浏览器…
音频播放Web 音频 API (Web Audio API)
音频工作组 (Audio Working Group)
正式推荐标准
分布式渲染呈现 API (Presentation API)
第二屏工作组 (Second Screen Working Group)
候选推荐标准
远程回放 API (Remote Playback API)
第二屏工作组 (Second Screen Working Group)
候选推荐标准
开放屏幕协议 (Open Screen Protocol)
第二屏工作组 (Second Screen Working Group)
工作草案
画中画 (Picture-in-Picture)
媒体工作组 (Media Working Group)
工作草案
音频输出设备 API (Audio Output Devices API)
Web 实时通讯工作组 (WebRTC Working Group)
候选推荐标准
媒体处理能力媒体能力 (Media Capabilities)
媒体工作组 (Media Working Group)
工作草案
媒体播放质量 (Media Playback Quality)
媒体工作组 (Media Working Group)
编辑草案
媒体聚焦媒体会话标准 (Media Session Standard)
媒体工作组 (Media Working Group)
工作草案
自动播放自动播放策略检测 (Autoplay Policy Detection)
媒体工作组 (Media Working Group)
编辑草案
VR头盔中的渲染WebXR 设备 API (WebXR Device API)
沉浸式Web工作组 (Immersive Web Working Group)
候选推荐标准
捕捉音频/视频流媒体录制 (MediaStream Recording)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案
MediaStream Image Capture
Web 实时通讯工作组 (WebRTC Working Group)
工作草案
点对点连接以及音视频流WebRTC 1.0: Real-Time Communication Between Browsers
Web 实时通讯工作组 (WebRTC Working Group)
正式推荐标准
MediaStreamTrack 内容提示 (MediaStreamTrack Content Hints)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案
WebRTC 可伸缩视频编码(SVC)扩展 (Scalable Video Coding (SVC) Extension for WebRTC)
Web 实时通讯工作组 (WebRTC Working Group)
工作草案

探索性工作

分布式渲染

多设备时计社区组目前正在探索多设备媒体渲染的另一方面:时计对象规范允许在跨设备并独立于网络拓扑的同时,保持视频、音频和其他数据流的同步性。这项努力需要更多有关方面的支持来取得进展。

不同色彩空间的渲染

新的移动屏幕可以通过使用比传统的sRGB色彩空间更广泛的色彩空间提供高分辨率的内容。为了适应宽色域显示,Web的所有图形系统都需要适应这些更广泛的色彩空间。CSS 色彩第四版 提议定义在经典sRGB色彩空间之外的CSS色彩。同样,关于 canvas 的色彩管理的工作将加强对 HTML canvas 的多色彩支持。

Web上的色彩社区组开发的文档——Web上的高动态范围和宽色域分析了在Web上支持高动态范围(HDR)和宽色域(WCG)的技术差距和可能的下一步计划,例如允许网页中的 HDR 视频内容与周围或覆盖的图形和文本内容之间的色彩和亮度匹配的机制。

视频处理

WebCodecs 提案提供对内置(软件和硬件)媒体编码器和解码器的高效底层访问,以更好地支持特定的编解码方案,例如点对点音视频会议、低延迟游戏直播或客户端媒体效果和转码,使开发者不必依赖 JavaScript 或 WebAssembly 的编解码器实现,因为这些实现在 CPU、内存、电池和带宽使用方面的成本更高。

使用 Canvas API 进行视频处理非常耗费 CPU 资源。除了传统的视频处理之外,现代 GPU 通常提供具有直接适用于增强现实应用程序的先进视觉处理能力(例如脸部和物体识别)。加速的图形识别正在探索这个空间。

音频播放

即使引入了 audio worklet,底层音频处理仍然受到 Web 音频 API 的渲染机制的限制。音频设备客户端提案作为 Web 音频 API 和浏览器使用的实际音频设备之间的中间层,可通过可配置参数(如采样率、回调缓冲区大小和通道数)更直接地访问音频硬件,同时可在专用线程中进行处理。

特性规范 / 小组实现意向
选择浏览器…
分布式渲染时计对象 (Timing Object)
多设备时计社区组 (Multi-Device Timing Community Group)
不同色彩空间的渲染CSS 色彩第四版中的与设备相关的色彩系统 (profiled device-dependent colors in CSS Color Module Level 4)
CSS 工作组 (CSS Working Group)
canvas 的色彩管理 (Color managing canvas contents)
Web上的高动态范围和宽色域 (High Dynamic Range and Wide Gamut Color on the Web)
Web上的色彩社区组 (Color on the Web Community Group)
视频处理WebCodecs
Web 平台孵化社区组 (Web Platform Incubator Community Group)
加速的图形识别 (Accelerated Shape Detection in Images)
Web 平台孵化社区组 (Web Platform Incubator Community Group)
音频播放音频设备客户端 (Audio Device Client)
音频社区组 (Audio Community Group)

目前尚未覆盖的工作

360°视频渲染的原生支持
虽然已经有可能在 <video> 元素中呈现360°视频,但是对360°视频渲染的集成支持将允许隐藏底层自适应流媒体逻辑到应用的复杂性,让浏览器本身能够优化流媒体和渲染。
Canvas API 提供了执行图像和视频处理的功能,但这些功能受限于其对 CPU 执行的依赖性;现代 GPU 为广泛的操作提供硬件加速,但是浏览器不提供这些操作的钩子。GPU for the Web 社区组正在讨论将 GPU 计算功能开放给 Web 应用的解决方案,这可能最终允许 Web 应用利用 GPU 的能力有效地处理视频流。

不再进行的工作

网络服务发现
网络服务发现API通过提供与本地基于网络的媒体渲染器的集成,如 DLN 及 UPnP 等,为建立多设备操作提供较底层的方法。出于对隐私保护的顾虑及缺乏实现,这项工作没有继续下去。目前的解决方案是用户用代理来处理底层的网络发现,就像在呈现 API远程回放 API 中处理的那样。
WebVR
允许访问和控制虚拟现实(VR)设备并且在某些浏览器中已实现的 WebVR 规范的开发已停止,以支持 WebXR 设备 API,该 API 将工作范围扩展到增强现实(AR)设备。