Chut ! Supprimez les bruits de fond lors de vos appels Video

Nous vivons dans un monde connecté. Les utilisateurs de votre application web pourraient prendre des appels Video à partir d'une myriade d'endroits différents et dans des conditions variées, imaginez : Les réunions matinales lorsqu'un voisin décide de commencer à tondre sa pelouse. Pendant que vous travaillez dans un café très fréquenté, une réunion impromptue est organisée pour discuter des changements de conception. Bien sûr, le jour de la grande présentation, l'école est annulée en raison des chutes de neige. Maintenant, avec la suppression du bruit vidéo de Vonage, il n'y a plus qu'une seule chose à craindre : le bruit de fond.

Vous voulez l'essayer dans votre navigateur Chrome / Chromium (Electron, Opera, et Edge), dès maintenant ? Nous avons des dépôts GitHub pour les deux Modéré et avancées que vous pouvez déployer en un seul clic. Une fois l'application déployée, saisissez les informations d'identification que vous pouvez obtenir auprès de l'espace vidéo de Vonage. Vonage Video Playground et vous pouvez commencer à tester. Rejoignez l'appel à partir de deux onglets différents et cliquez sur les boutons pour activer et désactiver la suppression du bruit. Si vous avez la chance de ne pas vous trouver dans un environnement bruyant, la recherche et la lecture de vidéos de bruits urbains sur un téléphone portable feront l'affaire.

Allez-y, essayez-les. J'attendrai.

La fonction de suppression du bruit est rendue possible grâce au Vonage Media Processorqui permet d'accéder aux données audio et de supprimer tout bruit de fond.

Comme nous l'avons mentionné précédemment, il existe deux façons de mettre en œuvre la suppression du bruit dans votre appel Vonage Video. Voyons comment elles fonctionnent.

Mise en œuvre modérée

Avec la mise en œuvre modérée de la suppression du bruit, Vonage a intégré le transformateur de suppression du bruit, le processeur média et le connecteur de processeur média dans une seule fonction appelée createVonageNoiseSuppression().

Les éléments importants sont les suivants :

Création d'une instance de la bibliothèque Suppression du bruit

const noiseSuppression = await createVonageNoiseSuppression();

Initialisation de l'instance

await noiseSuppression.init();

Raccordement d'un connecteur au processeur de médias

const mediaProcessorConnector = await noiseSuppression.getConnector();

Réglage du connecteur lors de l'initialisation de votre éditeur pour l'appel vidéo

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Maintenant, votre audio passera par le transformateur de suppression du bruit, puis dans l'appel vidéo.

Pour activer et désactiver la suppression du bruit, vous appelez certaines méthodes de la fonction noiseSuppression:

// enable Noise Suppression
noiseSuppression.enable();
// disable Noise Suppression
noiseSuppression.disable();

Mise en œuvre avancée

Si vous souhaitez ajouter plusieurs effets au flux audio avant de passer à l'appel vidéo ou toute autre chose qui nécessiterait plus de contrôle sur les flux insérables et les transformateurs, le cas d'utilisation avancé sera la meilleure option.

Tout d'abord, créez une nouvelle instance de MediaProcessor

const mediaProcessor = new MediaProcessor();

et un nouveau transformateur de suppression du bruit.

const noiseSuppressionTransformer = new NoiseSuppressionTransformer();

Ensuite, initialiser le transformateur

await noiseSuppressionTransformer.init();

Ensuite, définissez les transformateurs que le processeur multimédia utilisera. C'est également ici que vous pouvez inclure d'autres transformateurs que vous souhaitez ajouter au flux audio.

mediaProcessor.setTransformers([noiseSuppressionTransformer]);

Créez maintenant un connecteur média à l'aide de la commande mediaProcessor.

const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor);

Comme dans l'exemple de mise en œuvre de Moderate, vous définissez le connecteur lors de l'initialisation de votre éditeur pour l'appel vidéo.

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Puisque vous avez maintenant accès au transformateur de suppression du bruit, c'est là que vous pouvez activer et désactiver la fonctionnalité.

// enable Noise Suppression
noiseSuppressionTransformer.enable();
// disable Noise Suppression
noiseSuppressionTransformer.disable();

Plus d'options

Lors de l'initialisation de la suppression du bruit, vous pouvez spécifier quelques options.

Le premier est le WebAssembly multithreadé. Avec Wasm multithreading, l'utilisation de plusieurs cœurs de CPU peut augmenter de manière significative les performances. Cette option est activée par défaut, mais pour qu'elle fonctionne, les conditions suivantes doivent être remplies :

• Servir votre application web via HTTPS pour une transmission sécurisée des données.

• Définir l'en-tête "Cross-Origin-Opener-Policy" sur "same-origin" pour restreindre les contextes d'exécution aux sources de confiance.

• Définition de l'en-tête "Cross-Origin-Embedder-Policy" avec les valeurs "require-corp" ou "credentialless" pour garantir l'utilisation sécurisée des tampons de tableaux partagés.

Si vous souhaitez désactiver cette option, vous pouvez passer le paramètre disableWasmMultiThread: true lors de l'initialisation.

.init({disableWasmMultiThread: true});

Les modèles Web Worker, Wasm et Noise Suppression sont chargés dynamiquement lors de l'initialisation du Transformer. Par défaut, ces ressources sont chargées à partir d'un CDN de Vonage. Vous avez la possibilité d'effectuer l'hébergement vous-même. Il suffit de spécifier le paramètre assetsDirBaseUrl avec l'URL du serveur hôte pointant vers les ressources statiques.

.init({assetsDirBaseUrl: "https://my-custom-server/path/to/the/resources/root"});

Nous avons essayé de rendre l'ajout de la suppression du bruit à votre application Video aussi simple que possible. Essayez-le !

Si vous avez des questions ou des commentaires, n'hésitez pas à nous en faire part dans notre canal Slack de la communauté et suivez-nous sur X.