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

Sam Dutton

Terkadang hal yang baik memiliki nama yang membosankan.

Contoh kasus: Unified Media Pipeline, disingkat UMP.

Perintah ini mungkin terdengar seperti perintah yang jahat dari era Uni Eropa, tetapi sebenarnya ini adalah langkah penting untuk menghasilkan 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.

Dengan UMP, Anda dapat melakukan banyak hal:

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

UMP membutuhkan beberapa kerja engineering untuk menerapkan:

• Lapisan cache baru untuk meningkatkan performa daya.
• Mengupdate dekoder video berbasis MediaCodec baru yang dihosting di proses GPU Chrome.
• Banyak pengujian dan iterasi pada perangkat yang berbeda.

Berikut adalah demo penyimpanan video ke cache dengan pekerja layanan:

Menyimpan gambar ke cache file video dan gambar poster video semudah menambahkan jalurnya ke daftar URL untuk pengambilan data:

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

Catatan: Ada beberapa kode shim dalam demo ini untuk menangani permintaan rentang, yang belum diimplementasikan oleh pekerja layanan.

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

UMP mengaktifkan URL blob untuk elemen media — yang artinya, misalnya, sekarang Anda 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 membangun pengalaman media yang konsisten di desktop dan seluler sekarang akan menjadi lebih mudah, karena tumpukan medianya sama di seluruh platform. Melakukan debug dengan Chrome DevTools? Emulasi seluler kini menggunakan stack audio dan video 'nyata'.

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

Demo

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

Bug yang relevan

• Masalah pelacakan untuk Pipeline Media Terpadu
• Uji Coba Lapangan UMP
• RKG, EME, dan Pipeline Media Terpadu

Ada beberapa bug yang memengaruhi <video>, pekerja layanan, dan Cache Storage API:

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

Dukungan browser

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