Schhhh! Entfernen Sie Hintergrundgeräusche in Ihren Videoanrufen

Wir leben in einer vernetzten Welt. Die Benutzer Ihrer Webanwendung könnten Videoanrufe von einer Vielzahl von Orten und unter verschiedenen Bedingungen entgegennehmen: Morgens, wenn ein Nachbar beschließt, seinen Rasen zu mähen. Während der Arbeit in einem belebten Café wird ein spontanes Meeting gestartet, um Designänderungen zu besprechen. Natürlich fällt am Tag der großen Präsentation die Schule wegen Schneefalls aus. Mit der Video-Rauschunterdrückung von Vonage müssen Sie sich jetzt um eines weniger Sorgen machen: Hintergrundgeräusche.

Möchten Sie es gleich in Ihrem Chrome/Chromium-basierten (Electron, Opera und Edge) Browser ausprobieren? Wir haben GitHub Repos für beide Moderate und Fortgeschrittene Beispielanwendungen, die Sie mit einem Klick bereitstellen können. Nach der Bereitstellung geben Sie die Anmeldeinformationen ein, die Sie auf der Seite Vonage Video Spielplatz erhalten, und Sie können mit dem Testen beginnen. Verbinden Sie den Anruf einfach über zwei verschiedene Registerkarten und klicken Sie auf die Schaltflächen zum Aktivieren und Deaktivieren der Rauschunterdrückung. Wenn Sie das Glück haben, sich nicht in einer lauten Umgebung zu befinden, genügt es, nach Videos von Stadtgeräuschen auf einem Handy zu suchen und diese abzuspielen.

Versuchen Sie es doch einfach mal. Ich werde warten.

Die Funktion der Rauschunterdrückung wird durch den Vonage Medienprozessorermöglicht, der den Zugriff auf die Audiodaten unterstützt und Hintergrundgeräusche entfernt.

Wie bereits erwähnt, gibt es zwei Möglichkeiten, die Rauschunterdrückung in Ihrem Vonage Video-Anruf zu implementieren. Schauen wir uns an, wie sie funktionieren.

Moderate Umsetzung

Mit der Moderaten Implementierung der Rauschunterdrückung hat Vonage den Rauschunterdrückungstransformator, den Medienprozessor und den Medienprozessoranschluss in eine einzige Funktion namens createVonageNoiseSuppression().

Die wichtigsten Punkte sind:

Erstellen einer Instanz der Bibliothek zur Rauschunterdrückung

const noiseSuppression = await createVonageNoiseSuppression();

Initialisierung der Instanz

await noiseSuppression.init();

Anschließen eines Steckers an den Medienprozessor

const mediaProcessorConnector = await noiseSuppression.getConnector();

Einstellen des Anschlusses bei der Initialisierung Ihres Publishers für den Videoanruf

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Die Audiosignale werden nun durch den Rauschunterdrückungstransformator geleitet und dann in den Videoanruf übertragen.

Um die Rauschunterdrückung zu aktivieren und zu deaktivieren, rufen Sie einige Methoden auf der Registerkarte noiseSuppression:

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

Erweiterte Implementierung

Wenn Sie dem Audiostrom mehrere Effekte hinzufügen möchten, bevor Sie den Videoanruf starten, oder wenn Sie mehr Kontrolle über einfügbare Streams und Transformatoren benötigen, ist der erweiterte Anwendungsfall die beste Option.

Erstellen Sie zunächst eine neue Instanz eines MediaProcessors

const mediaProcessor = new MediaProcessor();

und ein neuer Rauschunterdrückungstransformator.

const noiseSuppressionTransformer = new NoiseSuppressionTransformer();

Initialisieren Sie dann den Transformer

await noiseSuppressionTransformer.init();

Als Nächstes legen Sie die Transformatoren fest, die der Medienprozessor verwenden soll. Hier können Sie auch andere Transformatoren einfügen, die Sie dem Audiostrom hinzufügen möchten.

mediaProcessor.setTransformers([noiseSuppressionTransformer]);

Erstellen Sie nun einen Media Connector mit der mediaProcessor.

const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor);

Genau wie im Beispiel der Moderaten Implementierung legen Sie den Anschluss fest, wenn Sie Ihren Publisher für den Videoanruf initialisieren.

publisher
  .setAudioMediaProcessorConnector(mediaProcessorConnector)

Da Sie nun Zugriff auf den Transformator für die Rauschunterdrückung haben, können Sie dort die Funktion aktivieren und deaktivieren.

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

Mehr Optionen

Bei der Initialisierung der Rauschunterdrückung können Sie eine Reihe von Optionen festlegen.

Die erste ist Multithreaded WebAssembly. Mit Wasm Multithreading kann die Leistung durch die Verwendung mehrerer CPU-Kerne erheblich gesteigert werden. Dies ist standardmäßig aktiviert, aber damit es funktioniert, müssen diese Voraussetzungen erfüllt sein:

• Bereitstellung Ihrer Webanwendung über HTTPS für eine sichere Datenübertragung.

• Einstellung der Kopfzeile "Cross-Origin-Opener-Policy" auf "same-origin", um Ausführungskontexte auf vertrauenswürdige Quellen zu beschränken.

• Einstellung des "Cross-Origin-Embedder-Policy"-Headers mit "require-corp"- oder "credentialless"-Werten, um die sichere Verwendung von gemeinsam genutzten Array-Puffern zu gewährleisten.

Wenn Sie diese Option deaktivieren möchten, können Sie in disableWasmMultiThread: true übergeben, wenn Sie die Initialisierung durchführen.

.init({disableWasmMultiThread: true});

Die Modelle Web Worker, Wasm und Noise Suppression werden bei der Initialisierung des Transformers dynamisch geladen. Standardmäßig werden diese Ressourcen von einem Vonage CDN geladen. Sie haben jedoch die Möglichkeit, das Hosting selbst zu übernehmen. Geben Sie einfach den assetsDirBaseUrl Parameter mit der URL des Host-Servers an, die auf die statischen Assets verweist.

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

Wir haben versucht, das Hinzufügen der Rauschunterdrückung zu Ihrer Video-Anwendung so einfach wie möglich zu gestalten. Probieren Sie es aus!

Wenn Sie Fragen oder Kommentare haben, lassen Sie es uns bitte in unserem Slack-Kanal der Gemeinschaft und folgen Sie uns auf X.