良いものには退屈な名前がついてくることもあります。
その一例が、統合型メディア パイプライン、略して 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 に設定されています。試してみましょう。
UMP では、メディア要素の blob URL が有効になります。つまり、Android では、動画要素で 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 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);
}
Unified Media Pipeline も Media Source Extensions(MSE)と Encrypted Media Extensions(EME)で有効になっています。
これは、モバイルとパソコンの Chrome の統合に向けた新たな一歩です。コードを変更する必要はありませんが、プラットフォーム間でメディア スタックが同じになるため、パソコンとモバイル全体で一貫したメディア エクスペリエンスの構築がより簡単になります。Chrome DevTools でのデバッグモバイル エミュレーションで、「実際の」オーディオ スタックと動画スタックが使用されるようになりました。
統合メディア パイプラインの結果として問題が発生した場合は、実装バグまたは new.crbug.com から問題を報告してください。
デモ
- Service Worker で動画をキャッシュに保存する
- メディア
playbackRate
- MediaRecorder: blob URL を使用した再生
- File API を使用して実装されたオフライン動画
関連するバグ
<video>
、Service Worker、Cache Storage API に影響するバグがいくつかあります。
<video>
が mode: cors リクエストをトリガーし、Service Worker の不透明なレスポンスを受け入れない- Service Worker のキャッシュによって配信される動画でシークが機能しない
ブラウザ サポート
- Chrome 52 以降ではデフォルトで有効になっています。