Tweekers' Blog

Aller au contenu | Aller au menu | Aller à la recherche

Balise - Vidéo

Fil des billets

Du neuf dans la video avec HTML5

21 janv. 2010

Par Strider - General

J'écris ce billet depuis Firefox 3.6, fraichement sorti et qui possède quelques nouveautés et améliorations intéressantes. Ce qui a retenu mon attention dans les Release Notes, c'est le support de la video plein écran. Enfin ! Le format Flash n'a désormais plus aucun avantage par rapport au HTML 5 ! Coté performances, aucune amélioration, la lecture d'un OGG sur Firefox mettra a genoux vos anciennes machines.

Ceux qui ont Firefox 3.6 pourront tester avec la vidéo ci dessous (Daniel Holbach présentant les bases du packaging pour Ubuntu).

Tout aussi récemment, YouTube a décidé de suivre son petit frère DailyMotion et de se mettre a la balise <video>. Le problème, et pas des moindres, est que Youtube ne stocke pas ses vidéos au format OGG Theora mais en mp4 ou x264, du coup Youtube en HTML5 n'est compatible qu'avec Google Chrome. L'avenir nous dira si Firefox supportera davantage de codecs et/ou Google va penser à convertir les vidéos YouTube en OGG Theora.

Dernière nouvelle sur le HTML 5, c'est le lancement de TinyOgg, un projet soutenu par la FSF et proposant de convertir n'importe quelle video YouTube en Ogg/Theora. Bon, le problème c'est que justement ça ne supporte *que* YouTube, mais d'autres plateformes de partage video seront bientôt supportées. D'autres, d'accord mais pas toutes, c'est pourquoi j'ai proposé a Osama Khalid, créateur de TinyOgg, une méthode universelle pour récupérer les vidéos de n'importe quel site.
Le principe est pour l'instant tout a fait théorique mais s'inspire de la méthode que j'utilise pour trouver un lien vers une vidéo flv. Bien sur il existe des extensions pour Firefox telles que DownloadHelper, mais avoir une URL, cela permet de télécharger sur un serveur avec wget.
Voici la méthode manuelle : Je me rends sur un site proposant une vidéo en Flash et je lance la capture des paquets de mon réseau sur Wireshark. Je lance la lecture de la vidéo et repère une trame susceptible d'être la requète ou le swf demande le flv au serveur. Une fois le flv trouvé, je colle le champ Host avec la requète GET et je donne ça a wget qui télécharge la vidéo.
Ce hack est bien sympa, mais le but est d'automatiser toute cette procedure pour qu'un utilisateur puisse coller une URL, n'importe quelle URL (tant que le player n'utilise pas le protocole fermé RTMP), et récupérer son .ogg à la fin.
Dans la théorie, cela donne :

  • Xvfb installé sur le serveur pour permettre le lancement d'applications graphiques sans avoir besoin d'écran.
  • Firefox et le plugin Adobe Flash installés sur ce serveur
  • Un script python envoyant des XEvents via python-xlib pour faire des faux clics de souris, au cas ou un appui sur Play est nécessaire
  • Un sniffer (wireshark ou tcpdump) configuré pour capturer toutes les urls se terminant par .flv
  • mencoder ou ffmpeg2theora pour la conversion
J'aimerais mettre en place un prototype mais il me manque les connaissances en TCP/IP pour capturer les requètes contenant un .flv. Le reste n'est pas trop problématique.
Avis au experts du réseau, si vous souhaitez faire une grosse contribution aux formats ouverts, postez dans les commentaires la commande magique a base de tcpdump, wireshark ou tout autre sniffer pour récupérer les url des vidéos .flv.

12 commentaires

Faire un screencast live avec Firefox 3.5 et VLC 1.0

15 juin 2009

Par Strider - Linux

Dans ce billet je vais montrer les possibilités offertes par Firefox 3.5 en diffusant un screencast via VLC et en incrustant dans l'image une webcam. On peux facilement imaginer l'utilité de ce genre d'application pour les Classrooms Ubuntu par exemple.
Le tutoriel se fera sur Ubuntu 9.04 mais il est facilement adaptable pour d'autres distributions.

1) Installation de Firefox 3.5 et de VLC 1.0.0

Pour bénéficier des dernières versions de ces logiciels nous allons utiliser les PPA fournis par Launchpad.net. Pour cela il est possible d'utiliser la méthode traditionelle, ou alors utiliser un script Python que j'ai écrit qui facilite la tache. Pour récupérer le script (ppatool) s'assurrer que bzr est installé et lancer cette commande : 

bzr branch lp:ppatool

Nous allons ensuite ajouter le ppa relatif a Firefox.

cd ppatool 
sudo ./ppatool.py add ubuntu-mozilla-daily ppa

puis celui de VLC (Ce n'est pas obligatoire mais VLC 1.0.0 permet d'avoir le pointeur de la souris dans le screencast)

sudo ./ppatool.py add c-korn vlc

Pour la méthode traditionnelle, les PPA se trouvent à ces adresses ;
https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa
https://launchpad.net/~c-korn/+archive/vlc
Mettre a jour la liste des paquets et installer ou mettre a jour firefox-3.5 et vlc

2) Streaming de l'affichage et de la webcam

Nous allons commencer par le screencast, récupérez une image de pointeur et placez la dans le répertoire courant avec le nom cursor.png. Nous allons faire une video en ogg theora en 640x480 qui suivra les mouvements de la souris : 

vlc screen://  --screen-fps 10 --screen-follow-mouse --screen-mouse-image cursor.png --screen-width 640 --screen-height 480 --sout "#transcode{vcodec=vorb,venc=theora,fps=10,vb=500,width=640,heigth=480}:std{access=http,mux=ogg,dst=0.0.0.0:8090/stream.ogg}"

Pour vérifier que la capture est en cours lancez une autre instance de vlc : 

vlc http://localhost:8090/stream.ogg

Maintenant passons a la webcam :
Les périphériques /dev/video et /dev/audio peuvent changer selon votre configuration.

 vlc v4l2:///dev/video0  --input-slave oss:///dev/audio  --sout "#transcode{vcodec=vorb,venc=theora,fps=10,vb=500,width=160,heigth=120,acodec=vorb,ab=64,channels=1,samplerate=44100}:std{access=http,mux=ogg,dst=0.0.0.0:8091/stream.ogg}"
Faites de même et testez le bon fonctionnement du streaming dans vlc ou firefox

3) Diffusion de vos videos dans Firefox 3.5


Nous allons faire une simple page HTML de test qui va regrouper trois éléments vitaux : deux éléments video pour le screencast et la webcam, et un canvas. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

        <title>Ogg screencast + webcam</title>
	<script type="text/javascript" src="livecast.js"></script>
</head>

<body onload="processor.doLoad()">

<h1>OGG Testing</h1>
<div id="player">

            <canvas id="livecast" width="640" height="480" />
</div>
<video id="screencast" style="display:none;" src="http://192.168.1.11:8090/stream.ogg" controls="true" autoplay></video>
<video id="webcam" style="display:none;" src="http://192.168.1.11:8091/stream.ogg" controls="true" autoplay></video>
</body>

</html>

Dans les tags video j'ai mis mon adresse réseau privée pour pouvoir utiliser cette page sur différents poste de mon réseau local, prenez soin de modifier cette adresse selon votre configuration.

La plus grande partie du code va se trouver dans un fichier javascript annexe. Il est inspiré par les démos diffusées par les développeurs de chez Mozilla. (Essentiellement celles de Paul Rouget ) 
var processor = {
  timerCallback: function() {
    this.computeFrame();
    var self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },
  doLoad: function() {
    this.screencast = document.getElementById("screencast");
    this.webcam = document.getElementById("webcam");
    this.livecast = document.getElementById("livecast");
    this.livecastContext = this.livecast.getContext("2d");
    var self = this;
    this.screencast.addEventListener("canplay", function() {
        self.width = self.screencast.videoWidth;
        self.height = self.screencast.videoHeight;
        self.camwidth = self.webcam.videoWidth;
        self.camheight = self.webcam.videoHeight;
        self.timerCallback();
      }, false);
  },
  computeFrame: function() {
    this.livecastContext.clearRect(0, 0, this.width, this.height);
    try {
      this.livecastContext.drawImage(this.screencast, 0, 0, this.width, this.height);
      this.livecastContext.drawImage(this.webcam, this.width - this.camwidth -20 , this.height -this.camheight -20 , this.camwidth, this.camheight);
    } catch(e) {
      return;
    }
  }
};

La fonction doLoad est executée au chargement de la page et récupère les objets relatifs aux videos puis lance un timer (timerCallback) qui va créer a intervalles réguliers le contenu du canvas (computeFrame). Seul problème dans l'ensemble : une latence d'environ 20 secondes entre l'aquisition par VLC et l'affichage par Firefox 3.5. Le screencast et la webcam sont presques synchrones (moins d'une seconde de décalage dans le pire des cas). Reste maintenant a trouver une solution pour diffuser la video a grande échelle, si on part du principe que l'on diffuse a partir d'une ligne ADSL et que le débit montant n'est pas suffisant pour de nombreux clients connectés. J'irais jeter un coup d'oeil sur icecast pour cela.

Pour finir, un petit screencast récursif, enregistré avec recordmydesktop. Désolé mais je n'ai pas trouvé comment enregistrer la sortie de la carte son dans recordmydesktop donc c'est un film muet ;)
On peut aussi constater les effets du lag sur firefox (on peut voir la fenètre de gtk-recordmydesktop par exemple)

Télécharger livecast.ogg (20,8 Mo , 1min43)

un commentaire

Quel avenir pour la video en ligne ?

14 mar. 2009

Par Strider

La video en ligne est un domaine ou beaucoup de travail reste a faire. D'une part parce que ce moyen a de bonnes chances, à terme, de remplacer la télévision, et d'autre part parce que la situation actuelle est complètement absurde.
La suprématie de Flash a poussé de nombreux utilisateurs de logiciels libres a complètement tourner le dos a la vidéo en ligne, ce qui semble montrer qu'il y a un réel problème. Un utilisateur de logiciel libre ayant refusé d'installer le player Flash est tout autant, sinon encore plus, victime du coté propriétaire de ce format puisqu'il se voit interdit de 95% de la video en ligne. Certes il existe des solutions libres (gnash et swfdec) mais elles ne sont actuellement pas a la hauteur du logiciel d'Adobe et techniquement elles ne sont pas meilleures.
En 2009,soit plus de 15 ans après les premières video MPEG en plein écran, visionner une vidéo de qualité médiocre sur 1/8 de l'écran occupe entre 25% et 50% du temps de calcul d'un processeur moderne, voila où on en est arrivé...
Sur une machine plus modeste (le XO Laptop par exemple), visionner une video Flash dans le navigateur est juste impossible. Le format flv utilisé n'est pas en cause, celui est lisible par les lecteurs videos standards (totem, mplayer, vlc) sans aucun problème. C'est bien la lecture dans le navigateur qui pose un problème.
J'ai mis beaucoup d'espoirs dans le tag <video> implémenté dans le futur Firefox 3.5, afin de développer une alternative libre aux plateformes d'échange video, un peu comme ce que propose http://tinyvid.tv/ mais déployable sur n'importe quelle serveur aussi simplement qu'un Dotclear. Actuellement, j'ai principalement travaillé sur la récupération de video au format Flash via des scripts Python, ce qui n'est pas très compliqué mis a part pour le nouveau protocole rtmp qui pose énormément de problèmes. (Le même protocole utilisé pour débats de l'assemblée nationale).
La conversion dans un autre format, ne pose pas de problèmes non plus, donc il ne reste plus qu'a écrire l'interface Web pour regrouper tout cela. Mais avant de me lancer dans l'écriture de ce projet, j'ai bien évidemment voulu tester ce qui allait être la base de mon application : le tag <video>. J'ai malheureusement très vite déchanté, le support de la video par la beta de Firefox 3.1 est désastreux, avec une occupation du processeur allant de 50 à 70% sur un dual core (une charge partagée entre Firefox et Xorg sur GNU/Linux et limitée a Firefox sur Windows XP). Sur le XO Laptop, la lecture d'un ogg sur Firefox 3.1b3 occupe 100% du CPU avec un framerate d'environ 0.5 image par seconde ... Le bug est bien entendu connu comme on peut le constater sur le bugtracker de Mozilla ici ou ici. La question que je me pose actuellement est celle de savoir si je dois persévérer dans la conception de mon application avec l'espoir que le bug soit résolu pour la version finale de Firefox 3.5 (ce dont je doute) ou alors m'orienter vers d'autres solutions.
Je peux en effet me rediriger vers une solution utilisant le bon vieux tag <embed> qui n'a jamais posé de problèmes (puisque que ce sont des plugins qui vont s'occuper de la lecture et non le navigateur) ou encore, laisser tomber l'application en ligne pour uune application de bureau, comme ce que propose Miro mais avec la gestion de tous les principaux sites de streaming (youtube, dailymotion, wat.tv, videojug,etc ...). D'ailleurs mes essais sur ce domaine sont plutôt concluants, avec un programme qui permet de récupérer les video de Canal+. Capture-Canal_Plus_Ripper.png Ce script python est disponible ici et peut être démarré en exécutant openvish_gui.py (il faut patienter au démarrage pour la récupération des "chaines").
La vidéo sur le net, a encore beaucoup de chemin a faire avant de trouver une solution satisfaite pour l'utilisateur et tout espoir repose entièrement sur le logiciel libre étant donné la médiocrité proposée par le logiciel propriétaire (protocole RTMP, sites de VOD fonctionnant avec IE et WMP, etc...). Je relève aussi avec une certaine déception l'inutilité de nombreux détracteurs de Flash qui ont beau cracher sur les solutions existantes, n'apportent absolument rien comme solution libre. Si vous appréciez tant Richard Stallman, sachez que celui ci n'a pas formaté son système Unix propriétaire alors qu'il était en train de développer son système GNU !

8 commentaires