Anpassung von Audio und Video — React Native

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

Nur Audio oder Video veröffentlichen

Um Audio und Video ein- und auszuschalten, setzen Sie den publishAudio und publishVideo Eigenschaften der properties An die OTPublisher-Komponente:

<OTPublisher
  properties={{
    publishAudio: true,
    publishVideo: false,
  }}
/>

Standardmäßig sind diese eingestellt auf true (sowohl Audio als auch Video werden veröffentlicht).

Wenn Sie Audio oder Video ein- oder ausschalten, löst das OTSession-Objekt in jedem verbundenen Client einen streamPropertyChanged Ereignis mit dem changedProperty Eigenschaft des Ereignisobjekts, die auf "hasAudio" oder "hasVideo".

Veröffentlichung in einer reinen Sprachsitzung

Zum Einrichten einer reine Sprachsitzungsetzen Sie die videoTrack Eigenschaften der properties An die OTPublisher-Komponente zu false:

<OTPublisher
  properties={{
    videoTrack: false,
  }}
/>

Auflösung und Bildfrequenz für ein Video einstellen

Um eine empfohlene Videoauflösung für einen veröffentlichten Stream festzulegen, setzen Sie die resolution Eigenschaft der properties prop der Komponente OTPublisher:

<OTPublisher
  properties={{
    resolution: '1280x720',
  }}
/>

Diese resolution ist ein String, der die gewünschte Auflösung des Videos angibt. Das Format des Strings ist "widthxheight"wobei die Breite und Höhe in Pixeln angegeben werden. Gültige Werte sind "1920x1080", "1280x720", "640x480"und "320x240".

Die Standardauflösung für einen Stream (wenn Sie keine Auflösung angeben) ist 640x480 Pixel. Wenn das Client-System die von Ihnen angeforderte Auflösung nicht unterstützt, wird der Stream die nächstgrößere unterstützte Einstellung verwenden.

Am besten versuchen Sie, die Auflösung an die Größe anzupassen, in der das Video angezeigt werden soll. Wenn Sie das Video nur mit 320x240 Pixeln anzeigen, macht es keinen Sinn, mit 1280x720 oder 1920x1080 zu streamen. Durch die Verringerung der Auflösung können Sie Bandbreite sparen und Überlastungen und Verbindungsabbrüche vermeiden.

Anmerkung: Siehe die 1080p-Entwicklerhandbuch für Überlegungen zur Verwendung der 1080p-Auflösung.

Um eine empfohlene Bildrate für einen veröffentlichten Stream festzulegen, setzen Sie die frameRate Eigenschaft der properties prop der Komponente OTPublisher:

<OTPublisher
  properties={{
    frameRate: 7,
  }}
/>

Stellen Sie den Wert auf die gewünschte Bildrate des Videos in Bildern pro Sekunde ein. Gültige Werte sind 30 (der Standard), 15, 7 und 1.

Für Sitzungen, bei denen der OpenTok Media Router verwendet wird (Sitzungen mit demMedienbetrieb (auf „routed“ gesetzt), führt eine proportionale Verringerung der Bildrate zu einer entsprechenden Verringerung der maximalen Bandbreite, die der Stream nutzen kann. In einer Sitzung mit dem Medienbetrieb auf "Relayed" eingestellt ist, wird durch die Verringerung der Bildrate die Bandbreite des Streams nicht verringert.

Durch eine Verringerung der Bildrate lässt sich die benötigte Bandbreite reduzieren. Videos mit geringerer Auflösung können eine niedrigere Bildrate aufweisen, ohne dass der Nutzer einen nennenswerten Unterschied bemerkt. Wenn Sie also eine niedrige Auflösung verwenden, sollten Sie auch in Erwägung ziehen, eine niedrige Bildrate zu nutzen.

Sie können außerdem die Bildrate des Videostreams eines Abonnenten begrenzen. Weitere Informationen finden Sie unter Begrenzung der Bildrate eines abonnierten Streams.

Festlegen der vom Herausgeber verwendeten Kamera

Sie können den Herausgeber die rückwärtige Kamera des Geräts verwenden lassen, indem Sie eine properties der OTPublisher-Komponente und das Setzen der cameraPosition Eigenschaft dieses Objekts auf "back":

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

Beachten Sie, dass Sie auch einen Bildschirmfreigabe-Stream veröffentlichen können – bei dem die Quelle der Bildschirm des Clients ist und nicht eine Kamera. Weitere Informationen finden Sie unter Bildschirmfreigabe.

Aktivieren der Kamerataschenlampe (Blitzlicht)

Setzen Sie die cameraTorch Eigenschaft des Objekts, das als properties Stütze des OTPublisher Objekt, um das Kamerablitzlicht (Taschenlampe) während der Videoaufnahme zu aktivieren oder zu deaktivieren:

<OTPublisher
  properties={{
    cameraTorch: false,
  }}
/>

Der Standardwert ist false (die Taschenlampe wird nicht benutzt).

Beachten Sie, dass nicht alle Gerätekameras über ein Kamerablitzlicht verfügen. Wenn die aktive Kamera die Funktion des Kamerablitzes nicht unterstützt (z. B. unterstützt die Frontkamera diese Funktion normalerweise nicht), kann die Einstellung cameraTorch hat keine Wirkung.

Einstellen des Kamerazooms

Setzen Sie die cameraZoomFactor Eigenschaft des Objekts, das als properties Stütze des OTPublisher Objekt, um den Zoomfaktor der Kamera einzustellen:

<OTPublisher
  properties={{
    cameraZoomFactor: 0.7,
  }}
/>

Der Wert des Verhältnisses/Faktors reicht von 0,5 bis zum maximalen Zoomfaktor. Werte zwischen 0,5 und 1,0 stehen für Ultraweitwinkel (Herauszoomen), Werte zwischen 1,0 und dem maximalen Zoomfaktor für Heranzoomen. Der tatsächlich angewandte Zoomfaktor ist auf den Bereich beschränkt, der von der aktiven Kamerakonfiguration unterstützt wird - wenn die Kamera keinen Ultraweitwinkel unterstützt, werden Zoomfaktoren unter 1,0 nicht wirksam und es wird kein Zoom angewandt. Bei Werten, die über dem von der Kamera unterstützten maximalen Zoomfaktor liegen, wird der Zoomfaktor auf den maximal unterstützten Wert gesetzt.

Nur Audio- oder Videoabonnements

Um Audio oder Video für einen Teilnehmer zu deaktivieren, setzen Sie die subscribeToAudio oder subscribeToVideo Eigenschaften der properties Stütze, die in die OTSubscriber Komponente:

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
  }}
/>

Standardmäßig sind diese eingestellt auf true (sowohl Audio als auch Video werden genutzt).

Setzen Sie die subscribeToAudio pro Wenn du einen Stream abonnieren, können Sie festlegen, ob Sie zunächst Audio oder Video abonnieren möchten (sofern verfügbar). Der folgende Code abonniert beispielsweise nur Audio:

Beachten Sie jedoch, dass Sie Audio- oder Videostreams nur abonnieren können, wenn der Client, der den Stream veröffentlicht, Audio- oder Videodaten enthält. Beispielsweise führt die Einstellung subscribeToVideo zu 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)

Erkennen, ob ein Stream Audio oder Video enthält

In der OTSession streamCreated Die Veranstaltung umfasst hasAudio und hasVideo Eigenschaften:

<OTSession
  eventHandlers={{
    streamCreated: event => {
      console.log('Stream created -- stream ID:', event.streamId);
      console.log('hasAudio:', event.hasAudio);
      console.log('hasVideo:', event.hasVideo);
    }
  }}/>

Möglicherweise möchten Sie Statuseigenschaften auf der Grundlage der hasAudio und hasVideo Eigenschaften und passen Sie die Benutzeroberfläche für die OTSubscriber basierend auf diesen Statuswerten. Möglicherweise möchten Sie die Benutzeroberfläche anpassen, je nachdem, ob der Stream Audio oder Video enthält. 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 OTSession-Objekt sendet eine streamPropertyChanged Ereignis, wenn ein Stream Audio oder Video ein- oder ausschaltet. Das Ereignisobjekt hat eine changedProperty Eigenschaft eingestellt auf hasAudio oder hasVideo wenn sich der Ton oder das Video ändert. Die newValue Die Eigenschaft wird auf einen booleschen Wert gesetzt. Der folgende Code überwacht beispielsweise Änderungen an Audio- und Videodaten in einem Stream:

<OTSession
eventHandlers={{
  streamPropertyChanged: event => {
    if (event.changedProperty === 'hasAudio')
      // Adjust the UI for the subscriber to event.streamId.
    } else if (event.changedProperty === 'hasVideo') {
      // Adjust the UI for the subscriber to event.streamId.
    }
}}/>

Audio-Bitrate einstellen

Um die Audio-Bitrate für den Audiostream eines Publishers festzulegen, setzen Sie die audioBitrate Eigenschaft der properties Stütze, die in die OTPublisher Komponente:

<OTPublisher
  properties={{
    audioBitrate: 48000,
  }}
/>

Die audioBitrate ist 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. Legen Sie diesen Wert fest, um Audio in hoher Qualität zu ermöglichen (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)

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 properties Stütze, die in die OTPublisher Komponente:

<OTPublisher
  properties={{
    enableDtx: true,
  }}
/>

Weitere Informationen finden Sie hier Vonage Video API Wissensbasisartikel.

Filter auf veröffentlichte Videos anwenden

Verwenden Sie die OTPublisher.setVideoTransformers() Methode, um einen Videofilter auf ein veröffentlichtes Video anzuwenden. Sie können einen Hintergrund-Weichzeichnungsfilter oder einen Hintergrundbildfilter anwenden.

Das ist wichtig: Ab Version 2.28.0+ des Vonage Video React Native SDK müssen Sie die Vonage Media Library separat vom Vonage Video React Native SDK installieren. Weitere Informationen finden Sie unter Integration der Vonage-Mediathek.

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

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundBlur',
          properties: JSON.stringify({
            radius: 'low',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Beachten Sie, dass die OTPublisher.setVideoTransformers() Methode nimmt ein Array von Transformatorobjekten auf. Jedes Objekt hat zwei Eigenschaften:

  • A name Eigenschaft, die entweder auf 'BackgroundBlur' oder 'BackgroundReplacement'.

  • A properties Eigenschaft, die Optionen für den Filter definiert.

Einzelheiten finden Sie in der Dokumentation zum OTPublisher.setVideoTransformers() Methode.

Der folgende Code wendet einen Filter zur Ersetzung des Hintergrunds auf das Video eines Herausgebers an (nur auf iOS unterstützt):

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundReplacement',
          properties: JSON.stringify({
            image_file_path: 'path/to/image',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Um Videofilter aus dem veröffentlichten Stream zu entfernen, rufen Sie die OTPublisher.setVideoTransformers() Methode und geben Sie ein leeres Array ein.

Das ist wichtig: Filter zur Hintergrundunschärfe und zum Hintergrundaustausch sind ressourcenintensiv und erfordern Geräte mit hoher Rechenleistung. Es wird empfohlen, diese Transformationen nur auf unterstützten Geräten anzuwenden. Weitere Informationen finden Sie in der folgenden Dokumentation:

Anwendung eines Rauschunterdrückungsfilters auf ein veröffentlichtes Video

Verwenden Sie die OTPublisher.setAudioTransformers() Methode zur Anwendung eines Audiotransformators auf veröffentlichte Videos. Ein Transformator, der Rauschunterdrückungsfilter, wird unterstützt.

Das ist wichtig: Der Rauschunterdrückungsfilter nutzt die Vonage Media Library. Sie müssen die Vonage Media Library separat vom Vonage Video React Native SDK installieren. Weitere Informationen finden Sie unter Integration der Vonage-Mediathek.

Der folgende Code wendet einen Rauschunterdrückungsfilter auf das Video eines Herausgebers an:

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setAudioTransformers([
        {
          name: 'NoiseSuppression',
          properties: '',
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Um Audiotransformatoren aus dem veröffentlichten Stream zu entfernen, rufen Sie die OTPublisher.setAudioTransformers() Methode und geben Sie ein leeres Array ein.

Das ist wichtig: Audio-Transformationen sind ressourcenintensiv und erfordern Geräte mit hoher Rechenleistung. Es wird empfohlen, diese Transformationen nur auf unterstützten Geräten zu verwenden. Weitere Informationen finden Sie in der folgenden Dokumentation:

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

Publisher können so konfiguriert werden, dass sie in Situationen mit geringer Bandbreite das Video deaktivieren, während das Audio aktiviert bleibt. Die Videoveröffentlichung wird wieder aufgenommen, wenn sich die Bandbreite des Publishers verbessert.

Weitere Informationen finden Sie in der Audio-Fallback Leitfaden für Entwickler.

Einstellung der Präferenz für die Videoqualitätsreduzierung durch den Herausgeber

Wenn die Bandbreite oder die CPU begrenzt sind, kann die Video-Engine die Bildrate und/oder die Auflösung des Herausgebervideos reduzieren, um sich an die Einschränkungen anzupassen.

Die Degradierungspräferenz ist eine Konfigurationseinstellung, mit der sich dieses Verhalten anpassen lässt.

Die Entwickler sind für die Definition und Anwendung von Degradationspräferenzen entsprechend ihrem Anwendungsfall und ihren Anforderungen verantwortlich.

Es handelt sich um eine Voreinstellung, d. h. die Video-Engine versucht, die gewählte Voreinstellung zu befolgen, aber es gibt keine Garantie für das Ergebnis.

Diese Einstellung kann sich anders verhalten, wenn Sie skalierbares VideoDie Video-Engine kann beschließen, Ebenen zu entfernen, anstatt die Auflösung zu verringern.

Hinweis auf den Inhalt und Degradationspräferenz dienen unterschiedlichen, aber verwandten Zwecken: Der Inhaltshinweis beschreibt die Art des zu übertragenden Inhalts, während die Degradationspräferenz die Codierungsstrategie steuert. Wenn Sie einen Inhaltshinweis festlegen, bestimmt die Video-Engine automatisch die entsprechende Degradierungspräferenz (z. B. wird bei "Text" automatisch die Auflösung beibehalten). Eine explizit festgelegte Degradationspräferenz setzt diese automatische Auswahl außer Kraft.

Sie können diesen Wert mit einer der bereitgestellten DegradationPreference Werte:

Nicht festgelegt

<OTPublisher properties={{ degradationPreference: DegradationPreference.NotSet }}/>

Der Standardwert. Die Video-Engine legt die optimale Einstellung für die Qualitätsreduzierung fest.

Bildrate und Auflösung beibehalten

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRateAndResolution }}/>

Die Video-Engine versucht, die Bildrate konstant zu halten und die Auflösung nicht zu verringern.

Bildrate beibehalten

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRate }}/>

Die Video-Engine versucht, die Bildrate konstant zu halten, kann jedoch bei Bedarf die Auflösung verringern.

Auflösung beibehalten

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainResolution }}/>

Die Video-Engine verringert die Auflösung nicht, kann aber bei Bedarf die Bildrate reduzieren.

Ausgewogen

<OTPublisher properties={{ degradationPreference: DegradationPreference.Balanced }}/>

Die Video-Engine versucht, bei Bedarf ein Gleichgewicht zwischen der Verringerung der Auflösung und der Bildrate herzustellen.