メディア・プロセッサー（ウェブ）

Vonage Media Processorライブラリを使用して、公開ストリームにカスタム変換を適用します。

を使用することができます。 Publisher.setAudioMediaProcessorConnector() そして Publisher.setVideoMediaProcessorConnector() メソッドを使用して、Vonage Media Processor ライブラリを使用するカスタムオーディオトランスフォーマおよびカスタムビデオトランスフォーマを適用します。

トランスフォーマーの実装には3つの方法がある：

基本的なことだ： を使用する。 Publisher.applyVideoFilter() メソッドを使用すると、定義済みの背景ぼかしまたは背景置換フィルタを簡単に適用できます。このメソッドでは、Vonage Media Libraryを使用してこれらのフィルタを実装するため、必要な設定はわずかです：

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

中庸だ： のトランスフォーマーを使用することができます。 Vonage ML トランスライブラリ.

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

注：メディア変換は、すべてのデバイスでサポートされているわけではありません。見る対応ブラウザ.

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

ライブラリーには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 '@vonage/client-sdk-video';
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 '@vonage/client-sdk-video';
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);
    });

お客様のご要望

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

トランスフォーマーには十分なプロセッサーのサポートが必要です。サポートされているブラウザーであっても、バックグラウンド処理が利用可能な処理リソースを制限する場合、トランスフォーマーが安定しないことがあります。最適な結果を得るには、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のカスタマイズを案内する。