Il peut être utile aux élèves de pouvoir revoir un TD fait par visioconférence. La plateforme mise en place par le CNED ne permet pas d’enregistrer les sessions : si un élève n’a pas pu assister à la session ou pas dans de bonnes conditions de connexion, il a perdu la séance.

Il est cependant possible d’enregistrer une session au moyen de logiciels d’enregistrement de l’écran. Je développe dans cet article une procédure techniquement possible pour y parvenir. Je n’aborde pas les questions juridiques mais cela ne signifie pas qu’elles doivent être ignorées : il est illégal d’enregistrer quelqu’un sans son consentement (et c’est évidemment désastreux pour la relation pédagogique). J’ai la chance d’enseigner en prépa et d’avoir donc des élèves qui sont capables de consentir ou non. On verra dans la suite qu’il y a une étape de montage qui peut aussi permettre d’éliminer les interventions d’un élève qui n’aurait pas donné son consentement. Mais dans tous les cas, la première partie donne un moyen d’enregistrer votre propre source vidéo, ce qui ne pose pas de problème de droit.

Je travaille sous Linux et les logiciels proposés reflètent cette situation. Cependant la plupart sont disponibles pour d’autres OS ou bien ont des équivalents. Éventuellement, écrivez un commentaire sous cet article et je le mettrai à jour.

L’enjeu est d’enregistrer l’image que vous émettez ainsi que ce que vous recevez dans la visioconférence.

Émission d’un flux vidéo

Pour l’émission, j’utilise le logiciel OBS. Il permet de composer une vidéo en direct à partir de plusieurs sources audio et vidéo, avec des filtres et tout. Il y a une phase d’apprentissage mais on peut vraiment faire beaucoup de choses avec, notamment partager en même temps plusieurs fenêtres de son ordinateur et y superposer l’image issue d’une webcam. Ça permet donc d’afficher votre tête en petit dans un coin, ce qui est plus convivial que l’audio pur, et par ailleurs j’ai une caméra qui filme une feuille blanche de dessus ; un filtre de luminance permet de rendre ce blanc transparent et ainsi je peux, avec un simple feutre, écrire à la main par dessus les fenêtres que je projette.

Avec OBS, on peut diffuser en direct vers un service de plateforme vidéo type Youtube ou Twitch et/ou enregistrer le flux localement dans un fichier. On peut également, modulo l’installation d’un module approprié, verser le flux vers une webcam virtuelle qu’on peut après choisir comme source pour la visioconférence.

Webcam virtuelle

J’ai suivi la procédure décrite dans cette vidéo.

Sous Linux, on peut créer cette webcam virtuelle avec v4l2loopback (je recommande de prendre la version source et de la compiler ; j’ai eu des problèmes avec les paquets précompilés). Après installation du module, pour le charger au démarrage, écrire v4l2loopback dans un fichier /etc/modules-load.d/v4lloop.conf et pour régler les options (fixer le numéro de la caméra virtuelle et son nom, améliorer la détection par les navigateurs), écrire options v4l2loopback video_nr=99 devices=1 exclusive_caps=1 card_label="Video Loopback" dans un fichier /etc/modprobe.d/v4lloop.conf.

Il faut ensuite ajouter à OBS un plugin : obs-v4l2sink (sous Windows on doit pouvoir utiliser obs-virtualcam). Pour le coup, le paquet deb fonctionne bien chez moi.

Attention, Firefox ne semble pas détecter la caméra virtuelle ; j’ai ouvert un bug à ce sujet chez Mozilla. Chromium la détecte. La page suivante est pratique pour vérifier (attention au larsen) Select audio and video sources

Enregistrement de la visioconf

J’ai utilisé Kazam pour enregistrer la fenêtre du navigateur, tout simplement. La sélection de fenêtre est un peu capricieuse ; faites des tests pour vérifier que vous capturez bien la bonne fenêtre.

J’ai renoncé à Kazam : trop pénible de sélectionner la bonne fenêtre. D’autres enregistreurs plantent. C’est plus simple dans OBS de réafficher la fenêtre de la visoconférence et de rogner pour ne garder que le chat par exemple. Comme ça on s’économise aussi l’étape de montage et donc le temps passé au rendu de la vidéo finale.

Si vous avez des élèves qui partagent leur écran, il faut alors que vous basculiez pendant ce temps sur une scène qui raffiche cette image pour qu’elle soit intégrée à l’enregistrement. En soi ce n’est pas compliqué : il suffit à nouveau de prendre comme source la fenêtre de la visioconf et de rogner différemment pour garder cette fois la partie principale et pas le chat. Cependant attention : vous ne pouvez avoir qu’une seule source qui capte une fenêtre donnée (en tout cas c’est ce que j’observe chez moi) donc dans votre scène adaptée au partage de fenêtre d’un étudiant, quand vous ajoutez l’élément fenêtre, faite Ajouter une source existante et repiquez celle que vous aviez prise pour afficher le chat dans l’autre scène. Ça veut dire aussi que vous ne devez pas rogner dans les propriétés de la source ni dans les filtres (sinon ça s’appliquera aux deux) mais dans la Transformation appliquée à l’élément, qui reste indépendante pour chaque scène. Si vous voulez appliquer un filtre à la source qui sert pour afficher le chat mais pas celle du partage d’écran ou l’inverse (par exemple un filtre de transparence), placez la source concernée dans un groupe et mettez le filtre sur ce groupe.

N’oubliez pas d’enregistrer aussi le son qui vient des autres intervenants ; normalement par défaut OBS intègre une source pour le son du bureau, qu’il suffit de laisser. Sinon vous pouvez à la main ajouter, sous Linux, une source Capture audio (Sorties PulseAudio). Il faut bien sûr veiller à couper toutes les autres sources potentielles de son de votre ordinateur (notamment les bips de notifications d’applications de discussion).

Procédure et montage

Je vous recommande d’enregistrer le son de votre micro ainsi que le retour de la visioconf dans OBS en plus dans Kazam : si l’un des deux rate, vous aurez l’autre ; si les deux fonctionnent, vous pourrez choisir celui de meilleure qualité et surtout ça vous donnera un moyen très simple de caler les deux vidéos.

En effet, vous allez avoir deux vidéos : votre source et le retour de la visioconf. Vous pouvez utiliser kdenlive ou un autre logiciel de montage pour rassembler les vidéos (dans mon cas les élèves n’ont fait qu’utiliser le chat, donc j’ai rogné l’image de la visioconf pour la superposer à ma source dans un coin où ça ne gêne pas trop), choisir la source audio, éliminer ce qui doit l’être et produire un fichier vidéo que vous pourrez alors mettre à disposition de vos élèves.

Ceci disparait sauf si vous voulez vraiment éditer la vidéo pour éliminer des interventions ou des temps morts, encore que pour ce dernier cas il est plus simple d’uploader la vidéo en entier et de mettre en description ou commentaire les timecodes des moments intéressants.

Améliorations de l’affichage et astuces

On peut optimiser l’affichage du chat de la salle de visioconf du CNED dans la perspective de sa capture vidéo puis de son intégration par superposition à votre source lors du montage. Pour cela, ajouter l’extension Stylus au navigateur (existe pour Firefox et Chromium notamment) et utiliser par exemple ce style. La dernière règle cache le nom des intervenants du chat, ce qui peut être intéressant pour limiter l’exposition des intervenants même si ça nuit à la clarté des échanges.

/* agrandir le texte des messages et le mettre en gras */
#chat-channel-history p.chat-message__body{font-size:130%; font-weight:bold;}
 
/* supprimer l'avatar utilisateur */
#chat-channel-history div.bb-avatar{display:none;}
 
/* mettre tous les message sur fond blanc de façon à faciliter la mise en transparence de ce fond lors du montage */
#chat-history-container div.ng-scope{background-color:white;}
 
/* montrer la barre de défilement dès le début de façon à pouvoir rogner à la bonne largeur du début */
#chat-history-container {overflow-y : scroll;}
 
/* ceci cache le nom des intervenants du chat */
#chat-channel-history div.chat-message__content > h4 > div > span {display: none;}

Enfin, pour faciliter la saisie des timecodes ultérieurement, il peut être intéressant d’incruster une horloge dans la vidéo. Pour cela on peut utiliser une page web locale, qui sera intégrée dans OBS par une source appropriée (sous Linux il faut installer un plugin) :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Horloge</title>
<style>
     #txt{font-family: "Gentium Basic", sans-serif; font-size: 100%; color:white; font-weight:bold; text-align:center; position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
body{background-color:rgba(1,1,1,.5);}
</style>
  </head>
  <body>
  <div id="txt"></div>
  <script type="text/javascript">
    window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.getElementById('txt').innerHTML = display;
  setTimeout(displayClock, 1000); 
} 
    </script>
  </body>
</html>