[Devoxx 2013] Media APIs for the multi-device web Conference

devoxx 2013Après une matinée un peu décevante, un sandwich rapidement avalé et quelques quickies sympathiques, on attaque enfin le vif du sujet avec une conférence de Sam Dutton de Google qui nous présente les dernières avancées survenues autour de la manipulation du son et de la vidéo dans les navigateurs.

La présentation est disponible sur http://simpl.info/media (notice : une petite main présente sur les cotés vous permettra de passer les slides)

Sam Dutton commence par plusieurs constats. Tout d’abord la manière dont nous utilisons le web a complètement changé au cours des dernières années. Ensuite 53% des adultes font d’autres choses pendant qu’ils regardent la TV. De même, on envoie aujourd’hui plus de messages via des applications de chat que via SMS. Et enfin, Cisco estime que d’ici 2017, 80 à 90% du trafic internet sera dédié à la vidéo.

Si l’on met tout cela bout à bout, on obtient des internautes friands de vidéos et de multimédia et surtout cherchant du contenu dynamique, qu’ils peuvent s’échanger où sur lequel ils peuvent échanger facilement.

Dans des temps lointains et reculés nous devions utiliser Flash pour faire ce genre de chose, ce n’est plus le cas aujourd’hui grâce au HTML5. Et avec les nouvelles avancées autour du multimédia, les choses deviennent de plus en plus intéressantes.

Vidéos : codecs, manipulation avec canvas, sous-titres et pleins d’astuces

Première bonne nouvelle : il est dorénavant possible d’adresser l’ensemble des navigateurs avec seulement deux codecs, le mp4 et webm. Enfin tant que l’on s’en tient aux dernières versions de ces navigateurs.

Première démonstration sympa de la présentation, il est possible de jouer avec la transparence des vidéos. Vous pouvez ainsi retirer le fond d’une vidéo et l’incrustée dans votre page, ou dans une autre vidéo ! Encore mieux vous pouvez appliquer n’importe quel CSS sur votre vidéo, y compris des effets de transitions et d’animations.

Il est désormais également possible de choisir de ne jouer qu’une portion d’une vidéo en ajoutant des hashes dans l’url :

http://myVideo.webm#t=5,10

Un point important et toujours bon à savoir, l’attribut type disponible sur les sources de la balise vidéo, bien qu’optionnel, aide grandement le navigateur à choisir la source et lui évite de devoir télécharger les méta-données de toutes les vidéos pour choisir la bonne. Ce qui est un gain de temps, et de bande passante, non négligeable.

Si vous voulez éviter de frustrer vos utilisateurs, rajouter une image représentant votre vidéo à l’aide de l’attribut poster est également une bonne idée, surtout sur mobile.

Toujours dans les choses à savoir sur la balise vidéo, si vos utilisateurs sont sur mobile, les attributs autoplay et prefetch seront ignorés par les navigateurs.

Autre astuce sympathique, mais pas forcément trivial à mettre en place, il est possible de manipuler les vidéos via l’API File et même de combiner des vidéos entre elles directement en javascript !

Une nouvelle spécification est entrain de voir le jour : DASH. Ce protocole de streaming permet de définir via un fichier manifest les différents bit rates disponibles afin de pouvoir choisir la meilleur vidéo en fonction du client. Il faut faudra cependant fournir des vidéos encodées dans chaque bit rate présent dans le fichier manifest, ce qui n’est pas forcément évident en terme de stockage.

Une autre spécification, faisant beaucoup plus polémique, va permettre l’utilisation de DRM dans les vidéos HTML5. Son petit nom est EME et elle est évidemment très attendue par les fournisseurs de contenus qui continuent majoritairement à utiliser des plugins propriétaires comme flash ou silverlight pour diffuser leurs vidéos soumises aux droits d’auteur.

Retour de Sam sur une fonctionnalité peu connue et donc peu utilisée, la possibilité d’ajouter des sous-titres et du texte dans vos vidéos via la balise track. Il y a toute une API autour de cela qui permet d’être prévenu lorsqu’un nouveau sous-titre est affiché. Vous pouvez également faire des recherches dans les fichiers de sous-titres ou même mettre autre chose que du texte.

L’exemple donné est basé sur du JSON  contenant les coordonnées GPS de la vidéo de votre balade  et que vous pouvez synchroniser avec Google Maps afin de suivre le trajet au fil de l’avancement de la vidéo ! Vraiment sympa, à nous d’inventer d’autres utilisations basées sur le même principe.

Enfin un petit point sur les nouveaux codecs qui arrivent : VP9 et h265 devraient permettre de réduire la taille des vidéos par 2 dans un futur plus ou moins proche en fonction des navigateurs. Il faudra bien entendu voir leur vitesse d’adoption, tant par les navigateurs que par les fabricants de processeurs qui décodent les vidéos matériellement.

Manipuler les vidéos avec getUserMedia

En html5, il est également possible depuis quelque temps de récupérer directement le flux vidéo de la webcam grâce à l’API getUserMedia aka gUM.

Pour cela, rien de bien compliqué. Il faut tout d’abord définir ce que l’on souhaite obtenir. Il est en effet possible de récupérer des flux audio et vidéo, le tout avec plein d’options.

Pour restreindre tout ça, nous déclarons une contrainte :

var constraints = {video: true};

Nous pouvons ensuite appeler la méthode getUserMedia qui va nous renvoyer le flux vidéo dans une fonction de callback :

navigator.getUserMedia(constraints, successCallback, errorCallback);

Vous n’avez plus qu’à faire ce que vous voulez de votre flux vidéo, par exemple l’afficher à l’écran via une balise vidéo :

function successCallback(stream) {
var video = document.querySelector("video");
video.src = window.URL.createObjectURL(stream);
}

En l’état, ce n’est pas forcément palpitant mais vous pouvez coupler tout cela à une balise canvas pour faire de la retouche en temps réel et obtenir des effets vraiment sympathiques.

Par exemple, vous pouvez transformer le flux vidéo en ASCIIart : http://idevelop.github.com/ascii-camera

Au niveau des contraintes vous pouvez également changer la résolution de la vidéo capturée pour passer en basse résolution, moyenne résolution ou en HD.

Vous pouvez également prendre des captures d’écran même si c’est encore une fonction expérimentale via les contraintes ou en passant par l’API dédiée qui n’est encore implémentée par personne apriori.

Gestion du son avec WebAudio

A l’instar de la balise vidéo, le HTML5 possède une balise audio permettant de jouer des fichiers sonores. Cependant cette balise a vite montré ses limites pour des usages avancés, et tout particulièrement pour les jeux vidéos.

Elle ne permet pas, par exemple, de mélanger efficacement plusieurs sources sonores jouées en même temps, ni d’appliquer des effets complexes sur le son.

C’est pour ce genre de cas d’usage que la spécification WebAudio a vu le jour. Il s’agit d’une API très puissante permettant de faire du traitement sonore avancé et qui a l’avantage d’être plutôt bien supportée par les navigateurs.

Un exemple de ce qu’il est possible de faire en mélangeant getUserMedia pour récupérer le son du micro, WebAudio pour analyser la spatialisation 3D du son et WebGl pour afficher le tout en 3D : http://www.webaudiodemos.appspot.com/input/index.html

Une autre spécification qui est entrain d’arrivée est Web MIDI qui permet de gérer les fichiers MIDI et les périphériques MIDI (contrôleurs, synthétiseurs, etc.)

Vous pouvez allez voir un exemple de DrumBox en HTML5 : http://webaudiodemos.appspot.com/MIDIDrums/index.html

Communication temps réel avec WebRTC

Nous voilà donc avec tout un tas de nouveautés, plus ou moins expérimentales, permettant de jouer avec les vidéos et les sons. Sauf que pour le moment, tout reste en local sur notre ordinateur. Or internet est quand même un réseau à l’échelle de la planète et ça serait vraiment dommage de ne pas en profiter !

D’où l’arrivée de WebRTC, une norme permettant de partager des données binaires de pair à pair directement depuis le navigateur. Plus de serveur central devant tout gérer et souvent engorgé (et potentiellement écouté par la NSA 😉 ), vous vous connectez directement avec le navigateur des personnes avec qui vous communiquez.

C’est une technologie encore jeune, vu que la première connexion entre deux navigateurs (Firefox et Chome) a eu lieu il y a quelques mois seulement.

Un peu plus probant et réel que des geeks jouant dans leur garage, la chaîne de TV SKYnews a utilisé WebRTC pour faire une interview en direct à la TV. Remplaçant ainsi un camion avec régie satellitaire par un ordinateur, une connexion internet classique, une webcam et un micro de qualité.

A savoir que WebRTC n’est pas uniquement dédié à l’audio et à la vidéo, il est possible de faire transiter n’importe quelle donnée binaire. Très utile pour les jeux par exemple.

L’api repose sur deux objets :

  • RtcPeerConnection qui permet d’établir la connexion
  • RtcDataChannel qui permet de faire transiter des données binaires

L’API semble relativement simple à utiliser mais les problématiques réseau sous-jacentes sont assez complexes : comment passer le NAT et toutes les couches réseau sans encombre, comment gérer les aléas du réseau, quid des codecs utilisés, etc.

Vous pouvez voir une démo d’un chat vidéo en WebRTC : http://apprtc.appspot.com/

Sachez qu’apparemment, le protocole vous assure que votre message sera bien acheminé jusqu’au destinataire ou vous remonte une erreur.

Évidemment, tout n’est pas parfait, surtout que les API sont encore jeunes. Il faut par exemple bien faire attention à ne pas envoyer un flux HD à un appareil qui ne pourra lire que de la SD. De même la notification pour autoriser l’utilisation du protocole est, d’après Sam, souvent ratée par les utilisateurs.

Conclusion

Le web s’oriente clairement vers le multimédia même si le sujet demeure sensible comme on peut le voir régulièrement lorsque les codecs et les DRMs sont au cœur de la discussion.

Les utilisateurs veulent tout simplement pouvoir regarder leurs séries préférées et des vidéos de chatons sans avoir à se poser de question. Il est donc vital de trouver un compromis entre les développeurs et les fournisseurs de contenus afin de rendre tout cela possible sans extension propriétaire.

Nombre de vue : 31

COMMENTAIRES 2 commentaires

  1. Sam Dutton dit :

    Thanks Mathieu! Great write-up.

  2. Mathieu PARISOT dit :

    Thanks to you, the talk was very nice. Lot of information Ell explained and concise ! Now I need to find time to play with it all 🙂

AJOUTER UN COMMENTAIRE