一般的印象中，Web的多媒体能力也许就是播放音/视频，其实，远不止于此。我们来看看Web应用可以使用哪些多媒体能力，实现什么样的多媒体功能。

1 本地媒体设备音/视频采集

js可以通过调用一组特定的APIs采集摄像头影像信息、麦克风音频信息。

相关的标准

Media Capture and Streams - 定义了一组 JavaScript APIs，通过这些APIs，页面可以请求本地的视频/音频。

Media Capture Depth Stream Extensions - 上一个标准的扩展，允许Web应用请求depth-only stream 或者 depth+color stream 。

depth信息包含了摄像头看到的物体到摄像头的距离信息，有了这样的信息，页端或Web应用可以把手势做为一种输入机制，可以对现实环境做3D建模，从而实现一些高级功能。

一些具体的应用，比如：沉浸式游戏体验，3D视频会议，增强现实等。

2 远程播放控制

简单的讲，就是在Web页面上实现一个类似遥控器的东东，通过这个遥控器来控制媒体在远程设备上的播放。

远程设备：例如连接的TVs，放映机，扬声器等。这些设备通过有线技术（HDMI，DVI等）和无线技术（Miracast, Chromecast, DLNA, AirPlay, or similar）连接到设备，使得Web可见。

Remote Playback API - 定义了一组可以在Web页面对远程媒体播放进行控制的APIs。

具体的应用，比如：页端视频投屏到DLNA电视上播放。

3 媒体播放控制

通过给<video>设置不同的属性，可以对播放行为进行控制，比如自动部分，静音，循环播放，预载入等。

为了降低电源消耗，设置了autoplay和muted的<video>只有在它变得可见的时候才会开始播放，不可见的时候会暂停播放。

自动播放的行为可能随著内核版本的变化而变化

4 定制媒体通知

Media Session API – 通过这个API，我们显示一条关于Web正在播放的媒体通知信息。

类似这样：

这在后台播放音乐的场景很有用。实例

5 Media Source Extensions

允许JavaScript控制媒体资源的载入，然后交由HTML 5播放器进行播放。这样前端可以定制一些业务，比如自适应码率，插入广告，实现直播等等。

相关标准： Media Source Extensions

各主流视频网站都已支持MSE，包括youtube, 优酷，爱奇异。

6 音频处理与合成

比如复杂的混音，各种声效处理，平移等。目标是使Web具备现代游戏音频引擎具备的能力，和能够执行桌面音频应用具有的一些合成，处理，过滤任务。其它功能包括：

在需要的时候暂停音频设备；

Web Audio API - 提供了一个简单而强大的机制来实现和处理Web应用内的音频内容。

这里有很多利用Web Audio的实例

具体的应用，比如我们可以实现一个电子琴。

7 播放版权受限的媒体

版权的控制会越来越严，好莱坞相关的视频大多需要支持DRM，要播放这样的媒体就需要EME支持。

Encrypted Media Extensions (EME) - 提供了用于控制受数字版权管理方案限制的内容播放的介面。在Web浏览器和DRM代理软体之间提供通信通道。EME作为一个应用编程介面（API），可以直接播放网页浏览器中受保护的内容。

8 编码音/视频流

可以通过浏览器对音/视频进行编码

比如我们可以写一个页面，用户可以自拍一段视频，然后保存为mp4，并提供下载。

这个功能一般是实验性功能，浏览器通常默认是不支持的。

9 播放相关功能

HTMLMediaElement.play() returns a promise - 许多移动浏览器不允许JavaScript执行自动播放（处于带宽和隐私的考虑）。有的页面可能无法知道这一点，以为自动播放成功了，从而没有提供播放按钮，导致无法播放视频。play方法返回promise，提供了一种优化的方式，使页面知道是否播放成功。实例

MediaError.message - 播放出错的情况下，内核会通过error事件通知页面具体的出错信息，以帮助前端进行调试。实例

10 投屏播放

定义了一组APIs, Web应用可以访问投屏设备，把Web内容呈现在投屏设备上。

Presentation API - 目标是使得Web可以访问投屏设备。

投屏设备包括：投影机、显示器、通过网路连接的电视等。还有其它通过有线（HDMI, AVI等类似技术）和无线（Miracast, Chromecast, DLNA, AirPlay等类似技术）连接的设备。

实例

11 从图像/视频设备上获取图像

有方便、易用的介面可以直接从摄像头这样的设备上获取图像。

实例

12 支持主流的音/视频格式

像vp9, h264, h265这些。具体是哪些格式，后面有文章专门阐述。

13 Capture a MediaStream From Canvas, Video or Audio Element

通过captureStream() 方法，我们可以从<canvas>, <audio> or <video> 元素capture a MediaStream。这是什么概念呢？换句话说，这使来自任何这些元素的视频或音频流都可以被录制，通过WebRTC进行实时流式传输，或者与特效或其他MediaStream结合在<canvas>中。要实现适时视频对话这样的场景，就很简单了。

具体的应用，比如：

  • 录制<canvas>中的游戏视频
  • 从摄像头采集视频，并添加额外的内容和特效
  • 通过过<canvas>实现多个视频的画中画效果

实例

14 AudioWorklet

AudioWorklet对象允许开发者提供脚本（例如JavaScript或WebAssembly代码）来在渲染线程上处理音频（不阻塞主JavaScritp执行环境），支持自定义音频节点。

通过这样的介面，web 开发者可以提供自己的音频处理代码，扩展platform本身的能力，具有更大的自主性。通过WebAssembly代码也有利于改进音频处理的效率。

AudioWorklet

15 获取详细的媒体支持能力信息

输入音/视频格式，解析度，帧率，码率等信息，输出支持程度：supported, smooth, powerEfficient 。

这可以帮助前端在选择媒体流时做出最优的决策。

实例

16 WebRTC

浏览器中的适时通信支持。用于像适时语音通信，直播互动这样的场景。

通过WebRTC，我们可以共享数据，实现peer-to-peer电话会议，而不需要安装什么插件和第三方软体。

WebRTC API

17 WebVTT 字幕支持

支持显示WebVTT 字幕，可以显示或关闭字幕，提供多语言字幕支持。

WebVTT


推荐阅读：
相关文章