By
Le remplacement et le floutage de l'arrière-plan est une fonctionnalité très utile proposée par les acteurs majeurs du secteur de la visioconférence. Elle est notamment très appréciée par les personnes qui ont été forcées d'improviser un espace de travail dans leur foyer suite aux mesures de confinement mises en œuvre pour lutter contre la propagation de la COVID-19.
Cette fonctionnalité est désormais disponible avec le produit Twilio Programmable Video via la librairie JavaScript Twilio Video Processors. Dans ce court tutoriel, vous allez apprendre à ajouter des filtres de traitement vidéo à un flux vidéo capturé par votre navigateur Web.
Prérequis
Au moment où je rédige cet article, la librairie Video Processors fonctionne uniquement sous Chrome, vous devrez donc utiliser ce navigateur. Vous pouvez vérifier la liste actuelle des navigateurs pris en charge dans la documentation pour les mises à jour.
L'exemple d'application que vous allez construire dans le cadre de ce tutoriel est une application front-end JavaScript hébergée sur un serveur Web Express Node.js. Pour exécuter le serveur Web, Node.js version 14 ou ultérieure doit être installé sur votre ordinateur.
Outre Chrome et Node.js, il n'y a pas d'autres exigences. Les librairies JavaScript que vous utiliserez sont toutes disponibles gratuitement et open source. Uncompte Twilio n'est pas nécessaire pour ce tutoriel (mais il est requis pour implémenter une application d'appel vidéo complète).
Configuration d'un projet JavaScript
Pour commencer, vous allez créer une application Web de base dans laquelle vous ajouterez ultérieurement des fonctionnalités vidéo.
Ouvrez une fenêtre de terminal ou d'invite de commande, choisissez un emplacement approprié et créez un répertoire pour ce projet :
Les dépendances JavaScript requises pour ce projet sont le framework Express, une extension destinée aux fichiers statiques, et les librairies Twilio Video et Video Processors. Installez tous ces éléments avec npm comme suit :
Les fichiers côté client de ce projet seront stockés dans un répertoire public. Créez ce répertoire maintenant :
Un serveur Web Express destiné au front-end peut être écrit en quelques lignes JavaScript. Placez le code suivant dans un fichier server.js dans votre répertoire twilio-video-backgrounds :
Ce serveur Express est configuré pour s'exécuter sur le port 3000. Il utilisera trois emplacements comme source pour les fichiers statiques : le répertoire public que vous venez de créer et les deux répertoires build pour les packages twilio-video et video-processors installés.
L'application front-end démarrera à partir d'un fichier index.html dans le répertoire public. Ce sera le point d'entrée de l'application, où tous les fichiers JavaScript sont chargés. Copiez le code suivant dans ce fichier :
Cette page charge les librairies twilio-video et video-processors. Elle crée ensuite un élément <div> d'espace réservé où la vidéo sera ajoutée, puis importe finalement le fichier index.js, où vous écrirez le code de l'application.
Vous pouvez démarrer le serveur Web à l'aide de la commande suivante :
Avec le serveur en cours d'exécution, ouvrez http://localhost:3000 dans votre navigateur Web pour confirmer que vous disposez d'une application opérationnelle. À ce stade précoce, seul l'en-tête <h1> s'affiche sur la page.
Vous pouvez laisser le serveur en cours d'exécution pendant que vous suivez les étapes restantes de ce tutoriel. Chaque fois que vous mettez à jour votre code JavaScript ou HTML, vous pouvez actualiser la page de votre navigateur pour charger l'application mise à jour.
Affichage de la vidéo issue de votre webcam
Vous pouvez maintenant ajouter la vidéo ! Pour commencer, vous allez afficher la vidéo non filtrée de votre webcam sur la page. Le SDK JavaScript Twilio Video vous simplifie grandement la tâche.
Vous vous souvenez du fichier index.js référencé dans le fichier html ? Ce fichier n'existe pas encore. Il se place dans le répertoire public, avec index.html. Créez ce fichier dans votre éditeur de texte ou IDE, puis saisissez le code suivant :
La fonction showLocalVideo() utilise createLocalVideoTrack() depuis la librairie twilio-video pour demander au navigateur de créer une piste vidéo avec les dimensions et la fréquence d'images données. La deuxième ligne de la fonction ajoute la représentation HTML de cette piste (obtenue en appelant la méthode attach()) à l'élément video d'espace réservé inclus dans la page index.html.
Revenez à votre navigateur et actualisez la page. Vous serez invité(e) à autoriser l'utilisation de votre webcam et, un instant plus tard, votre vidéo s'affichera sur la page.
Ajout d'un effet d'arrière-plan
Maintenant que la vidéo est en cours de lecture, vous pouvez ajouter un filtre de remplacement de l'arrière-plan. La librairie Twilio Video Processors vous offre deux options : le floutage de l'arrière-plan ou son remplacement par une image de votre choix. Examinons les deux options dans l'ordre.
Floutage de l'arrière-plan
Pour flouter l'arrière-plan, la classe GaussianBlurBackgroundProcessor de la librairie Twilio Video Processors doit être jointe à la piste vidéo. Vous trouverez ci-dessous une version mise à jour d'index.js avec les lignes ajoutées mises en évidence :
Le constructeur de la classe GaussianBlurBackgroundProcessor a besoin de trois arguments :
assetsPath: l'URL ou le chemin relatif à partir duquel des ressources supplémentaires de la librairie Twilio Video Processors peuvent être téléchargées. Dans ce projet, le répertoire build de cette librairie est ajouté comme répertoire statique sans chemin. Par conséquent,/est utilisé.maskBlurRadius: le rayon de flou à utiliser lors du lissage des bords du masque qui sépare le premier plan de l'arrière-plan. Vous devez tester différentes valeurs pour trouver ce qui fonctionne le mieux. Je trouve que10est un bon point de départ.blurFilterRadius: l'effet de flou gaussien à appliquer à l'arrière-plan. Plus le nombre est élevé, plus l'arrière-plan sera flou. Pendant mes tests, j'ai découvert qu'un faible effet de flou me convenait parfaitement, mais vous pouvez appliquer des valeurs plus élevées pour voir le résultat.
Le processus qui sépare le sujet de l'arrière-plan utilise un modèle de segmentation d'image qui doit être chargé. Pour cela, on fait appel à la méthode loadModel().
Une fois le modèle chargé, le processeur est ajouté à la piste vidéo avec la méthode addProcessor(), ce qui permet d'appliquer l'effet à chaque image capturée avant qu'elle ne soit transmise à la page.
Actualisez votre page pour voir comment fonctionne le filtre de floutage de l'arrière-plan.
Remplacement de l'arrière-plan
Pour l'effet suivant, vous aurez besoin d'une image d'arrière-plan. Si vous n'en avez pas, vous pouvez utiliser cette image d'un champ irlandais, qui se trouve près de chez moi. Nommez l'image background.jpg et placez-la dans le répertoire public.
Le remplacement de l'arrière-plan est implémenté par la classe VirtualBackgroundProcessor. Dans la version suivante d'index.js, le code nécessaire pour remplacer l'arrière-plan est mis en évidence :
Remplacer l'arrière-plan nécessite un peu plus de travail que le floutage, car l'image d'arrière-plan doit être chargée avant de pouvoir ajouter l'effet à la piste vidéo. Dans cet exemple, l'image background.jpg est chargée dans un nouvel objet Image et la logique qui ajoute le processeur vidéo est jointe à son événement onload, de sorte qu'elle est effectuée une fois l'image chargée et disponible à l'utilisation.
Les arguments qui peuvent être transmis à la classe VirtualBackgroundProcessor sont les suivants :
assetsPath: comme pour le floutage, c'est l'emplacement à partir duquel des ressources supplémentaires nécessaires pour effectuer l'analyse d'image peuvent être téléchargées.backgroundImage: l'image qui sera affichée en arrière-plan.maskBlurRadius: comme pour le floutage, il s'agit de l'effet de flou appliqué au masque calculé. La valeur dépend beaucoup de votre goût personnel. Je l'ai réduite à 5 pour cet effet.
Le résultat est assez probant, comme vous pouvez le voir ci-dessous.
Arrière-plans virtuels dans votre application Programmable Video
Vous vous demandez peut-être comment intégrer les effets d'arrière-plan que vous venez d'apprendre dans une application d'appel vidéo construite avec Twilio Programmable Video. Il est important de vérifier que votre application vidéo utilise tsilio-video.js version 2.15.1 ou ultérieure, car c'est la version dans laquelle cette fonctionnalité a été proposée en règle générale.
La bonne nouvelle, c'est qu'une fois que vous avez ajouté un processeur d'arrière-plan à une piste vidéo locale comme indiqué ci-dessus, cette piste est configurée pour transmettre la version traitée du flux vidéo aux autres participants de l'appel vidéo, pour qu'ils voient exactement ce que vous voyez. Il n'y a rien d'autre à faire !
À titre de référence, le code complet de ce projet est disponible dans ce répertoire GitHub.
J'adorerais voir ce que vous avez construit !
Miguel Grinberg est ingénieur informatique principal pour le contenu technique chez Twilio. Contactez-le à l'adresse mgrinberg [at] twilio [dot] com si vous avez un projet sympa que vous souhaitez partager sur ce blog !
