Pembuatan cache pekerja layanan, URL PlaybackRate, dan Blob untuk audio dan video di Chrome untuk Android

Sam Dutton

Terkadang hal yang bagus memiliki nama yang membosankan.

Contohnya: Unified Media Pipeline, atau UMP.

Hal ini mungkin terdengar seperti perintah era Soviet yang jahat, tetapi sebenarnya ini adalah langkah penting menuju penayangan audio dan video lintas platform yang konsisten. Chrome di Android kini akan menggunakan stack media yang sama dengan Chrome desktop, bukan mengandalkan implementasi platform yang mendasarinya.

UMP memungkinkan Anda melakukan banyak hal:

• Menyimpan audio dan video dalam cache dengan pekerja layanan, karena pengiriman media kini diterapkan langsung dalam Chrome, bukan diteruskan ke stack media Android.
• Gunakan URL blob untuk elemen audio dan video.
• Tetapkan playbackRate untuk audio dan video.
• Teruskan MediaStreams antara Audio Web dan MediaRecorder.
• Mengembangkan dan mengelola aplikasi media dengan lebih mudah di seluruh perangkat — media berfungsi sama di desktop dan Android.

UMP memerlukan beberapa pekerjaan engineering yang sulit untuk diterapkan:

• Lapisan penyimpanan dalam cache baru untuk meningkatkan performa daya.
• Memperbarui dekoder video berbasis MediaCodec baru yang dihosting dalam proses GPU Chrome.
• Banyak pengujian dan iterasi di berbagai perangkat.

Berikut adalah demo penyimpanan dalam cache video dengan pekerja layanan:

Menyimpan file video dan gambar poster video ke dalam cache semudah menambahkan jalurnya ke daftar URL yang akan dipramuat:

<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',
];

Ketidakmampuan untuk mengubah playbackRate di Android telah menjadi bug lama. UMP memperbaiki hal ini. Untuk demo di simpl.info/video/playbackrate, playbackRate ditetapkan ke 2. Cobalah!

UMP mengaktifkan URL blob untuk elemen media — yang berarti, misalnya, Anda kini dapat memutar video yang direkam menggunakan MediaRecorder API dalam elemen video di Android:

Berikut adalah kode yang relevan:

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

Untuk demo di simpl.info/video/offline, video disimpan menggunakan File API, lalu diputar menggunakan URL Blob:

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 juga telah diaktifkan untuk Media Source Extensions (MSE) dan Encrypted Media Extensions (EME).

Ini adalah langkah lain untuk menyatukan Chrome seluler dan desktop. Anda tidak perlu mengubah kode, tetapi membuat pengalaman media yang konsisten di desktop dan seluler kini akan lebih mudah, karena stack media sama di seluruh platform. Melakukan proses debug dengan Chrome DevTools? Emulasi seluler kini menggunakan stack audio dan video 'sebenarnya'.

Jika Anda mengalami masalah akibat Unified Media Pipeline, laporkan masalah di bug implementasi atau melalui new.crbug.com.

Demo

• Menyimpan video dalam cache dengan pekerja layanan
• Media playbackRate
• MediaRecorder: pemutaran menggunakan URL blob
• Video offline yang diimplementasikan dengan File API

Bug yang relevan

• Melacak masalah untuk Unified Media Pipeline
• Uji Coba Lapangan UMP
• MSE, EME, dan Unified Media Pipeline

Ada beberapa bug yang memengaruhi <video>, service worker, dan Cache Storage API:

• <video> memicu permintaan mode: cors dan tidak akan menerima respons pekerja layanan buram
• Penelusuran tidak berfungsi di video yang ditayangkan oleh cache pekerja layanan

Dukungan browser

• Diaktifkan secara default di Chrome 52 dan yang lebih baru.