Chrome for Android での Service Worker のキャッシュ保存、PlaybackRate、音声と動画の blob URL

良いものには退屈な名前がついてくることもあります。

その一例が、統合型メディア パイプライン、略して UMP です。

これは、ソビエト時代の邪悪な指令のように聞こえるかもしれませんが、実際は、一貫したクロス プラットフォームでのオーディオと動画の配信に向けた重要な一歩です。Android 版 Chrome は、基盤となるプラットフォームの実装に依存するのではなく、パソコンの Chrome と同じメディア スタックを使用するようになります。

UMP には次のようなメリットがあります。

  • メディア配信が Android メディア スタックに渡されるのではなく、Chrome 内に直接実装されるようになったため、音声と動画を Service Worker でキャッシュに保存します。
  • 音声要素と動画要素には blob URL を使用します。
  • 音声と動画には playbackRate を設定します。
  • Web Audio と MediaRecorder の間で MediaStreams を渡します。
  • さまざまなデバイスでより簡単にメディアアプリを開発、管理できます。パソコンでも Android でもメディアは同じように機能します。

UMP の実装には、懸命なエンジニアリング作業が行われました。

  • 電力パフォーマンスを向上させる新しいキャッシュ レイヤ。
  • Chrome の GPU プロセスでホストされる新しい MediaCodec ベースの動画デコーダを更新します。
  • さまざまなデバイスで何度もテストを繰り返す必要があります。

こちらは、Service Worker を使用した動画キャッシュのデモです。

動画再生のスクリーンショット。

動画ファイルと動画ポスター画像のキャッシュ保存は、プリフェッチする URL のリストにそれらのパスを追加するだけで簡単に行えます。

<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 URL が有効になります。つまり、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 URL を使用して再生されます。

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);
}

Unified Media Pipeline も Media Source Extensions(MSE)と Encrypted Media Extensions(EME)で有効になっています

これは、モバイルとパソコンの Chrome の統合に向けた新たな一歩です。コードを変更する必要はありませんが、プラットフォーム間でメディア スタックが同じになるため、パソコンとモバイル全体で一貫したメディア エクスペリエンスの構築がより簡単になります。Chrome DevTools でのデバッグモバイル エミュレーションで、「実際の」オーディオ スタックと動画スタックが使用されるようになりました。

統合メディア パイプラインの結果として問題が発生した場合は、実装バグまたは new.crbug.com から問題を報告してください。

デモ

関連するバグ

<video>、Service Worker、Cache Storage API に影響するバグがいくつかあります。

ブラウザ サポート

  • Chrome 52 以降ではデフォルトで有効になっています。