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

Bazen iyi şeylerin sıkıcı adları olur.

Buna örnek olarak Birleştirilmiş Medya Ardışık Düzeni (kısaca UMP) verilebilir.

Bu, Sovyet döneminin uğursuz bir direktifi gibi gelebilir, ancak aslında platformlar arası tutarlı ses ve video yayını için önemli bir adımdır. Android üzerinde Chrome artık temel platform uygulamasına bağlı kalmak yerine, masaüstü Chrome ile aynı medya yığınını kullanacaktır.

UMP ile pek çok şey yapabilirsiniz:

  • Medya teslimi artık Android medya yığınına yönlendirilmek yerine doğrudan Chrome'un içinde uygulandığı için hizmet çalışanlarıyla ses ve videoyu önbelleğe alın.
  • Ses ve video öğeleri için blob URL'lerini kullanın.
  • Ses ve video için playbackRate ayarlayın.
  • MediaStream'leri Web Audio ve MediaRecorder arasında aktarın.
  • Medya uygulamalarını cihazlar arasında daha kolay bir şekilde geliştirin ve yönetin. Medya, masaüstü ve Android cihazlarda aynı şekilde çalışır.

UMP'nin uygulaması için ciddi mühendislik çalışmaları yaptık:

  • İyileştirilmiş güç performansı için yeni bir önbelleğe alma katmanı.
  • Chrome'un GPU işleminde barındırılan, MediaCodec tabanlı yeni bir video kod çözücüyü güncelleme.
  • Farklı cihazlarda pek çok test ve yineleme.

Bir hizmet çalışanıyla videoyu önbelleğe alma demosunu burada bulabilirsiniz:

Video oynatma ekran görüntüsü.

Video dosyasını ve video poster görüntüsünü önbelleğe almak için tek yapmanız gereken bunların yollarını önceden getirilecek URL listesine eklemektir:

<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'de playbackRate ürününün değiştirilememesi uzun zamandır devam eden bir hata. UMP bu sorunu düzeltir. simpl.info/video/playbackrate adresindeki demo için playbackRate değeri 2 olarak ayarlanmıştır. Yenilikleri inceleyin.

playRate değeri 2 olarak ayarlanmış video oynatma ekran görüntüsü.

UMP, medya öğeleri için blob URL'lerini etkinleştirir. Bu, örneğin, artık Android'deki bir video öğesinde MediaRecorder API'sı kullanılarak kaydedilen bir videoyu oynatabileceğiniz anlamına gelir:

MediaRecorder API kullanılarak kaydedilen bir videonun Android üzerinde Chrome&#39;da oynatılmasına ilişkin ekran görüntüsü

İlgili kod şudur:

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 demo için video Dosya API'ları kullanılarak depolanır ve ardından bir Blob URL'si kullanılarak oynatılır:

ALT_TEXT_HERE
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 Ardışık Düzeni, Medya Kaynağı Uzantıları (MSE) ve Şifrelenmiş Medya Uzantıları (EME) için de etkinleştirilmiştir.

Bu, mobil ve masaüstü Chrome'u birleştirme yolunda bir adımdır. Kodunuzu değiştirmeniz gerekmez. Ancak medya yığını platformlar arasında aynı olduğundan masaüstü ve mobil genelinde 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 grubunu kullanmaktadır.

Birleştirilmiş Medya Ardışık Düzeni nedeniyle sorun yaşarsanız lütfen sorunları uygulama hatası sayfasında veya new.crbug.com adresinden bildirin.

Demolar

İlgili hatalar

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

Tarayıcı desteği

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