在 Android 版 Google Chrome 中，針對音訊和影片的 Service Worker 快取、PlaybackRate 和 Blob 網址

Sam Dutton

有時好東西的名稱會很無聊。

舉例來說，統一媒體管道 (簡稱 UMP)。

這聽起來可能像是蘇聯時代的陰謀，但其實這是朝向跨平台一致的音訊和影片提交方式邁進的重要一步。Android 版 Chrome 現已改用與電腦版 Chrome 相同的媒體堆疊，不再仰賴底層平台實作。

UMP 可讓您執行許多操作：

  • 使用服務工作者快取音訊和視訊，因為媒體提交作業現在會直接在 Chrome 中實作，而非傳送至 Android 媒體堆疊。
  • 為音訊和視訊元素使用 Blob 網址。
  • 將 playbackRate 設為音訊和視訊。
  • 在 Web Audio 和 MediaRecorder 之間傳遞 MediaStreams。
  • 在不同裝置上更輕鬆地開發及維護媒體應用程式，因為電腦和 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。快來體驗看看吧！

螢幕截圖：將 playbackRate 設為 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);
}

Media Source Extensions (MSE) 和 Encrypted Media Extensions (EME) 也已啟用統一媒體管道。

這也是我們朝著統一行動版和電腦版 Chrome 邁進的另一步。您不需要變更程式碼，但現在應該更容易在電腦和行動裝置上打造一致的媒體體驗，因為媒體堆疊在各平台上都是相同的。使用 Chrome 開發人員工具進行偵錯？行動模擬現在使用「真實」的音訊和視訊堆疊。

如果您因為統一媒體管道而遇到問題，請在實作錯誤或 new.crbug.com 上回報問題。

示範

相關錯誤

有幾個錯誤會影響 <video>、服務工作者和 Cache Storage API：

瀏覽器支援

  • 在 Chrome 52 以上版本中預設為啟用。