Tweekers' Blog

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

Balise - Firefox

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