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

Sam Dutton

有时，好东西的名字很无趣。

例如：统一媒体流水线（简称 UMP）。

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

借助 UMP，您可以执行以下操作：

  • 使用服务工件缓存音频和视频，因为媒体传送现在直接在 Chrome 中实现，而不是传递给 Android 媒体堆栈。
  • 为音频和视频元素使用 blob 网址。
  • 为音频和视频设置 playbackRate。
  • 在 Web Audio 和 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 一直是一个长期存在的 bug。UMP 可以解决此问题。对于 simpl.info/video/playbackrate 中的演示，playbackRate 设置为 2。试试看！

将 playbackRate 设置为 2 时的视频播放屏幕截图。

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

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

相关代码如下：

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 开发者工具进行调试？移动设备模拟现在使用“真实”音频和视频堆栈。

如果您因统一媒体流水线而遇到问题，请在实现 bug 中提交问题，或通过 new.crbug.com 提交问题。

演示

相关 bug

有几个 bug 会影响 <video>、服务工件和 Cache Storage API：

浏览器支持

  • Chrome 52 及更高版本中默认处于启用状态。