Android için Chrome'da ses ve video için Service Worker önbelleğe alma, PlaybackRate ve Blob URL'leri

Sam Dutton

Bazen iyi şeylerin sıkıcı adları vardır.

Bir örnek olarak Birleşik Medya Akış Aracı'nı (kısaltması UMP) gösterebiliriz.

Bu, Sovyet dönemindeki kötü bir talimat gibi gelebilir ancak aslında platformlar arası tutarlı ses ve video yayınlama yolunda önemli bir adımdır. Android'deki Chrome artık temel platform uygulamasına güvenmek yerine masaüstü Chrome ile aynı medya yığınını kullanacak.

UMP ile birçok işlem yapabilirsiniz:

• Medya yayınlama artık Android medya yığınına aktarılmak yerine doğrudan Chrome'da uygulandığından, ses ve videoyu hizmet işçileriyle önbelleğe alın.
• Ses ve video öğeleri için blob URL'leri kullanın.
• Ses ve video için playbackRate değerini ayarlayın.
• Web Audio ile MediaRecorder arasında MediaStreams iletme.
• Medya uygulamaları geliştirme ve yönetme işlemlerini cihazlar arasında daha kolay gerçekleştirin. Medya, masaüstü ve Android'de aynı şekilde çalışır.

UMP'nin uygulanması için yoğun mühendislik çalışmaları yapıldı:

• Daha iyi güç performansı için yeni bir önbelleğe alma katmanı.
• Chrome'un GPU sürecinde barındırılan yeni bir MediaCodec tabanlı video kod çözücü güncellendi.
• Farklı cihazlarda çok sayıda test ve iterasyon.

Hizmet çalışanı ile video önbelleğe alma demosunu aşağıda bulabilirsiniz:

Video dosyasını ve video poster resmini ön beslemeden önce URL'lerinin listesine eklemek yeterlidir:

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

Not: Bu demoda, henüz servis çalışanı tarafından uygulanmayan aralık isteklerini işlemek için bazı köprü kodları vardır.

Android'de playbackRate'ün değiştirilememesi uzun süredir devam eden bir hata. UMP bu sorunu düzeltir. simpl.info/video/playbackrate adresindeki demoda playbackRate 2 olarak ayarlanmıştır. Yenilikleri inceleyin.

UMP, medya öğeleri için blob URL'lerini etkinleştirir. Bu sayede, örneğin Android'de bir video öğesinde MediaRecorder API kullanılarak kaydedilen bir videoyu oynatabilirsiniz:

İlgili kod aşağıda verilmiştir:

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 adresindeki demoda, video File API'leri kullanılarak depolanır ve ardından Blob URL'si kullanılarak oynatılır:

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

Birleştirilmiş Medya Aracı, Medya Kaynağı Uzantıları (MSE) ve Şifrelenmiş Medya Uzantıları (EME) için de etkinleştirildi.

Bu, mobil ve masaüstü Chrome'u birleştirme yolunda atılmış bir adımdır. Kodunuzu değiştirmeniz gerekmez ancak medya paketi platformlar arasında aynı olduğundan masaüstü ve mobil cihazlarda tutarlı bir medya deneyimi oluşturmak artık daha kolay olacaktır. Chrome Geliştirici Araçları ile hata ayıklama Mobil emülasyon artık "gerçek" ses ve video paketini kullanıyor.

Birleşik medya ardışık düzeni nedeniyle sorun yaşıyorsanız lütfen uygulama hatası üzerinden veya new.crbug.com adresinden sorun bildirin.

Demolar

• Hizmet çalışanı ile videoyu önbelleğe alma
• Medya playbackRate
• MediaRecorder: blob URL'si kullanılarak oynatma
• File API'leri ile uygulanan çevrimdışı video

İlgili hatalar

• Birleştirilmiş medya ardışık düzeni ile ilgili sorunları izleme
• UMP Saha Deneme Sürümü
• MSE, EME ve Birleşik Medya Akış Hattı

<video>, hizmet çalışanları ve Cache Storage API'yi etkileyen birkaç hata vardır:

• <video>, mode: cors isteği tetikler ve opak bir hizmet çalışanı yanıtını kabul etmez
• Sarmalama, hizmet çalışanı önbelleği tarafından sunulan videolarda çalışmıyor

Tarayıcı desteği

• Chrome 52 ve sonraki sürümlerde varsayılan olarak etkindir.