Jeudi dernier, en réunion de FAImaison, j'avais une petite présentation à faire.
Comptant fortement sur la disponibilité d'un vidéo projecteur je ne m'étais pas plus inquiété que ça.
En arrivant dans la salle : malheur pas de vidéoprojecteur. Nous sommes trop nombreux pour suivre sur un unique écran.
Qu'à cela ne tienne, je me lance dans l'écriture d'un bout de script pour que chaque personne puisse suivre la présentation sur son propre laptop.
L'idée est la suivante : le présentateur speech, fait avancer / reculer les slides, l'action du présentateur est répercutée sur tous les navigateurs de l'auditoire : sweet.
L'objet de ce billet et de vous présenter la solution développée en mode rache en 10 minutes et vous annoncer la libération de cet outil qui est très facile à intégrer à vos slides :)
Pour éviter qu'un petit malin profite de l'occasion, je met en place un mécanisme simpliste pour être le seul autorisé à piloter les navigateur des personnes connectées. Les actions possibles sont malgré tout très limitées : changer une ancre dans l'URL, rafraîchir la page, compter le nombre de clients connectés : simple.
Principe
Le principe est simple :
- Chaque navigateur charge la page HTML contenant les slides (fichier HTML, feuilles de style CSS et scripts JS)
- Un navigateur, qui s'auto-désigne comme "emitter" surveille les changements d'URI (changement d'ancre)
- en cas de changement, il envoie l'information au serveur
- Quand le serveur reçoit une notification de l'"emitter", il vérifie cette notification est légitime. Si c'est le cas, le serveur pousse l'information à chaque client "receiver".
L'auditoire garde la main sur son navigateur : par exemple, il peut changer de slides, son navigateur sera à nouveau synchronisé au prochain changement de slide effectué par le présentateur.
Exemple d'utilisation : à gauche le navigateur du présentateur, à droite un navigateur utilisé par un membre de l'auditoire :
L'utilisation est simple.
Utilisation
Récupérer les sources
On va récupérer les sources de web-slideshow-sync et les déposer dans le répertoire où vous avez votre présentation (fichier html, fichiers js, css, images, videos) :
$ cd ma-super-presentation
$ git clone https://git.legeox.net/capslock/web-slideshow-sync.git
$ mv web-slideshow-sync/* ./
Dans le répertoire de votre présentation, vous devez avoir les fichiers suivants :
- package.json : liste les dépendances de web-slideshow-sync (pour la partie serveur)
- web-slideshow-sync-client.js : fichier js à intégrer à vos slides
- web-slideshow-sync-server.js : script serveur : il servira vos slides et permettra la synchronisation des navigateurs
Intégrer web-slideshow-sync à votre présentation
Ouvrez le fichier HTML de votre présentation, et ajoutez les lignes suivantes juste avant la balise < / body> :
<script src="/web-slideshow-sync-client.js"></script>
<script type="text/javascript">
webSlideshowSyncClient({
showControls: true
})
</script>
L'option showControls nous permet d'afficher quelques contrôles utiles sur le navigateur du présentateur :
- un bouton pour forcer le rafraîchissement de la page des gens déjà connectés (utile si vous apportez des modification de dernière minute à vos slides)
- un compteur pour savoir combien de personnes participent à la présentation
Installer les dépendances pour la partie serveur
Allez dans le répertoire de votre présentation, puis tapez la commande :
$ npm i
Si aucune erreur n'est retournée, le serveur doit pouvoir se lancer avec la commande :
$ npm start
Starting HTTP on port 8000 ; Starting WebSocket on port 8102
Speaker code : "7a78eb384a5e6a7680ea1a03c1d636656009ea606800f2cfb35fdfaf8d0ae6b65ede373ffc6de27668f5d4b8944834d3"
Speaker URL : http://0.0.0.0:8000/?isServer&code=7a78eb384a5e6a7680ea1a03c1d636656009ea606800f2cfb35fdfaf8d0ae6b65ede373ffc6de27668f5d4b8944834d3
Attendants URL : http://0.0.0.0:8000/
2016-10-11T21:33:14.230Z [ ] Serving HTTP files on port 8000 ...
Le serveur nous donne plusieurs éléments :
- le speakerCode est un code que le présentateur doit mettre dans l'URL de son navigateur afin que le serveur accepte de propager les événements aux autres navigateurs
- l'URL à utiliser par le présentateur (elle reprend le speakerCode ainsi que le numéro de port du serveur HTTP qui se charge de servir votre présentation
- l'URL à communiquer à votre auditoire
Le serveur propose plusieurs options pour réutiliser un speakerCode, changer les numéros de ports, l'interface sur laquelle seront bindés les serveurs etc :
% npm start -- --help
Usage: web-slideshow-sync-server [options]
Options:
-h, --help output usage information
-w, --wsport <n> set WebSocket port (defaults : 8102)
-p, --httpport <n> set HTTP Web server port (defaults: 8000)
-i, --ifacebinding <s> set Interface on which listening (defaults : 0.0.0.0)
-c, --code <s> set Speaker code (defaults : randomly generated)
-n, --nohttp disable HTTP server, websocket is the only server that will start
Ce logiciel Libre est placé sous license GPLv3 et disponible ici : https://git.legeox.net/capslock/web-slideshow-sync
En espérant que ça vous soit utile :)