メディア・プロセッサー(ウェブ)
Vonage Media Processorライブラリを使用して、公開ストリームにカスタム変換を適用します。
を使用することができます。 Publisher.setAudioMediaProcessorConnector() そして Publisher.setVideoMediaProcessorConnector() メソッドを使用して、Vonage Media Processor ライブラリを使用するカスタムオーディオトランスフォーマおよびカスタムビデオトランスフォーマを適用します。
トランスフォーマーの実装には3つの方法がある:
- 基本的なことだ: を使用する。
Publisher.applyVideoFilter()メソッドを使用すると、定義済みの背景ぼかしまたは背景置換フィルタを簡単に適用できます。このメソッドでは、Vonage Media Libraryを使用してこれらのフィルタを実装するため、必要な設定はわずかです:
- 中庸だ: のトランスフォーマーを使用することができます。 Vonage ML トランスライブラリ.
参照 背景画像の置き換え そして 背景ぼかし サンプルアプリ
- 先進的だ: を実装した独自のトランスフォーマークラスを書くことができます。 変圧器 クラスである:
注: メディア変換は、すべてのデバイスでサポートされているわけではありません。見る 対応ブラウザ.
について ボネージ・メディア・プロセッサー ライブラリー npmの使用を容易にする。 挿入可能なストリーム Video および Audio トラックに対して変換処理を実行する API。
ライブラリーには2つの主要なクラスがある:
- メディアプロセッサ - トランスを制御し、以下を含む setTransformers() メソッドでトランスフォーマーを設定できる。
- メディアプロセッサーコネクター - を受け入れる。
MediaProcessorオブジェクトを作成し、入力トラックと出力トラックを処理します。OpenTok.jsの実装はトラックを処理します。あなたはMediaProcessorConnectorインスタンスだ。
を使用する。 MediaProcessorConnector 出版社のオーディオやビデオにトランスを接続するには Publisher.setAudioMediaProcessorConnector() そして Publisher.setVideoMediaProcessorConnector() のメソッドがある。
Publisher.setVideoMediaProcessorConnector()メソッド
について Publisher.setVideoMediaProcessorConnector() メソッドは、公開ストリームにビデオ変換を適用します:
注: について Publisher.setVideoMediaProcessorConnector() メソッドは Publisher.applyVideoFilter() メソッドを使用する。
Publisher.setAudioMediaProcessorConnector()メソッド
について Publisher.setAudioMediaProcessorConnector() は、公開ストリームにオーディオトランスを適用します:
お客様のご要望
で使用される挿入可能ストリームAPI。
Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() そして Publisher.applyVideoFilter() メソッドは、Chrome、Firefox、Electron、Opera、Edge、Samsung Internet、WebView Android、およびSafari(バージョン26以上)とiOS WebView(バージョン26以上)の最新バージョンでサポートされています。
Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() そして Publisher.applyAudioFilter() は、他の(Chromiumベースでない)ブラウザやiOSではサポートされていません。
クライアントがこの機能をサポートしているかどうかは
OT.hasMediaProcessorSupport('audio')
メソッドを使用する。
トランスフォーマーには十分なプロセッサーのサポートが必要です。サポートされているブラウザーであっても、バックグラウンド処理が利用可能な処理リソースを制限する場合、トランスフォーマーが安定しないことがあります。最適な結果を得るには、Chrome(デスクトップまたはAndroid)を使用してください。
最高のユーザー体験のために、ラップトップ/デスクトップ・コンピューターがこれらの最低要件を満たしていることを確認してください:
- CPU - Intel Core i5(4コア以上)またはApple Silicon M1(以上)
- 8G RAM(またはそれ以上)
- 専用GPU(NVIDIAなど)
オペレーティングシステムによっては、CPUの性能を絞ることでエネルギーを節約する(例えば、ノートパソコンのバッテリー寿命を延ばす)ために、複数のバッテリー設定やモードを提供する場合があります。その結果、トランスフォーマーのパフォーマンスが最適化されず、不要なオーディオやビデオのアーチファクトが発生することがあります。最適なパフォーマンスモードを使用するようにオペレーティングシステムを設定することをお勧めします。 違う このような場合は、低電力モードを使用する)。
多くの動画変換(背景ぼかしなど)は、セグメンテーションを使用して、背景から話者を分離します。最良の結果を得るには、適切な照明と無地の背景を使用してください。照明が不十分であったり、背景が複雑であったりすると、映像にアーチファクトが発生することがあります(たとえば、話し手や話し手がかぶっている帽子が背景と一緒にぼやけてしまうことがあります)。
変換に関係なく、できるだけ多くのサポート対象デバイスでベンチマークテストを実施する必要があります。
トランスフォーマーの詳細とサンプルコード
詳しくは ボネージ・メディア・プロセッサー ライブラリのドキュメント。
について ビデオAPI-ウェブサンプル repoには、OpenTok.jsで公開されたストリームに変換を適用するためにVonage Media Processorライブラリを使用した以下のサンプルアプリが含まれています:
- ベーシック・オーディオ・トランス - ウェブワーカーと、ウェブワーカー用の独立したスレッドを使用して、オーディオトランスを適用する方法を示します。
- ベーシック・ビデオトランス - canvas と Web ワーカー、Web ワーカー用の独立したスレッドを使用して、動画トランスフォームを適用する方法を示します。
- パブリッシャーをズームするための基本的なトランスフォーマーの使い方を示します。
- 中程度の背景ぼかし - からビデオトランスを適用する方法を示します。
@vonage/ml-transformersモジュールである。
Vonage Media Transformersライブラリを使用するサンプルは他にもあります。 これ.
その他のユーザー・インターフェースのカスタマイズ・オプション
ユーザーインターフェイスをカスタマイズするためのその他のオプションについては UIのカスタマイズ を案内する。