このページは Cloud Translation API によって翻訳されました。

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

Sam Dutton

良いものには退屈な名前が付けられていることもあります。

たとえば、統合メディアパイプライン（UMP）がこれに該当します。

これはソビエト時代の陰謀めいた指示のように聞こえるかもしれませんが、実際には、クロスプラットフォームで音声と動画を安定的に配信するための重要なステップです。Android 版 Chrome では、基盤となるプラットフォームの実装に依存せず、デスクトップ版 Chrome と同じメディアスタックが使用されるようになりました。

UMP では、次のことができます。

メディア配信が Android メディアスタックに渡されるのではなく、Chrome 内に直接実装されるようになったため、Service Worker で音声と動画をキャッシュに保存します。
音声要素と動画要素には blob URL を使用します。
音声と動画に playbackRate を設定します。
Web Audio と MediaRecorder 間で MediaStream を渡す。
デバイス間でメディアアプリの開発とメンテナンスが容易に - メディアはデスクトップと 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 に設定されています。試してみる

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 を使用して再生されます。

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 DevTools でデバッグしている場合: モバイルエミュレーションで「実際の」音声と動画スタックが使用されるようになりました。

統合メディアパイプラインによって問題が発生した場合は、実装バグまたは new.crbug.com で問題を報告してください。

デモ

ブラウザサポート

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

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

デモ

関連するバグ

ブラウザ サポート

ブラウザサポート