Vonage Media Processorライブラリの使用

Vonage Media Processor ライブラリを使用して、音声や動画にカスタム変換を適用します。

を使用することができます。 Publisher.setAudioMediaProcessorConnector(), Publisher.setVideoMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector()そして Subscriber.setVideoMediaProcessorConnector()、Vonage Media Processor ライブラリを使用して、オーディオおよびビデオにカスタムオーディオ・ビデオトランスフォーマーを適用する方法です。「Publisher」メソッドはサブスクライバーのビデオ全体に影響を及ぼしますが、「Subscriber」メソッドはその単一のサブスクライバーにのみ適用されます。

OpenTok.js には、トランスフォーマーを実装するための 3 つの方法が含まれています：

基本的なことだ： を使用する。 Publisher.applyVideoFilter() あらかじめ定義された背景ぼかしや背景置換フィルターを簡単に適用する方法です。以下の Publisher.applyAudioFilter() あらかじめ定義された高度なノイズ抑制フィルターを簡単に適用する方法です。これらの方法では、Vonage Media Library を使用してこれらのフィルターを実装しており、必要な設定はわずかです：

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

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

参照背景ぼかしまたは背景置換フィルターの適用そして高度なノイズ抑制フィルタの適用.

中庸だ： Vonage MLトランスフォーマーに含まれるトランスフォーマーを使用できます（[@vonage/ml-transformers](https://www.npmjs.com/package/@vonage/ml-transformers)) ライブラリ。
コピー
```
const config = {
  transformerType: 'VirtualBackground',
  backgroundAssetUri: "https://MY_IMAGE_URL"
};
const processor = await createVonageMediaProcessor(config);
publisher.setVideoMediaProcessorConnector(processor.getConnector());
```
参照背景画像の置き換えそして背景ぼかしサンプルアプリ

先進的だ： を実装した独自のトランスフォーマークラスを書くことができます。変圧器クラスである：

class OverlayTextTransformer  implements  Transformer {
  // transform function must be implemented.
  transform(frame:any, controller:TransformStreamDefaultController) {
    // This will be more complicated in a real-world transformer...
    this.startCtx_.drawImage(frame, 0, 0, .., ..,)
    this.startCtx_.font = "30px Arial";
    this.startCtx_.fillText(this.message_, 50, 150);
    frame.close();
    controller.enqueue(new VideoFrame(this.startCanvas_, {timestamp, alpha: 'discard'}));
  }
}

const transformer = new OverlayTextTransformer('Hello World'); const transformers = [ transformer ] const mediaProcessor = new MediaProcessor(); mediaProcessor.setTransformers(transformers); const mediaProcessorConnector = new MediaProcessorConnector(mediaProcessor); publisher.setVideoMediaProcessorConnector(mediaProcessorConnector);

参照 Vonageメディアライブラリからビデオトランスを適用する.

についてボネージ・メディア・プロセッサーライブラリ、以下から利用可能です npmの使用を容易にする。挿入可能なストリーム Video および Audio トラックに対して変換処理を実行する API。

背景ぼかしまたは背景置換フィルターの適用

参照本書.

高度なノイズ抑制フィルタの適用

参照本書.

Vonageメディアライブラリからビデオトランスを適用する

ライブラリーには2つの主要なクラスがある：

メディアプロセッサ - トランスを制御し、以下を含む setTransformers() メソッドでトランスフォーマーを設定できる。

メディアプロセッサーコネクター - を受け入れる。 MediaProcessor オブジェクトを作成し、入力トラックと出力トラックを処理します。OpenTok.jsの実装はトラックを処理します。あなたは MediaProcessorConnector インスタンスだ。

を使用する。 MediaProcessorConnector 出版社のオーディオやビデオにトランスを接続するには Publisher.setAudioMediaProcessorConnector() そして Publisher.setVideoMediaProcessorConnector() のメソッドがある。

Publisher.setVideoMediaProcessorConnector()メソッド

について Publisher.setVideoMediaProcessorConnector() メソッドは、公開ストリームにビデオ変換を適用します：

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setVideoMediaProcessorConnector(connector);
});

注：について Publisher.setVideoMediaProcessorConnector() メソッドは Publisher.applyVideoFilter() メソッドを使用する。

Publisher.setAudioMediaProcessorConnector()メソッド

について Publisher.setAudioMediaProcessorConnector() は、公開ストリームにオーディオトランスを適用します：

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
const publisher = OT.initPublisher('targetDiv', () => {
  publisher.setAudioMediaProcessorConnector(connector);
});

Subscriber.setVideoMediaProcessorConnector() メソッド

について Subscriber.setVideoMediaProcessorConnector() このメソッドは、サブスクライブされたストリームにビデオトランスフォーマーを適用します：

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setVideoMediaProcessorConnector(connector);

Subscriber.setAudioMediaProcessorConnector() メソッド

について Subscriber.setAudioMediaProcessorConnector() 登録済みのストリームにオーディオトランスフォーマーを適用します：

import { MediaProcessor, MediaProcessorConnector } from '@vonage/media-processor';
import OT from '@opentok/client';
import MyTransformer from './path/to/my-transformer';

const mediaProcessor = new MediaProcessor();
const transformers = [
  new MyTransformer(),
];

mediaProcessor.setTransformers(transformers);
const connector = new MediaProcessorConnector(mediaProcessor);
await subscriber.setAudioMediaProcessorConnector(connector);

お客様のご要望

で使用される挿入可能ストリームAPI。 Publisher.setVideoMediaProcessorConnector(), Subscriber.setVideoMediaProcessorConnector() そして Publisher.applyVideoFilter() これらのメソッドは、Chrome、Firefox、Electron、Opera、Edge、Samsung Internet、Android版WebViewの最新バージョン、およびSafari（バージョン26以降）とiOS版WebView（バージョン26以降）の最新バージョンでサポートされています。 Publisher.setAudioMediaProcessorConnector(), Subscriber.setAudioMediaProcessorConnector() そして Publisher.applyAudioFilter() その他の（Chromiumベースではない）ブラウザやiOSではサポートされていません。クライアントがこれらの機能をサポートしているかどうかは、 OT.hasMediaProcessorSupport() メソッドを使用する。

トランスフォーマー、オーディオフィルター、およびビデオフィルターを利用するには、十分なプロセッサ性能が必要です。対応しているブラウザであっても、バックグラウンドプロセスによって利用可能な処理リソースが制限されている場合、トランスフォーマーの動作が不安定になることがあります。最適な結果を得るには、Chrome（デスクトップ版またはAndroid版）をご利用ください。

最高のユーザー体験のために、ラップトップ／デスクトップ・コンピューターがこれらの最低要件を満たしていることを確認してください：

CPU - Intel Core i5（4コア以上）またはApple Silicon M1（以上）
8G RAM（またはそれ以上）
専用GPU（NVIDIAなど）

オペレーティングシステムによっては、CPUの性能を絞ることでエネルギーを節約する（例えば、ノートパソコンのバッテリー寿命を延ばす）ために、複数のバッテリー設定やモードを提供する場合があります。その結果、トランスフォーマーのパフォーマンスが最適化されず、不要なオーディオやビデオのアーチファクトが発生することがあります。最適なパフォーマンスモードを使用するようにオペレーティングシステムを設定することをお勧めします。違うこのような場合は、低電力モードを使用する）。

多くの動画変換（背景ぼかしなど）は、セグメンテーションを使用して、背景から話者を分離します。最良の結果を得るには、適切な照明と無地の背景を使用してください。照明が不十分であったり、背景が複雑であったりすると、映像にアーチファクトが発生することがあります（たとえば、話し手や話し手がかぶっている帽子が背景と一緒にぼやけてしまうことがあります）。

変換の実装が「基本」、「中級」、あるいは「上級」のいずれであるかにかかわらず、サポートされているデバイスについては、できるだけ多くのデバイスでベンチマークテストを実施する必要があります。

SessionのcpuPerformanceChangedイベントを使用すると、CPUのパフォーマンスの変化を検知し、必要に応じてビデオトランスフォーマーを無効にすることができます。詳しくは CPUのパフォーマンスの変化の検出.

通話品質の最適化に関するその他のガイドラインについては、以下を参照してください。通話品質モニタリング.

トランスフォーマーの詳細とサンプルコード

詳しくはボネージ・メディア・プロセッサーライブラリのドキュメント。

について opentok-web-samples repoには、OpenTok.jsで公開されたストリームに変換を適用するためにVonage Media Processorライブラリを使用した以下のサンプルアプリが含まれています：

ベーシック・オーディオ・トランス - ウェブワーカーと、ウェブワーカー用の独立したスレッドを使用して、オーディオトランスを適用する方法を示します。
ベーシック・ビデオトランス - canvas と Web ワーカー、Web ワーカー用の独立したスレッドを使用して、動画トランスフォームを適用する方法を示します。
基本・ビデオ・ズーム — 基本的なトランスフォーマーを使用してパブリッシャーをズームする方法について説明します。
中程度の背景ぼかし - からビデオトランスを適用する方法を示します。 @vonage/ml-transformers モジュールである。

Vonage Media Transformersライブラリを使用するサンプルは他にもあります。これ.

その他のユーザー・インターフェースのカスタマイズ・オプション

ユーザーインターフェイスをカスタマイズするためのその他のオプションについては UIのカスタマイズを案内する。