Audio- und Videoeinstellungen anpassen — Web

Sie können Audio- und Videoeinstellungen für veröffentlicht und abonniert Streams:

Nur Audio oder Video veröffentlichen

Wenn Sie ein Publisher-Objekt erstellenkönnen Sie festlegen, ob zunächst nur Audio oder nur Video veröffentlicht werden soll. Der folgende Code erstellt zum Beispiel einen reinen Audio-Publisher:

var pubOptions = {publishAudio:true, publishVideo:false};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

Standardmäßig wird ein „Subscriber“-Objekt so initialisiert, dass es Audio- und Videodaten abonniert, sofern diese verfügbar sind.

Sobald Sie ein Publisher-Objekt erstellt, können Sie Audio und Video ein- oder ausschalten, indem Sie die publishAudio() und publishVideo() Methoden (Übergabe eines booleschen Wertes). Der folgende Code schaltet zum Beispiel Audio aus:

publisher.publishAudio(false);

Wenn Sie das Video mit der publishVideo() Mit dieser Methode können Sie einen optionalen Abschluss-Handler übergeben, der ausgeführt wird, sobald die Veröffentlichung des Videos beginnt oder endet. Der folgende Code könnte beispielsweise verwendet werden, um nach der Veröffentlichung des Videos Änderungen an der Benutzeroberfläche vorzunehmen:

publisher.publishVideo(true, (error) => { if (!error) { // You may want to adjust the user interface to let users know // their video is visible to others } });

Wenn Sie Audio oder Video ein- oder ausschalten, sendet das Session-Objekt in jedem verbundenen Client eine streamPropertyChanged Veranstaltung. Weitere Informationen finden Sie unter StreamPropertyChangedEvent.

Auflösung und Bildfrequenz für ein Video einstellen

Sie können die Bildrate und Auflösung für den Stream eines Publishers festlegen, indem Sie eine resolution Eigenschaft der Optionen, die Sie in der OT.initPublisher() Methode. Siehe Einstellen der Videoauflösung eines Streams und Einstellen der Bildrate eines Streams.

Sie können die Bildrate und die Auflösung für den Stream eines Publishers auch im laufenden Betrieb ändern, indem Sie die Funktion setPreferredResolution und setPreferredFrameRate APIs der Herausgeber. Siehe Ändern der bevorzugten Bildrate und Auflösung für Verlage.

Sie können die Bildrate und die Auflösung für den Stream eines Abonnenten festlegen, indem Sie die preferredFrameRate und preferredResolution Eigenschaften der Optionen, die Sie an die session.subscribe() Methode. Wir empfehlen die Einstellung der preferreResolution Option zu "auto" um die CPU- und Netzwerkauslastung zu optimieren. Siehe Festlegen der bevorzugten Bildrate und Auflösung für Abonnenten.

Wechsel der von einem Publisher verwendeten Kamera

Sie können das Videoeingabegerät (Kamera), das als Videoquelle für einen Publisher verwendet wird, umschalten, indem Sie die Funktion Publisher.cycleVideo() oder Publisher.setVideoSource() Methode:

Publisher.cycleVideo()

Die Publisher.cycleVideo() Methode können Sie zwischen den verfügbaren Videoquellen (Kameras) wechseln. Auf einem mobilen Gerät können Sie zum Beispiel zwischen der vorderen und der hinteren Kamera wechseln. Die Methode gibt ein Versprechen zurück, das aufgelöst wird, wenn der Vorgang erfolgreich abgeschlossen wurde. Das Versprechen wird mit einem Objekt aufgelöst, das eine deviceId auf die Geräte-ID der verwendeten Kamera gesetzt:

publisher.cycleVideo().then(console.log);
// Output: {deviceId: "967a86e52..."}

Tritt ein Fehler auf, wird das Versprechen zurückgewiesen. Dies kann unter den folgenden Bedingungen geschehen:

  • Der Benutzer hat den Zugriff auf das Videoeingabegerät verweigert.
  • Der Herausgeber verwendet keine Kamera-Videoquelle. Diese Methode funktioniert nicht bei Verlagen mit Bildschirmfreigabe, bei Verlagen, die eine MediaStreamTrack-Quelle verwenden, oder bei Verlagen, die keine Videospur enthalten (reine Audioverlage).
  • Es sind keine Videoeingabegeräte (Kameras) vorhanden.
  • Es ist ein Fehler bei der Erfassung des Videos vom Videoeingabegerät aufgetreten.

Beachten Sie, dass diese Methode nur bei einem Verlag funktioniert, der eine Kamera als Videoquelle verwendet.

Publisher.setVideoSource()

Die Publisher.setVideoSource() Methode können Sie die Geräte-ID der neuen Videoquelle (Kamera) übergeben. Die Methode gibt ein Versprechen zurück, das aufgelöst wird, wenn der Vorgang abgeschlossen ist:

publisher.setVideoSource(deviceId)
  .then(() => console.log('video source set'))
  .catch((error) => console.error(error.name));

Die folgenden Angaben werden zu Fehlern führen:

  • Wenn die videoSourceId keine Zeichenkette oder die Geräte-ID für ein gültiges Videoeingabegerät ist, wird das Versprechen mit einer Fehlermeldung mit dem name Eigenschaft eingestellt auf 'OT_INVALID_VIDEO_SOURCE'.
  • Wenn der Herausgeber derzeit keine Kameraeingabe verwendet, wird das Versprechen mit einer Fehlermeldung zurückgewiesen, die die name Eigenschaft eingestellt auf 'OT_SET_VIDEO_SOURCE_FAILURE'.

Sie können die OT.getDevices() Methode, um die verfügbaren Videoeingabegeräte aufzuzählen (und ihre Geräte-IDs abzurufen).

Sie können die Publisher.getVideoSource() Methode, um die aktuelle Videoquelle und ihre Geräte-ID (wenn es sich um ein Videoeingabegerät handelt) zu ermitteln.

Spiegelung der lokalen Anzeige eines Publisher-Videos

Sie können die mirror Eigenschaft der Optionen, die an die OT.initPublisher() Methode, um das lokal gerenderte Video des Herausgebers zu spiegeln (true) oder nicht (false). Standardmäßig wird das Video für einen Herausgeber gespiegelt, der eine Kamera-Videoquelle hat, und nicht für ein Bildschirmfreigabevideo.

Diese Einstellung wirkt sich nur auf das gerenderte Video in der Client-Anwendung des Herausgebers aus. Sie hat keine Auswirkungen auf das Video in abonnierten Clients.

Die von einem Publisher verwendete Audioquelle wechseln

Sie können das Mikrofon oder das MediaStreamTrack-Objekt, das als Audioquelle für einen Publisher verwendet wird, wechseln, indem Sie die Funktion setAudioSource() Methode des Publisher-Objekts.

Übergeben Sie eine Geräte-ID für ein Mikrofon oder ein Audio-MediaStreamTrack-Objekt an die Publisher.setAudioSource() Methode. Die Methode gibt ein Promise zurück, das im Fehlerfall zurückgewiesen wird (siehe die Referenzdokumentation für setAudioSource()).

Der folgende Code zeigt Ihnen zum Beispiel, wie Sie eine cycleMicrophone() Funktion, die die verfügbaren Mikrofone durchläuft:

// Setting an audio source to a new MediaStreamTrack
const stream = await OT.getUserMedia({
  videoSource: null
});

const [audioSource] = stream.getAudioTracks();
publisher.setAudioSource(audioSource).then(() => console.log('Audio source updated'));

// Cycling through microphone inputs
let audioInputs;
let currentIndex = 0;
OT.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, idx) => {
    if (device.label === publisher.getAudioSource().label) {
      currentIndex = idx;
    }
  });
});

const cycleMicrophone = () => {
  currentIndex += 1;
  let deviceId = audioInputs[currentIndex % audioInputs.length].deviceId;
  publisher.setAudioSource(deviceId);
};

Die Publisher.setAudioSource() Methode funktioniert nur bei Verlagen, die eine Audioquelle haben. Wenn Sie die audioSource zu null (oder false) beim Aufruf von OT.initPublisher()können Sie dem Verlag später keine Audioquelle hinzufügen.

Die Herausgeber.getAudioSource() Methode gibt das MediaStreamTrack-Objekt zurück, das als aktuelle Audio-Eingabequelle für den Herausgeber verwendet wird.

Die OT.getDevices() Methode listet die Audio- und Video-Eingabegeräte auf, die dem Browser zur Verfügung stehen.

Wechseln der verwendeten Audioausgabe

Sie können das Audioausgabegerät (Lautsprecher oder Kopfhörer) wechseln, über das die Audiodaten aller Sender und Empfänger (in allen OpenTok-Sitzungen im Browser) wiedergegeben werden.

Die OT.getAudioOutputDevices() Methode listet die Audio- und Video-Eingabegeräte auf, die dem Browser zur Verfügung stehen.

Die OT.getActiveAudioOutputDevice() Methode identifiziert das gerade aktive Audio-Ausgabegerät.

Verwenden Sie die OT.setAudioOutputDevice() Methode, um das Audio-Ausgabegerät einzustellen.

Der folgende Code zeigt Ihnen zum Beispiel, wie Sie eine cycleAudioOutput() Funktion, die die verfügbaren Audio-Ausgabegeräte durchläuft:

// Cycling through audio output devices
let currentIndex = 0;
const audioOutputs = await OT.getAudioOutputDevices();
const currentOutputDevice = await OT.getActiveAudioOutputDevice();
audioOutputs.forEach((device, index) => {
  if (device.label === currentOutputDevice.label) {
    currentIndex = index;
  }
});

const cycleAudioOutput = async () => {
  currentIndex += 1;
  let deviceId = audioOutputs[currentIndex % audioOutputs.length].deviceId;
  await OT.setAudioOutputDevice(deviceId);
};

Erkennen, wann ein Player das Audio-Eingabegerät wechselt

Standardmäßig übernimmt das SDK automatisch den Wechsel des Audioeingabegeräts für jedes Publisher-Objekt, wenn ein Audioeingabegerät hinzugefügt oder entfernt wird, es sei denn, die Verwaltung von Audioeingabegeräten wurde deaktiviert. Siehe Deaktivieren der standardmäßigen Verwaltung von Audio-Eingabegeräten wenn Sie den automatischen Wechsel des Audioeingangsgeräts deaktivieren möchten.

Das Publisher-Objekt sendet eine audioInputDeviceChanged Ereignis, wenn das SDK automatisch die Audioeingabe ändert. Dieses Ereignis wird ausgelöst, wenn ein neues Audio-Eingabegerät hinzugefügt wird, das aktuelle Audio-Eingabegerät entfernt wird oder wenn das Betriebssystem des Publishers die Audio-Eingabegeräte wechselt. Das ausgelöste Ereignis hat eine device Eigenschaft, die Informationen über das Audio-Eingabegerät enthält. Vielleicht möchten Sie Ihren Benutzern mitteilen, dass sich ihr Mikrofon geändert hat:

publisher.on('audioInputDeviceChanged', (event) => {
  console.log('audio input device', event.device);
  console.log(`changing device to: ${event.device.label}`);
});

Veröffentlichung in einer reinen Sprachsitzung

Um eine reine Sprachsitzung einzurichten, setzen Sie die videoSource Eigenschaft zu null oder false wenn du Jedes Publisher-Objekt erstellen in der Sitzung. Der folgende Code erstellt beispielsweise einen Publisher für eine reine Sprachsitzung:

var pubOptions = {videoSource: null};

// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);

Wenn Sie die Einstellung videoSource Eigenschaft zu nullfordert der Veröffentlichungs-Client keinen Zugriff auf die Kamera an, und es wird kein Video veröffentlicht.

Nur Audio- oder Videoabonnements

Wenn Sie einen Stream abonnierenkönnen Sie angeben, ob Sie zunächst den Audio- oder den Videostream abonnieren möchten (sofern verfügbar). Der folgende Code abonniert zum Beispiel nur den Audiostream:

var options = {subscribeToAudio:true, subscribeToVideo:false};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             options);

Nachdem Sie ein Subscriber-Objekt erstellt haben, schalten Sie den Ton ein oder aus, indem Sie die Funktion subscribeToAudio() Methode des Subscriber-Objekts:

subscriber.subscribeToAudio(false); // audio off
subscriber.subscribeToAudio(true); // audio on

Sie schalten das Video ein oder aus, indem Sie die Funktion subscribeToVideo() Methode des Subscriber-Objekts:

subscriber.subscribeToVideo(false); // video off
subscriber.subscribeToVideo(true); // video on

Beachten Sie jedoch, dass Sie Audio oder Video nur abonnieren können, wenn der Client, der den Stream veröffentlicht, Audio oder Video enthält. Zum Beispiel, der Aufruf subscribeToVideo(false) hat keine Auswirkung, wenn der Client, der den Stream veröffentlicht, nur Audio veröffentlicht.

Anpassen der Lautstärke eines Teilnehmers

Wenn Sie einen Stream abonnierenkönnen Sie die Anfangslautstärke des Teilnehmers einstellen, wenn Sie die subscribe() Methode des Session-Objekts:

// Set a value between 0 (silent) and 100 (full volume):
var subOptions = {audioVolume = 10};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             subOptions);

Nachdem Sie ein Subscriber-Objekt erstellt haben, können Sie seine Lautstärke einstellen, indem Sie sein setAudioVolume() Methode, wobei ein Wert von 0 (leise) bis 100 (volle Lautstärke) eingegeben wird:

subscriber.setAudioVolume(0); (silent)

Beachten Sie, dass der Benutzer den Teilnehmer auch über die Bedienelemente der Benutzeroberfläche des Teilnehmers stummschalten kann.

Erkennen, ob ein Stream Audio oder Video enthält

Standardmäßig gibt ein Subscriber-Objekt sowohl Audio als auch Video wieder (wenn sie verfügbar sind). Sie können überprüfen, ob ein Stream Audio oder Video enthält (wenn der Herausgeber des Streams Audio oder Video streamt), indem Sie die hasAudio und hasVideo Eigenschaften des Stream-Objekts:

if (!stream.hasAudio) {
	// You may want to adjust the user interface
}
if (!stream.hasVideo) {
	// You may want to adjust the user interface
}

Zum Beispiel, wenn Sie einen Stream abonnierenWenn Sie einen Stream mit Audio- oder Videofunktion haben, möchten Sie vielleicht die Benutzeroberfläche entsprechend anpassen. Zum Beispiel können Sie dem Benutzer anzeigen, ob ein Stream Audio hat oder nicht; oder Sie können einen Abonnenten nicht ausblenden, wenn ein Stream kein Video hat.

Erkennen, wann bei einem Stream Audio- oder Videodaten hinzugefügt oder entfernt werden

Das Session-Objekt sendet eine streamPropertyChanged Ereignis, wenn ein Stream Audio oder Video ein- oder ausschaltet. Die Website streamPropertyChanged Ereignis wird durch den StreamPropertyChangedEvent Klasse. Das Ereignisobjekt hat eine changedProperty (zur Identifizierung der geänderten Stream-Eigenschaft) und eine newValue Eigenschaft (der neue Wert der Stream-Eigenschaft). Der folgende Code überwacht beispielsweise Änderungen bei Audio- und Videodaten in einem Stream:

session.on("streamPropertyChanged", function (event) {
    var subscribers = session.getSubscribersForStream(event.stream);
    for (var i = 0; i < subscribers.length; i++) {
        // You may want to display some UI text for each
        // subscriber, or make some other UI change,
        // based on event.changedProperty and
        // event.newValue
    }
}

Beachten Sie, dass das Video eines Abonnenten aus anderen Gründen als dem des Herausgebers deaktiviert oder aktiviert werden kann. Ein Subscriber-Objekt sendet videoDisabled und videoEnabled Ereignisse in allen Bedingungen, die dazu führen, dass der Stream des Abonnenten deaktiviert oder aktiviert wird. Einzelheiten finden Sie in der Dokumentation zum Abonnent videoDisabled und Video für Abonnenten aktiviert Veranstaltungen.

Optimierungen bei reinen Sprach-Sitzungen

Es gibt eine Reihe von Optimierungen der Benutzeroberfläche, die Sie in einer reinen Sprachsitzung vornehmen können. Weitere Informationen finden Sie unter Stimme Tutorium.

Optimierung der Audioqualität

Die OT.initPublisher() Methode enthält Optionen zur Einstellung der Audioqualität. So können Sie Streams mit hoher (oder niedriger) Audioqualität veröffentlichen:

audioBitrate (Numbers) - Die gewünschte Bitrate für das veröffentlichte Audio in Bits pro Sekunde. Der unterstützte Wertebereich liegt zwischen 6.000 und 510.000. (Ungültige Werte werden ignoriert.) Legen Sie diesen Wert fest, um Audio in hoher Qualität zu aktivieren (oder um die Bandbreitennutzung mit Audio geringerer Qualität zu reduzieren).

Die folgenden Einstellungen sind empfehlenswert:

  • 8.000 - 12.000 für Schmalbandsprache (NB)
  • 16.000 - 20.000 für Breitbandsprache (WB)
  • 28.000 - 40.000 für Full-Band (FB) Sprache
  • 48.000 - 64.000 für Vollbandmusik (FB)

Wenn Sie diese Option nicht einstellen, legt OpenTok.js automatisch die Audio-Bitrate für den Stream fest.

Zurzeit wird diese Einstellung in Streams, die in Firefox veröffentlicht werden, nicht unterstützt.

autoGainControl (Boolean) - Ob die automatische Verstärkungsregelung für das veröffentlichte Audio aktiviert werden soll. Sie sollten diese Option auf false bei der Veröffentlichung von hochwertigem Audio (durch Einstellen der audioBitrate Eigenschaft der OT.initPublisher() Optionen). Der Standardwert ist true. Diese Einstellung wird ignoriert, wenn Sie disableAudioProcessing zu true (wodurch die Echokompensation, die automatische Verstärkungsregelung und die Rauschunterdrückung für den veröffentlichten Stream deaktiviert werden).

disableAudioProcessing (Boolean) - Ob die Echounterdrückung, die automatische Verstärkungsregelung und die Rauschunterdrückung für die veröffentlichten Audiodaten deaktiviert werden sollen. Sie sollten diese Option auf true bei der Veröffentlichung von hochwertigem Audio (durch Einstellen der audioBitrate Eigenschaft der OT.initPublisher() Optionen). Der Standardwert ist false.

echoCancellation (Boolean) - Ob die Echounterdrückung für das veröffentlichte Audio aktiviert werden soll. Sie sollten diese Option auf false bei der Veröffentlichung von hochwertigem Audio (durch Einstellen der audioBitrate Eigenschaft der OT.initPublisher() Optionen). Der Standardwert ist true. Diese Einstellung wird ignoriert, wenn Sie disableAudioProcessing zu true (wodurch die Echokompensation, die automatische Verstärkungsregelung und die Rauschunterdrückung für den veröffentlichten Stream deaktiviert werden).

Anmerkung: Einige Browser (z. B. Chrome 73+) unterstützen keine Echounterdrückung für Stereo-Audio (siehe dieser Chrome-Ausgabebericht).

enableStereo (Boolean) - Ob Stereo-Audio veröffentlicht werden soll. Der Standardwert ist false.

noiseSuppression (Boolean) - Ob die Rauschunterdrückung für das veröffentlichte Audio aktiviert werden soll. Sie sollten diese Option auf false bei der Veröffentlichung von hochwertigem Audio (durch Einstellen der audioBitrate Eigenschaft der OT.initPublisher() Optionen). Der Standardwert ist true. Diese Einstellung wird ignoriert, wenn Sie disableAudioProcessing zu true (wodurch die Echokompensation, die automatische Verstärkungsregelung und die Rauschunterdrückung für den veröffentlichten Stream deaktiviert werden). Sie können auch die Funktion advancedNoiseSuppression Audiofilter, der die Vonage-Medienbibliothek nutzt (siehe dieses Thema).

Reduzierung der Audiobandbreite mit Opus DTX

Opus DTX (Diskontinuierliche Übertragung) ist ein Audiocodec, der die Bandbreitennutzung reduzieren kann, wenn ein Teilnehmer nicht spricht. Dies kann in großen Sitzungen mit vielen Audioteilnehmern nützlich sein.

Sie aktivieren Opus DTX durch Setzen des Parameters enableDtx Eigenschaft der options Objekt, das Sie an die OT.initPublisher() Methode (wenn Initialisierung eines Publishers).

Weitere Informationen finden Sie hier Vonage Video API Wissensbasisartikel.

Filter und Effekte auf Audio- und Videodateien anwenden

Sie können Filter und Effekte auf veröffentlichte Audio- und Videodateien auf folgende Weise anwenden:

Sie können Filter und Effekte auf abonnierte Audio- und Videodateien anwenden, indem Sie unter Verwendung der Vonage Media Processor-Bibliothek zur Durchführung von Transformationen.

Diese werden in den folgenden Abschnitten beschrieben.

Ein MediaStreamTrack-Objekt veröffentlichen und Effekte auf das Objekt anwenden

Sie können eine audio MediaStream-Spur oder eine Video MediaStream-Spur als Audio- oder Videoquelle für einen veröffentlichten Stream verwenden. Mit dieser Funktion können Sie Filter und Effekte, wie z. B. Hintergrundunschärfe oder Hintergrundersetzung, auf das veröffentlichte Audio oder Video anwenden.

Sie können die OT.getUserMedia() Methode, um einen Verweis auf einen MediaStream zu erhalten, der die vom Benutzer ausgewählte Kamera verwendet. Sie können dann den Video-MediaStreamTrack, den Sie von diesem MediaStream-Objekt erhalten, als Quelle für ein Video-Element verwenden. Sie können dieses Video-Element dann zu einem HTML-Leinwandelement hinzufügen, Filter oder Effekte auf die Leinwand anwenden und das gefilterte Video-MediaStreamTrack-Objekt, das Sie von der Leinwand erhalten, als Videoquelle für einen veröffentlichten Stream verwenden. Ein Beispiel finden Sie im Stream-Filter-Beispiel opentok-web-samples repo auf GitHub.

Sie können die OT.getUserMedia() Methode, um einen Verweis auf einen MediaStream zu erhalten, der das vom Benutzer ausgewählte Mikrofon verwendet. Sie können dann den Audio-MediaStreamTrack, den Sie von diesem MediaStream-Objekt erhalten, als die audioSource beim Aufruf von OT.initPublisher(). Sie können dann eine AudioKontext Objekt und rufen dessen createMediaStreamSource() Objekt, wobei das MediaStream-Objekt übergeben wird, um ein MediaStreamAudioSourceNode Objekt. Sie können dann Audiofilter auf das MediaStreamAudioSourceNode-Objekt anwenden, was dazu führt, dass die Filter auf den veröffentlichten Stream angewendet werden.

Anwenden eines Filters zum Verwischen oder Ersetzen des Hintergrunds

Verwenden Sie die Publisher.applyVideoFilter() Methode, um einen Videofilter für den Herausgeber anzuwenden. Sie können einen Hintergrund-Weichzeichnungsfilter oder einen Hintergrundbildfilter anwenden. Auf einen Publisher kann nur ein (oder null) Filter gleichzeitig angewendet werden. Wenn Sie einen neuen Filter setzen, wird ein zuvor gesetzter Filter entfernt.

Der folgende Code wendet einen Filter für die Hintergrundunschärfe auf das Video eines Herausgebers an:

publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'low',
});

Der folgende Code wendet einen Filter zur Ersetzung des Hintergrunds auf das Video eines Herausgebers an:

publisher.applyVideoFilter({
  type: 'backgroundReplacement',
  backgroundImgUrl: 'http://example.com/image.jpg',
});

Sie können auch einen Videofilter anwenden, indem Sie die Option videoFilter Option beim Aufruf der OT.initPublisher() Methode:

const publisher = OT.initPublisher(null, {
  videoFilter: {
    type: 'backgroundReplacement',
    backgroundImgUrl: 'http://example.com/image.jpg',
  },
  mirror: false,
});

Das ist wichtig:

  • Videofilter erfordern eine angemessene Prozessorunterstützung. Selbst in unterstützten Browsern sind Transformatoren möglicherweise nicht stabil, wenn Hintergrundprozesse die verfügbaren Verarbeitungsressourcen begrenzen. Siehe Anforderungen des Kunden.
  • Hinweis zu Content Security Policies (CSP): Wenn die script-src Richtlinie gesetzt ist, stellen Sie sicher, dass 'wasm-unsafe-eval' angegeben ist. Andernfalls wird WebAssembly, das für Hintergrundunschärfe oder Ersatzfilter erforderlich ist, am Laden und Ausführen auf der Seite gehindert.
  • Die Größe des Hintergrundbildes wird an die Abmessungen des Videos des Herausgebers angepasst. Die besten Ergebnisse erzielen Sie, wenn Sie ein Bild verwenden, das die gleichen Abmessungen (oder zumindest das gleiche Seitenverhältnis) wie das veröffentlichte Video hat. Legen Sie die mirror Option zu false beim Aufruf der OT.initPublisher() Methode, damit das Hintergrundbild in der richtigen Ausrichtung (nicht gespiegelt) auf der Verlagsseite erscheint.

Einzelheiten finden Sie in der Referenzdokumentation für Publisher.applyVideoFilter().

Diese Methode ist nicht kompatibel mit dem Publisher.setVideoMediaProcessorConnector() Methode. Der Aufruf dieser Methode nach Publisher.setVideoMediaProcessorConnector(connector) gibt ein Versprechen zurück, das mit einem Fehler zurückgewiesen wird, wobei die name Eigenschaft des Fehlers, die auf 'OT_NOT_SUPPORTED'. Sie können den Stecker entfernen, indem Sie Publisher.setVideoMediaProcessorConnector(null).

Sie können auch den anfänglichen Videofilter festlegen, indem Sie einen videoFilter Option beim Aufruf von OT.initPublisher() Methode.

Um den Videofilter zu löschen, rufen Sie die Funktion Publisher.clearVideoFilter() Methode.

Anmerkungen:

  • Videofilter werden nur in neueren Versionen von Chrome, Firefox, Electron, Opera, Edge, Samsung Internet, WebView für Android sowie in den neuesten Versionen von Safari (Version 26+) und iOS WebView (Version 26+) unterstützt. Sie können überprüfen, ob der Client diese Funktion unterstützt, indem Sie die OT.hasMediaProcessorSupport('video') Methode.
  • Die Vonage Medienbibliothek enthält Transformatoren, die mehr Optionen bieten als die Filter für die Hintergrundunschärfe und das Hintergrundbild, die in der Publisher.applyVideoFilter('video') Methode. Sie können auch die Vonage Medienbibliothek verwenden, um Ihre eigenen Audio- und Videotransformatoren zu schreiben. Siehe die Verwendung des Vonage Medienprozessors Leitfaden für Entwickler.

Anwendung des erweiterten Rauschunterdrückungsfilters

Die erweiterte Rauschunterdrückung ist ein Audiofilter, der die Hintergrundgeräusche um den Herausgeber herum stark reduziert. Dies kann nützlich sein, wenn sich ein Teilnehmer in einer überfüllten oder lauten Umgebung befindet, z. B. in einem Café, oder wenn weißes Rauschen vorhanden ist, z. B. von einem HLK-System. Er kann separat oder in Verbindung mit dem noiseSuppression Eigenschaft, die beim Aufruf der OT.initPublisher Methode.

Verwenden Sie die Publisher.applyAudioFilter() Vorgehensweise zum Anwenden eines Audiofilters auf den Publisher. Sie können einen erweiterten Rauschunterdrückungsfilter anwenden. Auf einen Publisher kann jeweils nur ein (oder kein) Filter angewendet werden. Wenn Sie einen neuen Filter festlegen, wird jeder zuvor festgelegte Filter entfernt.

Der folgende Code wendet einen erweiterten Audiofilter zur Unterdrückung von Rauschen auf die Audiodaten eines Verlags an:

publisher.applyAudioFilter({
  type: 'advancedNoiseSuppression',
});

Sie können auch den erweiterten Audiofilter zur Rauschunterdrückung anwenden, indem Sie den Parameter audioFilter Option beim Aufruf der OT.initPublisher() Methode:

const publisher = OT.initPublisher(null, {
  audioFilter: {
    type: 'advancedNoiseSuppression'
  },
});

Das ist wichtig:

  • Audiofilter erfordern eine ausreichende Prozessorunterstützung. Selbst in unterstützten Browsern sind Transformatoren unter Umständen nicht stabil, wenn Hintergrundprozesse die verfügbaren Rechenressourcen einschränken. Siehe Anforderungen des Kunden.
  • Hinweis zu Content Security Policies (CSP): Wenn die script-src Richtlinie gesetzt ist, stellen Sie sicher, dass 'wasm-unsafe-eval' angegeben ist. Andernfalls wird das Laden und Ausführen von WebAssembly, das für die erweiterte Rauschunterdrückung erforderlich ist, auf der Seite blockiert.

Einzelheiten finden Sie in der Referenzdokumentation für Publisher.applyAudioFilter().

Diese Methode ist nicht kompatibel mit dem Publisher.setAudioMediaProcessorConnector() Methode. Der Aufruf dieser Methode nach Publisher.setAudioMediaProcessorConnector(connector) gibt ein Versprechen zurück, das mit einem Fehler zurückgewiesen wird, wobei die name Eigenschaft des Fehlers, die auf 'OT_NOT_SUPPORTED'. Sie können den Stecker entfernen, indem Sie Publisher.setAudioMediaProcessorConnector(null).

Um den erweiterten Rauschunterdrückungsfilter zu deaktivieren, rufen Sie die Funktion Publisher.clearAudioFilter() Methode.

Anmerkungen:

  • Audiofilter werden nur in neueren Versionen von Chrome, Electron, Opera, Edge, Samsung Internet und WebView für Android unterstützt. In anderen (nicht auf Chromium basierenden) Browsern oder unter iOS werden sie nicht unterstützt. Sie können überprüfen, ob der Client diese Funktion unterstützt, indem Sie die OT.hasMediaProcessorSupport('audio') Methode.
  • Bei der Verwendung von Publisher.applyAudioFilter()Die Assets werden von den Vonage-Servern heruntergeladen. Wenn Sie es vorziehen, diese Assets selbst zu hosten, lesen Sie bitte unter dieser Blogbeitrag für Informationen zum Hosting und zur Nutzung der Publisher.setAudioMediaProcessorConnector() Methode zur Anwendung des erweiterten Rauschunterdrückungsfilters bei selbst gehosteten Assets.

Verwendung der Vonage Media Processor-Bibliothek zur Anwendung benutzerdefinierter Transformationen

Siehe die Verwendung des Vonage Medienprozessors Leitfaden für Entwickler.

Veröffentlichung von Audio nur für Publisher mit geringer Bandbreite

Publisher können so konfiguriert werden, dass bei geringer Bandbreite das Video deaktiviert wird, während der Ton weiterhin aktiviert bleibt. Die Videoübertragung wird fortgesetzt, sobald sich die Bandbreite des Publishers verbessert. Weitere Informationen finden Sie unter Audio-Fallback Leitfaden für Entwickler.

Erkennen von Veränderungen der CPU-Leistung

Sie können Änderungen in der CPU-Auslastung des Geräts erkennen, indem Sie die Session cpuPerformanceChanged Ereignis. Das Ereignis enthält ein cpuPerformanceState Eigenschaft, die einen der folgenden Werte enthält: „nominal“, „fair“, „serious“, „critical“ (siehe diese W3C-Spezifikation). Als Reaktion auf dieses Ereignis kann eine Anwendung die Benutzer über den Ressourcenverbrauch informieren oder rechenintensive Prozesse deaktivieren, wie zum Beispiel Videotransformatoren. Siehe die Sitzung cpuPerformanceChanged Veranstaltung.

Der folgende Code deaktiviert die Videoaufnahme, sobald die CPU in einen kritischen Leistungszustand gerät, und aktiviert sie wieder, sobald der Zustand wieder „fair“ oder besser ist:

let videoDisabledByCPU = false;
  session.on('cpuPerformanceChanged', (event) => {
    if (event.cpuPerformanceState === 'critical'){
      // The application should alert the user why their video is being disabled
      publisher.publishVideo(false);
      videoDisabledByCPU = true;
    } else if (event.cpuPerformanceState === 'nominal' || event.cpuPerformanceState === 'fair'){
      if (videoDisabledByCPU){
        publisher.publishVideo(true);
        videoDisabledByCPU = false;
      }
    }
  })

Weitere Hinweise zur Optimierung der Gesprächsqualität finden Sie unter Überwachung der Anrufqualität.

Das ist wichtig: Diese API ist nur eingeschränkt verfügbar. cpuPerformanceChanged ist derzeit nur für Chrome 125+, Edge 125+ und Opera 111+ verfügbar.

Hinweise zur Fehlerbehebung:

  • Dieses Ereignis wird nur ausgelöst, wenn der Browser im Fokus ist.
  • Um dieses Ereignis in Verbindung mit Iframes zu nutzen, muss die Option Richtlinie zur Berechnung von Druckberechtigungen. Dies kann bei der Verwendung von Online-IDEs zu Problemen führen.

Weitere Optionen zur Anpassung der Benutzeroberfläche

Weitere Optionen zum Anpassen der Benutzeroberfläche finden Sie im Abschnitt Anpassen der Benutzeroberfläche Leitfaden.