Jitsi : la vidéo conférence sur votre site

Tout le monde ou presque connait Jitsi depuis le confinement. Cette solution open source de web conférence est proposée gratuitement par sa communauté. Elle a néanmoins ses limites : les salles ne sont pas protégées (je n'était pas tout seul lorsque j'ai essayé la salle https://meet.jit.si/mafamille, et le serveur a aussi ses limites en termes de trafic.

D'où l'intérêt d'installer sa propre instance de Jitsi et de la configurer pour l'insérer à l'intérieur d'un site web. Vous serez ainsi à même de proposer la visio-conférence à l'intérieur de votre site.

Pour cela il faut :

  • Installer Jitsi sur votre serveur
  • Sécuriser Jitsi pour ne pas laisser la porte ouverte à tous les vents
  • Personnaliser un peu votre serveur
  • L'intégrer dans votre site web

Installer Jitsi

Pour installer Jitsi sur votre serveur, je vous renvoie à cette page qui liste toutes les étapes pas à pas. (Testé sur un VPS OVH sous debian 10)

https://www.digitalocean.com/community/tutorials/how-to-install-jitsi-meet-on-debian-10-fr

Une fois le serveur installé et fonctionnel, je ne saurais trop vous conseiller de personnaliser la page d'accueil.

Personnaliser Jitsi

Pour personnaliser le serveur, plusieurs fichiers sont essentiels :

/usr/share/jitsi-meet/images/watermark.svg
Remplacez ce fichier par le votre pour personnaliser l’icône qui apparait en haut à gauche des fenêtres.

Editez le fichier /usr/share/jitsi-meet/interface_config.js
Les paramètres y sont suffisamment explicites ;-)

Le fichier /usr/share/jitsi-meet/lang/main-fr.json pourra également vous être utile, si vous parlez français.

Enfin, le fichier /usr/share/jitsi-meet/css/all.css peut être édité afin de personnaliser un certain nombre de choses dans l'apparence. Il est minifié, donc, un conseil, téléchargez le via SCP et éditez le avec votre éditeur favori après avoir réorganisé le code CSS.

Intégrez Jitsi à votre site web

Votre serveur Jitsi fraichement installé fournit une API qui vous permet d’intégrer vos sessions de vidéoconférence à l'intérieur d'un site web.

Toute la doc est ici : https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe

Le bé a ba consiste en deux petite choses :

  • intégrer l'api à votre page (HTML)
<script src='https://<your-domain>/external_api.js'></script>
  • Un petit bout de html
    <div id="meet"></div>
  • puis activer votre conférence avec (JS)
const domain = 'yourJitsiDomain.com';
const options = {
    roomName: 'TheNameOfYourRoom',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);


Voila, c'est tout. Amusez vous bien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *