Chrome（Android 版）音频和视频的 Service Worker 缓存、PlaybackRate 和 Blob 网址

Sam Dutton

有时，好内容会有无聊的名字。

例如：统一媒体管道（简称 UMP）。

这听起来像是苏联时代的邪恶指令，但实际上是朝着一致的跨平台音频和视频传送的重要一步。Android 版 Chrome 现在使用与桌面版 Chrome 相同的媒体堆栈，而不依赖于底层平台实现。

借助 UMP，您可以完成很多工作：

  • 使用 Service Worker 缓存音频和视频，因为媒体传送现在直接在 Chrome 中实现，而不是传递到 Android 媒体堆栈。
  • 对音频和视频元素使用 Blob 网址。
  • 为音频和视频设置 playbackRate。
  • 在网络音频和 MediaRecorder 之间传递 MediaStream。
  • 更轻松地跨设备开发和维护媒体应用，媒体在桌面设备和 Android 上的运作方式是一样的。

UMP 需要完成一些艰苦的工程工作才能实现：

  • 新增了一个缓存层，可提升功耗。
  • 更新了 Chrome GPU 进程中托管的基于 MediaCodec 的新视频解码器。
  • 在不同设备上进行大量测试和迭代。

以下是使用 Service Worker 进行视频缓存的演示：

视频播放的屏幕截图。

缓存视频文件和视频海报图片就像将它们的路径添加到要预提取的网址列表一样简单：

<video controls  poster="static/poster.jpg">
    <source src="static/video.webm" type="video/webm" />
    <p>This browser does not support the video element.</p>
</video>

var urlsToPrefetch = [
    'static/video.webm', 'static/poster.jpg',
];

无法在 Android 上更改 playbackRate 是一个长期错误。UMP 可以解决此问题。对于 simpl.info/video/playbackrate 中的演示，playbackRate 设置为 2。试试看！

playRate 设置为 2 的视频播放的屏幕截图。

UMP 会为媒体元素启用 blob 网址，例如，现在您可以在 Android 设备上的视频元素中播放使用 MediaRecorder API 录制的视频：

使用 MediaRecorder API 录制的视频在 Android 版 Chrome 中播放的屏幕截图

下面是相关代码：

var recordedBlobs = [];

mediaRecorder.ondataavailable = function(event) {
    if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
    }
};

function play() {
    var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
}

在 simpl.info/video/offline 的演示中，视频是使用 File API 存储的，然后使用 Blob 网址播放：

ALT_TEXT_HERE 
function writeToFile(fileEntry, blob) {
    fileEntry.createWriter(function(fileWriter) {
    fileWriter.onwriteend = function() {
        readFromFile(fileEntry.fullPath);
    };
    fileWriter.onerror = function(e) {
        log('Write failed: ' + e.toString());
    };
    fileWriter.write(blob);
    }, handleError);
}

function readFromFile(fullPath) {
    window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function() {
        video.src = URL.createObjectURL(new Blob([this.result]));
        };
        reader.readAsArrayBuffer(file);
    }, handleError);
    }, handleError);
}

统一媒体流水线也已为媒体来源扩展 (MSE) 和加密媒体扩展 (EME) 启用。

这是我们在统一移动版 Chrome 和桌面版 Chrome 过程中又迈出的一步。您无需更改代码，但现在应该能够更轻松地跨桌面设备和移动设备打造一致的媒体体验，因为各平台的媒体堆栈是相同的。要使用 Chrome 开发者工具进行调试吗？移动设备模拟现在使用“实际”音频和视频堆栈。

如果您遇到由统一媒体管道引起的问题，请通过实现错误或通过 new.crbug.com 提交问题。

样本歌曲

相关 bug

下面是一些会影响 <video>、Service Worker 和 Cache Storage API 的错误：

浏览器支持

  • Chrome 52 及更高版本中默认启用。