Mise en cache du service worker, PlaybackRate et des URL Blob pour l'audio et la vidéo sur Chrome pour Android

Sam Dutton

Parfois, les bonnes choses ont des noms ennuyeux.

Exemple concret: le pipeline multimédia unifié, ou UMP.

Cela peut sembler être une directive sinistre de l'ère soviétique, mais en réalité, il s'agit d'une étape importante vers la diffusion audio et vidéo multiplate-forme cohérente. Chrome sur Android utilisera désormais la même pile multimédia que Chrome pour ordinateur, au lieu de s'appuyer sur l'implémentation de la plate-forme sous-jacente.

UMP vous permet de faire beaucoup de choses:

• Mise en cache de l'audio et de la vidéo avec les service workers, car la diffusion multimédia est désormais implémentée directement dans Chrome plutôt que transmise à la pile multimédia Android.
• Utilisez des URL de blob pour les éléments audio et vidéo.
• Définissez playbackRate pour l'audio et la vidéo.
• Transmettez des MediaStreams entre Web Audio et MediaRecorder.
• Développez et gérez plus facilement des applications multimédias sur différents appareils. Les contenus multimédias fonctionnent de la même manière sur ordinateur et sur Android.

L'implémentation de l'UMP a nécessité un travail d'ingénierie important:

• Nouvelle couche de mise en cache pour améliorer les performances énergétiques.
• Mise à jour d'un nouveau décodeur vidéo basé sur MediaCodec hébergé dans le processus du GPU de Chrome.
• De nombreux tests et itérations sur différents appareils.

Voici une démonstration du stockage en cache de vidéos avec un service worker:

Pour mettre en cache le fichier vidéo et l'image de l'affiche de la vidéo, il vous suffit d'ajouter leurs chemins d'accès à la liste des URL à précharger:

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

Remarque:Cette démonstration contient du code de shim pour gérer les requêtes de plage, qui ne sont pas encore implémentées par le service worker.

L'impossibilité de modifier playbackRate sur Android est un bug de longue date. UMP résout ce problème. Pour la démonstration sur simpl.info/video/playbackrate, playbackRate est défini sur 2. Essayez !

UMP permet d'utiliser des URL de blob pour les éléments multimédias. Vous pouvez donc, par exemple, lire une vidéo enregistrée à l'aide de l'API MediaRecorder dans un élément vidéo sur Android:

Voici le code concerné:

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

Pour la démonstration disponible sur simpl.info/video/offline, la vidéo est stockée à l'aide des API File, puis lue à l'aide d'une URL de 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);
}

Le pipeline multimédia unifié a également été activé pour les extensions Media Source (MSE) et Encrypted Media Extensions (EME).

Il s'agit d'une nouvelle étape vers l'unification de Chrome sur mobile et sur ordinateur. Vous n'avez pas besoin de modifier votre code, mais il devrait désormais être plus facile de créer une expérience multimédia cohérente sur ordinateur et mobile, car la pile multimédia est la même sur toutes les plates-formes. Déboguer avec les outils pour les développeurs Chrome ? L'émulation mobile utilise désormais la pile audio et vidéo "réelle".

Si vous rencontrez des problèmes liés au pipeline multimédia unifié, veuillez signaler les problèmes sur le bug d'implémentation ou via new.crbug.com.

Démonstrations

• Mettre en cache une vidéo avec un service worker
• Multimédia playbackRate
• MediaRecorder: lecture à l'aide d'une URL de blob
• Vidéo hors connexion implémentée avec les API File

Bugs pertinents

• Suivi des problèmes liés au pipeline multimédia unifié
• Test sur le terrain de l'UMP
• MSE, EME et le pipeline multimédia unifié

Plusieurs bugs affectent <video>, les service workers et l'API Cache Storage:

• <video> déclenche une requête mode: cors et n'accepte pas de réponse de service worker opaque
• La recherche ne fonctionne pas dans les vidéos diffusées par le cache du service worker

Prise en charge des navigateurs

• Activé par défaut dans Chrome 52 et versions ultérieures.