Démo et nouveautés : vidéo, canvas, Web Workers & XHR so
Posté : 16 avr. 2009, 10:41
Hey 
,
Ça fait plusieurs jours que chez Mozila on attend la sortie de ces démos et qu'on les peaufine autant qu'on peut, tous les jours et toutes les nuits
.
Une chose importante, il faut tout d'abord vous prémunir d'une version 3.1/3.5 bêta 3 au minimum pour voir la vidéo. Soit on va sur la page officielle des versions bêtas, soit on va sur le serveur FTP public que Mozilla. Au choix.
Video et canvas
Une fois équipé comme il se doit, on peut commencer par voir LA démo en action : Dynamic Content Injection.
Le but du jeu est très simple.
On prend une vidéo que l'on cache, on prend un canvas où l'on y copie toutes les images de la vidéo. Ensuite on prend le motif (pattern) sélectionné par l'utilisateur et on l'applique.
L'application se fait par une détection de mouvement facilitée par l'utilisation des iPhones lumineux de notre ami William. Une fois les deux iPhones repérés, le motif se positionne entre et suit les mouvements. Facile non ?
Dans les motifs, on trouve une image, toute bête, truc de base, sans option. On trouve aussi un PNG, avec transparence, déjà plus intéressant. On trouve ensuite une vidéo, déjà nettement plus intéressant car on intègre une vidéo dans une vidéo, oui oui. Autre motif : un canvas (dans un canvas, puisque la vidéo est copiée en canvas, vous me suivez ?). Ce canvas est le (trop) célèbre jeu pong. Oui mais un canvas, ce n'est pas une animation ! Alors … ? Eh oui, c'est une IA (Intelligence Artificielle) qui joue devant vous. Deux joueurs Javascript qui s'affrontent. Avant-dernier motif, un texte que l'on tape et qui s'affiche en diagonale. Et le petit dernier : on dessine avec un curseur Firefox un gros trait plein rouge (avec un petit bouton de nettoyage/remise à zéro).
Petit détail qui tue : le bouton play ou pause de la vidéo (avec William) est réalisé en SVG, même avec la transparence.
On a donc tous les ingrédients de l'avenir du Web et de l'HTML 5 : vidéo, canvas, SVG et Javascript qui fait le pont/la glu entre tout ça.
Pour ceux qui pense que Javascript est un langage lent, j'espère qu'ils ont bien compris que ce ne sont que des légendes urbaines
.
Ils en parlent :
• Faire de la vidéo un citoyen du Web à part entière, par Tristan Nitot, en français ;
• Making video a first class citizen of the Web, la même mais en anglais ;
• Demo — Firefox 3.5: a new experiment with Canvas & Video, quelques explications données par Paul Rouget (l'auteur de la vidéo).
Dans les billets de Tristan, on trouvera un screencast pour ceux qui ont la flemme de télécharger la dernière version de Firefox (en OGV et MPEG4).
C'est juste génial non ?
Inutile de préciser que le code est visible par un simple Pomme-U (pour nous les vrais, les forts, les beaux) et Ctrl-U (pour les autres, les faibles, les …). Je vous invite vraiment à y jeter un œil.
J'espère que ça vous donnera des idées et que vous allez tous nous coder une petite démo n'est-ce pas ?
WebWorkers
Une nouvelle chose que permet l'HTML 5 est l'utilisation des web workers, comprendre le multi-thread pour Javascript !
Pourquoi utiliser les web workers ? Quand on parle de performances et de grosses applications bâties à 90% sur Javascript, ça fait mal aux oreilles. Javascript est souvent bloquant, il manipule beaucoup de DOM et le DOM est lent. Bref, tout ce petit monde ne s'entend pas très bien. Le plus gênant est pour l'utilisateur, car tant que Javascript n'a pas terminé son exécution, le navigateur peut-être en total freeze, comprendre gelé, muet, bloqué ou non-réactif.
Le fait d'utiliser les web workers va exécuter des gros traitements dans un thread à côté. Le navigateur continuera de tourner comme une fleur et attendra le résultat exécuté en parallèle. Attention, ce n'est pas une raison pour ne plus faire attention à ce qu'on code, mais ça ouvre des perspectives très intéressantes.
Allé, la première démonstration : Simulated annealing algorithm, mettant en place le calcul du plus court chemin et fonctionnant sans web workers.
Et la seconde démonstration qui met cette fois-ci en place 6 calculs du plus court chemin (ce qui devrait freeze tous vos navigateurs). On pourra l'essayer sans et avec les web workers, le petit Firefox tournant pour montrer si le navigateur est gelé ou pas. La voici la voilà : Workers & simulated annealing.
J'ai fait un petit screencast avec les deux démonstrations pour montrer la différence. On la trouvera au format OGV (ou Flash). Le traitement est plus rapide et le navigateur toujours réactif, QED.
On trouvera tout ce qu'il faut dans un billet de Paul Rouget : Demo — Firefox 3.5: Web Workers in action.
XMLHttpRequest improvements
Enfin, la dernière nouveauté, que j'ai à vous montrer, concerne le monitoring progress et le cross-site HTTP requests en Javascript bien sûr.
Grosso modo, c'est le fait de pouvoir observer la progression de requête XHR (ce qu'on appelle l'Ajax pour parler ménage) et de pouvoir travailler sur des domaines/sites différents, respectivement.
Niveau sécurité, rien à craindre. Des ACL (Access Control List) peuvent être mises en place par Apache (même directement via un simple .htaccess, voire PHP !) pour contrôler toutes les requêtes.
Une démonstration est visible ici : XHR Progress. J'en connais quelques uns qui vont apprécier cette feature.
Ça devient une habitude, Paul nous propose des explications : Demo — Firefox 3.5: XMLHttpRequest improvements.
Décidément ce Paul, 3 démos d'un coup, il va bien dormir.
,Ça fait plusieurs jours que chez Mozila on attend la sortie de ces démos et qu'on les peaufine autant qu'on peut, tous les jours et toutes les nuits
.Une chose importante, il faut tout d'abord vous prémunir d'une version 3.1/3.5 bêta 3 au minimum pour voir la vidéo. Soit on va sur la page officielle des versions bêtas, soit on va sur le serveur FTP public que Mozilla. Au choix.
Video et canvas
Une fois équipé comme il se doit, on peut commencer par voir LA démo en action : Dynamic Content Injection.
Le but du jeu est très simple.
On prend une vidéo que l'on cache, on prend un canvas où l'on y copie toutes les images de la vidéo. Ensuite on prend le motif (pattern) sélectionné par l'utilisateur et on l'applique.
L'application se fait par une détection de mouvement facilitée par l'utilisation des iPhones lumineux de notre ami William. Une fois les deux iPhones repérés, le motif se positionne entre et suit les mouvements. Facile non ?
Dans les motifs, on trouve une image, toute bête, truc de base, sans option. On trouve aussi un PNG, avec transparence, déjà plus intéressant. On trouve ensuite une vidéo, déjà nettement plus intéressant car on intègre une vidéo dans une vidéo, oui oui. Autre motif : un canvas (dans un canvas, puisque la vidéo est copiée en canvas, vous me suivez ?). Ce canvas est le (trop) célèbre jeu pong. Oui mais un canvas, ce n'est pas une animation ! Alors … ? Eh oui, c'est une IA (Intelligence Artificielle) qui joue devant vous. Deux joueurs Javascript qui s'affrontent. Avant-dernier motif, un texte que l'on tape et qui s'affiche en diagonale. Et le petit dernier : on dessine avec un curseur Firefox un gros trait plein rouge (avec un petit bouton de nettoyage/remise à zéro).
Petit détail qui tue : le bouton play ou pause de la vidéo (avec William) est réalisé en SVG, même avec la transparence.
On a donc tous les ingrédients de l'avenir du Web et de l'HTML 5 : vidéo, canvas, SVG et Javascript qui fait le pont/la glu entre tout ça.
Pour ceux qui pense que Javascript est un langage lent, j'espère qu'ils ont bien compris que ce ne sont que des légendes urbaines
.Ils en parlent :
• Faire de la vidéo un citoyen du Web à part entière, par Tristan Nitot, en français ;
• Making video a first class citizen of the Web, la même mais en anglais ;
• Demo — Firefox 3.5: a new experiment with Canvas & Video, quelques explications données par Paul Rouget (l'auteur de la vidéo).
Dans les billets de Tristan, on trouvera un screencast pour ceux qui ont la flemme de télécharger la dernière version de Firefox (en OGV et MPEG4).
C'est juste génial non
?Inutile de préciser que le code est visible par un simple Pomme-U (pour nous les vrais, les forts, les beaux) et Ctrl-U (pour les autres, les faibles, les …). Je vous invite vraiment à y jeter un œil.
J'espère que ça vous donnera des idées et que vous allez tous nous coder une petite démo n'est-ce pas
?WebWorkers
Une nouvelle chose que permet l'HTML 5 est l'utilisation des web workers, comprendre le multi-thread pour Javascript !
Pourquoi utiliser les web workers ? Quand on parle de performances et de grosses applications bâties à 90% sur Javascript, ça fait mal aux oreilles. Javascript est souvent bloquant, il manipule beaucoup de DOM et le DOM est lent. Bref, tout ce petit monde ne s'entend pas très bien. Le plus gênant est pour l'utilisateur, car tant que Javascript n'a pas terminé son exécution, le navigateur peut-être en total freeze, comprendre gelé, muet, bloqué ou non-réactif.
Le fait d'utiliser les web workers va exécuter des gros traitements dans un thread à côté. Le navigateur continuera de tourner comme une fleur et attendra le résultat exécuté en parallèle. Attention, ce n'est pas une raison pour ne plus faire attention à ce qu'on code, mais ça ouvre des perspectives très intéressantes.
Allé, la première démonstration : Simulated annealing algorithm, mettant en place le calcul du plus court chemin et fonctionnant sans web workers.
Et la seconde démonstration qui met cette fois-ci en place 6 calculs du plus court chemin (ce qui devrait freeze tous vos navigateurs). On pourra l'essayer sans et avec les web workers, le petit Firefox tournant pour montrer si le navigateur est gelé ou pas. La voici la voilà : Workers & simulated annealing.
J'ai fait un petit screencast avec les deux démonstrations pour montrer la différence. On la trouvera au format OGV (ou Flash). Le traitement est plus rapide et le navigateur toujours réactif, QED
.On trouvera tout ce qu'il faut dans un billet de Paul Rouget : Demo — Firefox 3.5: Web Workers in action.
XMLHttpRequest improvements
Enfin, la dernière nouveauté, que j'ai à vous montrer, concerne le monitoring progress et le cross-site HTTP requests en Javascript bien sûr.
Grosso modo, c'est le fait de pouvoir observer la progression de requête XHR (ce qu'on appelle l'Ajax pour parler ménage) et de pouvoir travailler sur des domaines/sites différents, respectivement.
Niveau sécurité, rien à craindre. Des ACL (Access Control List) peuvent être mises en place par Apache (même directement via un simple .htaccess, voire PHP !) pour contrôler toutes les requêtes.
Une démonstration est visible ici : XHR Progress. J'en connais quelques uns qui vont apprécier cette feature
.Ça devient une habitude, Paul nous propose des explications : Demo — Firefox 3.5: XMLHttpRequest improvements.
Décidément ce Paul, 3 démos d'un coup, il va bien dormir
.
