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

有時候,好東西的名稱很無趣。

典範案例:統一媒體管道,UMP

這聽起來雖然聽起來像是瘋狂的蘇聯時代指令,但在這個階段,提供一致的跨平台音訊和影片傳遞服務,可說是不可或缺的一環。Android 版 Chrome 現在會使用與電腦版 Chrome 相同的媒體堆疊,不再依賴基礎平台實作。

UMP 提供許多功能:

  • 使用服務工作處理程序快取音訊和視訊,因為媒體傳輸現在是直接在 Chrome 中實作,而不是傳遞至 Android 媒體堆疊。
  • 為音訊和影片元素使用 blob 網址。
  • 為音訊和視訊設定 playbackRate
  • 在網路音訊和 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。快來體驗看看!

影片播放的螢幕截圖,播放率設為 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) 和 Encrypted Media Extensions (EME) 啟用

這是整合行動版和電腦版 Chrome 的另一個步驟。您不需要變更程式碼,但現在應該可以更輕鬆地在電腦和行動裝置上打造一致的媒體體驗,因為所有平台的媒體堆疊都相同。使用 Chrome 開發人員工具進行偵錯?行動模擬功能現在採用的是「真實」音訊和影片堆疊。

如果整合媒體管道發生問題,請洽詢導入錯誤或透過 new.crbug.com 回報問題。

試聽帶

相關錯誤

有幾個錯誤會影響 <video>、Service Worker 和 Cache Storage API:

瀏覽器支援

  • 系統預設會在 Chrome 52 以上版本中啟用。