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.

Voici un exemple concret: le pipeline Unified Media Pipeline (UMP).

Cela peut ressembler à une sinistre directive de l'ère soviétique, mais il s'agit en fait d'une étape importante pour assurer une diffusion cohérente de contenus audio et vidéo sur plusieurs plates-formes. 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.

L'UMP vous offre de nombreuses possibilités:

• Mettez en cache les contenus audio et vidéo avec les service workers, car la diffusion multimédia est désormais implémentée directement dans Chrome au lieu d'être transmis à la pile multimédia Android.
• Utilisez des URL d'objets blob pour les éléments audio et vidéo.
• Définissez playbackRate pour l'audio et la vidéo.
• Transmettre des MediaStreams entre Web Audio et MediaRecorder
• Développez et gérez des applications multimédias plus facilement sur tous les appareils. Les contenus multimédias fonctionnent de la même manière sur ordinateur et sur Android.

L'implémentation d'UMP a nécessité un travail d'ingénierie acharné:

• Nouvelle couche de mise en cache pour des performances d'alimentation améliorées.
• Mise à jour d'un nouveau décodeur vidéo basé sur MediaCodec hébergé dans le processus GPU de Chrome.
• Beaucoup de tests et d'itérations sur différents appareils.

Voici une démonstration de la mise en cache vidéo avec un service worker:

Pour mettre en cache le fichier vidéo et l'image poster de la vidéo, il 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 comporte du code correctif 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 disponible sur simpl.info/video/playbackrate, playbackRate est défini sur 2. Essayez-la

UMP active les URL blob pour les éléments multimédias, ce qui signifie que vous pouvez, 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 correspondant:

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 à l'adresse simpl.info/video/offline, la vidéo est stockée à l'aide des API File, puis lue à l'aide d'une 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 a également été activé pour Media Source Extensions (MSE) et Encrypted Media Extensions (EME).

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

Si vous rencontrez des problèmes dus au pipeline Unified Media Pipeline, veuillez signaler les problèmes concernant le bug d'implémentation ou sur new.crbug.com.

Démonstrations

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

Bugs pertinents

• Problèmes de suivi pour Unified Media Pipeline
• Test sur le terrain UMP
• MSE, EME et Unified Media Pipeline

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

• <video> déclenche un mode: cors la requête 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.