音声と動画の設定 — React Native

以下の項目について、音声や映像の設定を変更できます。 公開された そして 購読済み ストリーム:

オーディオまたはビデオのみの公開

オーディオとビデオのオンとオフを切り替えるには、次のように設定します。 publishAudio そして publishVideo の特性である。 properties prop が OTPublisherコンポーネント:

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

デフォルトでは true (オーディオとビデオの両方が公開されている)。

オーディオまたはビデオのオン/オフを切り替えると、接続中の各クライアントの OTSession オブジェクトが streamPropertyChanged イベントを changedProperty イベントオブジェクトの "hasAudio" または "hasVideo".

音声のみのセッションでの発表

を設定する。 音声のみのセッションを設定する。 videoTrack の特性である。 properties prop が OTPublisherコンポーネント への false:

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

動画の解像度とフレームレートの設定

公開ストリームの推奨ビデオ解像度を設定するには、次のように設定します。 resolution プロパティの properties OTPublisher コンポーネントのプロップ:

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

これは resolution プロパティは文字列で、ビデオの解像度を指定します。文字列の形式は "widthxheight"ここで、幅と高さはピクセルで表されます。有効な値は "1920x1080", "1280x720", "640x480"そして "320x240".

ストリームのデフォルトの解像度(解像度を指定しない場合)は、640x480ピクセルです。クライアントシステムが要求した解像度をサポートできない場合、ストリームは次にサポートされる最大の設定を使用します。

解像度はビデオが表示されるサイズに合わせるのがベストです。もしビデオを320x240ピクセルでしか表示しないのであれば、1280x720や1920x1080でストリーミングする意味はありません。解像度を下げることで、帯域幅を節約し、輻輳や接続の切断を減らすことができます。

注: 参照 1080pデベロッパーガイド 1080p解像度を使用する際の注意事項については、こちらをご覧ください。

公開ストリームの推奨フレームレートを設定するには frameRate プロパティの properties OTPublisher コンポーネントのプロップ:

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

ビデオのフレームレートを設定します。有効な値は30(デフォルト)、15、7、1です。

OpenTok Media Router を使用するセッション(メディアモード (ルーティング設定に設定されている場合)、フレームレートを比例的に下げることで、ストリームが使用できる最大帯域幅も比例して減少します。ただし、セッションでは メディアモード を relayed に設定すると、フレームレートを下げてもストリームの帯域幅は減らない。

フレームレートを下げると、必要な帯域幅を削減できます。解像度の低い動画であれば、ユーザーにそれほど違いを感じさせずにフレームレートを下げることができます。したがって、低解像度を使用する場合は、フレームレートも低く設定することを検討するとよいでしょう。

また、サブスクライバーのビデオストリームのフレームレートを制限することもできます。詳細については、以下を参照してください。 購読中のストリームの フレームレートを制限する.

パブリッシャーが使用するカメラの設定

を設定することで、パブリッシャーにデバイスの背面カメラを使用させることができます。 properties OTPublisherコンポーネントのプロパティを設定し cameraPosition プロパティを "back":

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

なお、カメラではなくクライアントの画面をソースとする画面共有ストリームを配信することも可能です。詳細については、以下を参照してください。 画面共有.

カメラのトーチ(懐中電灯)を有効にする

を設定する。 cameraTorch として渡されたオブジェクトの properties の支柱である。 OTPublisher オブジェクトを使用して、ビデオ撮影中にカメラのフラッシュライト(トーチ)を有効または無効にします:

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

デフォルト値は false (懐中電灯は使わない)。

すべてのデバイスのカメラにカメラのフラッシュライトがあるわけではありません。アクティブなカメラがカメラのフラッシュライト機能をサポートしていない場合(例えば、フロントカメラは通常サポートしていません)、次のように設定します。 cameraTorch は効果がない。

カメラのズーム設定

を設定する。 cameraZoomFactor として渡されたオブジェクトの properties の支柱である。 OTPublisher オブジェクトを使用して、カメラのズーム比(ファクター)を設定します:

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

比率/倍率の値の範囲は、0.5から最大ズーム倍率までです。0.5から1.0の間の値は超広角(ズームアウト)を表し、1.0から最大ズーム倍率の間の値はズームインを表します。実際に適用されるズーム倍率は、アクティブなカメラの設定でサポートされる範囲にクランプされます - カメラが超広角をサポートしていない場合、1.0以下に設定されたズーム倍率は有効にならず、ズームは適用されません。カメラがサポートする最大ズーム倍率を超える値の場合、ズーム倍率はサポートされる最大値に設定されます。

オーディオまたはビデオのみの購読

加入者の音声または映像を無効にするには、次の設定を行います。 subscribeToAudio または subscribeToVideo の特性である。 properties に渡された。 OTSubscriber コンポーネントを使用している:

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

デフォルトでは true (音声と動画の両方が消費される)。

を設定する。 subscribeToAudio pro あなたが ストリームを購読する, オーディオとビデオ(利用可能な場合)のどちらを最初に購読するかを指定できます。たとえば、次のコードはオーディオのみを購読します:

ただし、ストリームを配信しているクライアントが音声または映像を含んでいる場合にのみ、音声または映像を購読できることに注意してください。たとえば、次のように設定すると subscribeToVideo への false は、ストリームを公開しているクライアントがオーディオのみを公開している場合は、効果がありません。

加入者の音声レベルを変更する

いつ ストリームを購読するを呼び出したときの加入者の初期音量を設定できます。 subscribe() メソッドを呼び出します:

// 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);

サブスクライバー・オブジェクトを作成した後、そのボリュームを設定するには、その setAudioVolume() メソッドに、0(無音)から100(フルボリューム)までの値を渡します:

subscriber.setAudioVolume(0); (silent)

ストリームがオーディオかビデオかを検出する

OTSession 内で streamCreated イベントの内容は以下の通りです hasAudio そして hasVideo プロパティー

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

に基づいてステート・プロパティを設定したい場合がある。 hasAudio そして hasVideo プロパティを設定し OTSubscriber これらの状態値に基づいてストリームにオーディオがあるかビデオがあるかによって、ユーザーインターフェースを調整したい場合があります。例えば、ストリームに音声があるかどうかをユーザに表示したい場合や、ストリームに動画がない場合に加入者を非表示にしたくない場合などです。

ストリームでオーディオやビデオが追加または削除されたことを検知する

OTSessionオブジェクトは streamPropertyChanged イベントは、ストリームがオーディオまたはビデオのオン/オフを切り替えるときに発生します。イベント・オブジェクトは changedProperty プロパティを hasAudio または hasVideo 音声や映像が変化したときその newValue プロパティはブール値に設定されます。たとえば、次のコードは、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.
    }
}}/>

オーディオのビットレートの設定

パブリッシャーのオーディオストリームのビットレートを設定するには audioBitrate プロパティの properties に渡された。 OTPublisher コンポーネントを使用している:

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

について audioBitrate は、公開されるオーディオの希望するビットレートを1秒あたりのビット数で指定します。設定可能な値の範囲は6,000~510,000です。高音質のオーディオを有効にするには、この値を設定します(または、低音質のオーディオで帯域幅の使用量を減らすには、この値を設定します)。

以下は推奨設定です:

  • 8,000~12,000(ナローバンド(NB)スピーチ用
  • 16,000~20,000(ワイドバンド(WB)スピーチ用
  • フルバンド(FB)スピーチで28,000~40,000ドル
  • フルバンド(FB)音楽用48,000~64,000ドル

Opus DTX によるオーディオ帯域幅の削減

オーパスDTX(不連続伝送) は、参加者が話していないときに帯域幅の使用量を削減できるオーディオコーデックである。これは、多くの音声参加者がいる大規模なセッションで役立ちます。

を設定することで、Opus DTX を有効にします。 enableDtx プロパティの properties に渡された。 OTPublisher コンポーネントを使用している:

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

詳細については、こちらをご覧ください Vonage Video API ナレッジベース記事.

公開済みの動画にフィルターを適用する

を使用する。 OTPublisher.setVideoTransformers() メソッドを使用して、公開されている動画に動画フィルタを適用できます。背景ぼかしフィルタや背景画像フィルタを適用できます。

重要だ: Vonage Video React Native SDK バージョン 2.28.0 以降では、Vonage Video React Native SDK とは別に Vonage Media Library をインストールする必要があります。詳細については、以下を参照してください。 Vonage Media Libraryの統合.

次のコードは、パブリッシャーの動画に背景ぼかしフィルターを適用します:

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

に注意してほしい。 OTPublisher.setVideoTransformers() メソッドはトランスフォーマーオブジェクトの配列を受け取ります。各オブジェクトには2つのプロパティがあります:

  • A name プロパティのいずれかに設定する。 'BackgroundBlur' または 'BackgroundReplacement'.

  • A properties プロパティで、フィルタのオプションを定義します。

詳細は OTPublisher.setVideoTransformers() メソッドを使用する。

次のコードは、パブリッシャーの動画に背景置換フィルタを適用します(iOS のみ対応):

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

公開済みのストリームから動画フィルターを削除するには、 OTPublisher.setVideoTransformers() メソッドに空の配列を渡す。

重要だ: 背景のぼかしや背景置換フィルターはリソースを多く消費するため、高い処理能力を持つデバイスが必要です。これらの変換は、対応しているデバイスでのみ使用することをお勧めします。以下のドキュメントを参照してください:

公開済みの動画にノイズ抑制フィルターを適用する

を使用する。 OTPublisher.setAudioTransformers() メソッドを使用して、公開されているビデオにオーディオトランスを適用することができます。1つのトランスフォーマー、ノイズ抑制フィルターがサポートされています。

重要だ: ノイズ抑制フィルターでは、Vonage Media Library を使用します。Vonage Media Library は、Vonage Video React Native SDK とは別にインストールする必要があります。詳細については、以下を参照してください。 Vonage Media Libraryの統合.

次のコードは、パブリッシャーのビデオにノイズ抑制フィルタを適用します:

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

公開ストリームからオーディオトランスを削除するには OTPublisher.setAudioTransformers() メソッドに空の配列を渡す。

重要だ: オーディオ変換処理はリソースを大量に消費するため、高い処理能力を持つデバイスが必要です。これらの変換処理は、対応しているデバイスでのみ使用することをお勧めします。以下のドキュメントを参照してください:

低帯域幅のパブリッシャー向け音声のみのパブリッシング

パブリッシャは、帯域幅が狭い場合にビデオを無効にしてオーディオを有効にするように設定できます。パブリッシャーの帯域幅が改善されると、動画の公開が再開されます。

詳細は オーディオのフォールバック 開発者ガイド

パブリッシャーの動画画質低下設定の設定

帯域幅やCPUが制限されている場合、ビデオエンジンはパブリッシャービデオのフレームレートや解像度を下げ、制限に合わせることができる。

「劣化優先度」は、この動作を微調整できる設定項目です。

開発者は、ユースケースや要件に応じて、劣化プリファレンスを定義し、適用する責任がある。

これはプリファレンスとして機能し、ビデオエンジンは選択されたプリファレンスに従おうとするが、結果は保証されない。

を使用する場合、このプリファレンスは異なる動作をすることがあります。 スケーラブルビデオビデオエンジンは、解像度を落とす代わりにレイヤーを削除することができる。

コンテンツのヒント とデグラデーション・プリファレンスは、異なるが関連した目的を果たす:Content Hint は伝送されるコンテンツのタイプを記述し、Degradation preference はエンコーディング戦略を制御します。コンテンツヒントを設定すると、ビデオエンジンは自動的に適切なデグラデーションプリファレンスを決定します(たとえば、"text" は自動的に解像度を維持するように選択します)。劣化プリファレンスを明示的に設定すると、この自動選択が上書きされます。

この値は、提供された DegradationPreference 価値観の違いだ:

未設定

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

デフォルト値です。ビデオエンジンが最適な画質低下設定を決定します。

フレームレートと解像度を維持する

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

ビデオエンジンは、フレームレートを安定させ、解像度を下げないように努めます。

フレームレートを維持する

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

ビデオエンジンはフレームレートを一定に保つよう努めますが、必要に応じて解像度を下げる場合があります。

解像度を維持する

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

ビデオエンジンは解像度を下げることはありませんが、必要に応じてフレームレートを下げる場合があります。

バランスが取れている

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

ビデオエンジンは、必要に応じて解像度とフレームレートの両方を調整し、バランスを取るよう努めます。