音声と映像の設定 — Web
以下の項目について、音声や映像の設定を変更できます。 公開された そして 購読済み ストリーム:
- オーディオまたはビデオのみの公開
- 動画の解像度とフレームレートの設定
- パブリッシャーが使用するカメラの切り替え
- パブリッシャーの動画のローカル表示をミラーリングする
- パブリッシャーが使用するオーディオソースの切り替え
- 使用するオーディオ出力の切り替え
- パブリッシャーがオーディオ入力デバイスを切り替えたことを検知する
- 音声のみのセッションでの発表
- オーディオまたはビデオのみの購読
- 加入者の音声レベルを変更する
- ストリームがオーディオかビデオかを検出する
- ストリームでオーディオやビデオが追加または削除されたことを検知する
- 音声のみのセッションにおける最適化
- 音質の調整
- Opus DTX によるオーディオ帯域幅の削減
- 音声や動画にフィルターやエフェクトを適用する
- 低帯域幅のパブリッシャー向け音声のみのパブリッシング
- CPUのパフォーマンスの変化の検出
- その他のユーザー・インターフェースのカスタマイズ・オプション
オーディオまたはビデオのみの公開
いつ パブリッシャー・オブジェクトの作成この場合、最初にオーディオのみをパブリッシュするか、ビデオのみをパブリッシュするかを指定できます。例えば、次のコードは音声のみのパブリッシャーを作成します:
var pubOptions = {publishAudio:true, publishVideo:false};
// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);
デフォルトでは、Subscriber オブジェクトは、オーディオおよびビデオが利用可能な場合にそれらを購読するように初期化されます。
一旦 Publisherオブジェクトを作成しました, 以下の関数を呼び出すことで、音声と映像のオン/オフを切り替えることができます。 publishAudio() そして publishVideo() メソッド(ブール値を渡す)。例えば、次のコードはオーディオをオフにします:
publisher.publishAudio(false);
で動画の表示/非表示を切り替える場合、 publishVideo() メソッドでは、動画の配信開始または停止後に実行されるオプションの完了ハンドラを渡すことができます。たとえば、以下のコードを使用すると、動画の配信後に UI を変更することができます:
publisher.publishVideo(true, (error) => { if (!error) { // You may want to adjust the user interface to let users know // their video is visible to others } });
オーディオまたはビデオのオン/オフを切り替えると、接続されている各クライアントのSessionオブジェクトが streamPropertyChanged イベント。詳細については、以下を参照してください。 StreamPropertyChangedイベント.
動画の解像度とフレームレートの設定
パブリッシャーのストリームのフレームレートと解像度は resolution に渡すオプションの OT.initPublisher() メソッドを参照してください。参照 ストリームのビデオ解像度を設定する そして ストリームのフレームレートを設定する.
また、パブリッシャーのストリームのフレームレートと解像度は setPreferredResolution そして setPreferredFrameRate パブリッシャーのAPI。詳細については、以下を参照してください。 パブリッシャー向けの優先フレームレートと解像度の変更.
以下の設定を行うことで、サブスクライバーのストリームのフレームレートと解像度を設定できます。 preferredFrameRate そして preferredResolution に渡しするオプションのプロパティ session.subscribe() メソッドを使用してください。を設定することをお勧めします。 preferreResolution オプションで "auto" CPUおよびネットワークの使用率を最適化するため。詳しくは 加入者向けの推奨フレームレートと解像度の設定.
パブリッシャーが使用するカメラの切り替え
を呼び出すことで、パブリッシャーのビデオ・ソースとして使用するビデオ入力デバイス(カメラ)を切り替えることができます。 Publisher.cycleVideo() または Publisher.setVideoSource() メソッドを使用する:
Publisher.cycleVideo()
について Publisher.cycleVideo() メソッドを使用すると、使用可能なビデオソース(カメラ)を循環させることができます。たとえば、モバイル・デバイスでは、フロント・カメラとバック・カメラを切り替えることができます。このメソッドは、操作が正常に完了したときに解決されるプロミスを返します。プロミスは deviceId プロパティには、使用するカメラのデバイスIDが設定される:
publisher.cycleVideo().then(console.log);
// Output: {deviceId: "967a86e52..."}
もしエラーがあれば、約束は拒否される。これは次のような場合に発生する:
- ユーザーはビデオ入力装置へのアクセスを拒否した。
- パブリッシャーがカメラ映像ソースを使用していない。このメソッドはスクリーン共有パブリッシャー、MediaStreamTrackソースを使用しているパブリッシャー、ビデオトラックを含まないパブリッシャー(音声のみのパブリッシャー)には使えません。
- ビデオ入力装置(カメラ)はありません。
- ビデオ入力デバイスからビデオを取得する際にエラーが発生しました。
この方法はカメラ映像ソースを使用しているパブリッシャーにのみ有効であることに注意してください。
Publisher.setVideoSource()
について Publisher.setVideoSource() メソッドでは、新しいビデオ・ソース(カメラ)のデバイス ID を渡すことができます。このメソッドは、操作が完了したときに解決されるプロミスを返します:
publisher.setVideoSource(deviceId)
.then(() => console.log('video source set'))
.catch((error) => console.error(error.name));
以下はエラーになります:
- もし
videoSourceIdパラメータが文字列でないか、有効なビデオ入力デバイスのデバイス ID でない場合、約束はエラーで拒否されます。nameプロパティを'OT_INVALID_VIDEO_SOURCE'. - パブリッシャーが現在カメラ入力を使っていない場合、プロミスはエラーで拒否され
nameプロパティを'OT_SET_VIDEO_SOURCE_FAILURE'.
を使用することができます。 OT.getDevices() メソッドを使って、利用可能なビデオ入力デバイスを列挙する(そしてデバイスIDを取得する)。
を使用することができます。 Publisher.getVideoSource() メソッドを使用して、現在のビデオ・ソースとそのデバイスID(ビデオ入力デバイスの場合)を取得します。
パブリッシャーの動画のローカル表示をミラーリングする
を設定することができます。 mirror に渡されたオプションの OT.initPublisher() メソッドを使うことで、パブリッシャーのローカルでレンダリングされたビデオをミラーリングすることができます (true)または(false).デフォルトでは、カメラ映像をソースとするパブリッシャーでは映像はミラーリングされ、スクリーン共有映像ではミラーリングされません。
この設定は、パブリッシャのクライアント アプリケーションでレンダリングされる動画にのみ影響します。サブスクライブしているクライアントの動画には影響しません。
パブリッシャーが使用するオーディオソースの切り替え
を呼び出すことで、パブリッシャーのオーディオ・ソースとして使用されるマイクまたはMediaStreamTrackオブジェクトを切り替えることができます。 setAudioSource() メソッドを呼び出します。
マイクまたはオーディオMediaStreamTrackオブジェクトのデバイスIDを Publisher.setAudioSource() メソッドを呼び出します。このメソッドは、エラー時に拒否される Promise を返します ( setAudioSource()).
例えば、次のコードは cycleMicrophone() 機能で、使用可能なマイクを循環させます:
// Setting an audio source to a new MediaStreamTrack
const stream = await OT.getUserMedia({
videoSource: null
});
const [audioSource] = stream.getAudioTracks();
publisher.setAudioSource(audioSource).then(() => console.log('Audio source updated'));
// Cycling through microphone inputs
let audioInputs;
let currentIndex = 0;
OT.getDevices((err, devices) => {
audioInputs = devices.filter((device) => device.kind === 'audioInput');
// Find the right starting index for cycleMicrophone
audioInputs.forEach((device, idx) => {
if (device.label === publisher.getAudioSource().label) {
currentIndex = idx;
}
});
});
const cycleMicrophone = () => {
currentIndex += 1;
let deviceId = audioInputs[currentIndex % audioInputs.length].deviceId;
publisher.setAudioSource(deviceId);
};
について Publisher.setAudioSource() メソッドはオーディオソースを持つパブリッシャーに対してのみ機能します。もし audioSource への null (または falseを呼び出すとき OT.initPublisher()この場合、後からオーディオソースをパブリッシャーに追加することはできません。
について Publisher.getAudioSource() メソッドはパブリッシャーの現在のオーディオ入力ソースとして使われている MediaStreamTrack オブジェクトを返します。
について OT.getDevices() メソッドは、ブラウザで利用可能なオーディオおよびビデオ入力デバイスを列挙する。
使用するオーディオ出力の切り替え
すべてのパブリッシャーおよびサブスクライバーからの音声再生に使用するオーディオ出力デバイス(スピーカーまたはヘッドフォン)を切り替えることができます(ブラウザ上のすべてのOpenTokセッションにおいて)。
について OT.getAudioOutputDevices() メソッドは、ブラウザで利用可能なオーディオおよびビデオ入力デバイスを列挙する。
について OT.getActiveAudioOutputDevice() メソッドは、現在アクティブなオーディオ出力デバイスを識別する。
を使用する。 OT.setAudioOutputDevice() メソッドを使用して、オーディオ出力デバイスを設定します。
例えば、次のコードは cycleAudioOutput() 利用可能なオーディオ出力デバイスを循環させる機能:
// Cycling through audio output devices
let currentIndex = 0;
const audioOutputs = await OT.getAudioOutputDevices();
const currentOutputDevice = await OT.getActiveAudioOutputDevice();
audioOutputs.forEach((device, index) => {
if (device.label === currentOutputDevice.label) {
currentIndex = index;
}
});
const cycleAudioOutput = async () => {
currentIndex += 1;
let deviceId = audioOutputs[currentIndex % audioOutputs.length].deviceId;
await OT.setAudioOutputDevice(deviceId);
};
パブリッシャーがオーディオ入力デバイスを切り替えたことを検知する
デフォルトでは、オーディオ入力デバイスの管理が無効になっていない限り、オーディオ入力デバイスが追加または削除されると、SDKはパブリッシャ・オブジェクトのオーディオ入力デバイスの切り替えを自動的に処理します。以下を参照してください。 デフォルトのオーディオ入力デバイス管理を無効にする オーディオ入力デバイスの自動切り替えを無効にしたい場合。
パブリッシャー・オブジェクトは audioInputDeviceChanged イベントがディスパッチされます。このイベントは、新しいオーディオ入力デバイスが追加されたとき、現在のオーディオ入力デバイスが削除されたとき、またはパブリッシャーのオペレーティング・システムがオーディオ入力デバイスを切り替えたときにディスパッチされます。ディスパッチされるイベントには device プロパティには、オーディオ入力デバイスに関する情報が含まれています。マイクが変更されたことをユーザーに知らせたい場合もあるでしょう:
publisher.on('audioInputDeviceChanged', (event) => {
console.log('audio input device', event.device);
console.log(`changing device to: ${event.device.label}`);
});
音声のみのセッションでの発表
音声のみのセッションを設定するには videoSource プロパティ null または false あなたが 各Publisherオブジェクトを作成する セッション内で。たとえば、次のコードは音声専用セッション用のパブリッシャーを作成します:
var pubOptions = {videoSource: null};
// Replace replacementElementId with the ID of the DOM element to replace:
publisher = OT.initPublisher(replacementElementId, pubOptions);
を設定する。 videoSource プロパティ null公開クライアントはカメラへのアクセスを要求せず、ビデオは公開されません。
オーディオまたはビデオのみの購読
いつ ストリームを購読するまた、最初にオーディオとビデオのどちらをサブスクライブするかを指定することもできます(利用可能な場合)。例えば、以下のコードはオーディオ・ストリームのみを購読します:
var options = {subscribeToAudio:true, subscribeToVideo:false};
// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
replacementElementId,
options);
Subscriberオブジェクトを作成した後、オーディオのオン/オフを切り替えるには、次のようにします。 subscribeToAudio() メソッドを呼び出します:
subscriber.subscribeToAudio(false); // audio off
subscriber.subscribeToAudio(true); // audio on
ビデオのオン/オフは subscribeToVideo() メソッドを呼び出します:
subscriber.subscribeToVideo(false); // video off
subscriber.subscribeToVideo(true); // video on
ただし、オーディオまたはビデオを購読できるのは、ストリームを公開しているクライアントがオーディオまたはビデオを含んでいる場合のみであることに注意してください。たとえば 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)
ユーザーは、サブスクライバーのユーザーインターフェースコントロールを使用して、サブスクライバーをミュートすることもできる。
ストリームがオーディオかビデオかを検出する
デフォルトでは、サブスクライバーオブジェクトはオーディオとビデオの両方を再生します(利用可能な場合)。ストリームにオーディオまたはビデオがあるかどうか(ストリームのパブリッシャーがオーディオまたはビデオをストリーミングしている場合)は hasAudio そして hasVideo プロパティを使用する:
if (!stream.hasAudio) {
// You may want to adjust the user interface
}
if (!stream.hasVideo) {
// You may want to adjust the user interface
}
例えば ストリームを購読する例えば、ストリームに音声があるかないかをユーザーに表示したい場合や、ストリームに映像がない場合、加入者を非表示にしたくない場合があります。例えば、ストリームにオーディオがあるかどうかをユーザーに示したい場合や、ストリームにビデオがない場合、購読者を非表示にしたくない場合があります。
ストリームでオーディオやビデオが追加または削除されたことを検知する
Session オブジェクトは streamPropertyChanged イベントは、ストリームがオーディオまたはビデオのオン/オフを切り替えるときに発生する。このイベントは streamPropertyChanged イベントは StreamPropertyChangedイベント クラスを持つ。イベント・オブジェクトは changedProperty プロパティ(変更されたストリームプロパティを特定する)と newValue プロパティ(Stream プロパティの新しい値)。たとえば、次のコードは、Stream 内のオーディオおよびビデオの変更を監視します:
session.on("streamPropertyChanged", function (event) {
var subscribers = session.getSubscribersForStream(event.stream);
for (var i = 0; i < subscribers.length; i++) {
// You may want to display some UI text for each
// subscriber, or make some other UI change,
// based on event.changedProperty and
// event.newValue
}
}
サブスクライバーのビデオは、パブリッシャーが無効にしたり有効にしたりする以外の理由で、無効にしたり有効にしたりできることに注意してください。サブスクライバー オブジェクトは videoDisabled そして videoEnabled イベントを、サブスクライバのストリームを無効または有効にするすべての条件で指定します。詳細は 加入者 videoDisabled そして チャンネル登録者向け動画が有効になっています のイベントがある。
音声のみのセッションにおける最適化
音声のみのセッションでは、ユーザーインターフェースに関してさまざまな最適化を行うことができます。詳しくは、 声 チュートリアル
音質の調整
について OT.initPublisher() メソッドには、音質を調整するオプションがあります。これにより、高音質(または低音質)のオーディオを使用するストリームを公開できます:
オーディオビットレート (Numbers) - 公開するオーディオの希望ビットレート。対応する値の範囲は6,000~510,000です(無効な値は無視されます)。(無効な値は無視されます。) 高品質のオーディオを有効にするには、この値を設定します (または、低品質のオーディオで帯域幅の使用量を減らすには、この値を設定します)。
以下は推奨設定です:
- 8,000~12,000(ナローバンド(NB)スピーチ用
- 16,000~20,000(ワイドバンド(WB)スピーチ用
- フルバンド(FB)スピーチで28,000~40,000ドル
- フルバンド(FB)音楽用48,000~64,000ドル
このオプションを設定しないと、OpenTok.js は自動的にストリームのオーディオビットレートを設定します。
現在、この設定はFirefoxで公開されているストリームではサポートされていません。
オートゲインコントロール (Boolean) - 公開オーディオの自動ゲインコントロールを有効にするかどうか。これを false 高音質オーディオをパブリッシュする場合、( audioBitrate プロパティの OT.initPublisher() オプション)。デフォルト値は true.を設定した場合、この設定は無視されます。 disableAudioProcessing への true (公開ストリームのエコーキャンセル、自動ゲインコントロール、ノイズ抑制を無効にする)。
disableAudioProcessing (Boolean) - 公開オーディオのエコーキャンセル、自動ゲインコントロール、ノイズ抑制を無効にするかどうか。これを true 高音質オーディオをパブリッシュする場合、( audioBitrate プロパティの OT.initPublisher() オプション)。デフォルト値は false.
エコーキャンセル (Boolean) - 公開音声のエコーキャンセレーションを有効にするかどうか。これを false 高音質オーディオをパブリッシュする場合、( audioBitrate プロパティの OT.initPublisher() オプション)。デフォルト値は true.を設定した場合、この設定は無視されます。 disableAudioProcessing への true (公開ストリームのエコーキャンセル、自動ゲインコントロール、ノイズ抑制を無効にする)。
注: 一部のブラウザ(Chrome 73以降など)では、ステレオ音声のエコーキャンセルに対応していません(詳細は クローム問題レポート).
イネーブル・ステレオ (Boolean) - ステレオ・オーディオを公開するかどうか。デフォルト値は false.
ノイズ抑制 (Boolean) - 公開オーディオのノイズ抑制を有効にするかどうか。これを false 高音質オーディオをパブリッシュする場合、( audioBitrate プロパティの OT.initPublisher() オプション)。デフォルト値は true.を設定した場合、この設定は無視されます。 disableAudioProcessing への true (公開ストリームのエコーキャンセレーション、自動ゲインコントロール、ノイズ抑制を無効にする)。また advancedNoiseSuppression Vonage Media ライブラリを使用するオーディオフィルター(参照: 本題).
Opus DTX によるオーディオ帯域幅の削減
オーパスDTX(不連続伝送) は、参加者が話していないときに帯域幅の使用量を削減できるオーディオコーデックである。これは、多くの音声参加者がいる大規模なセッションで役立ちます。
を設定することで、Opus DTX を有効にします。 enableDtx プロパティの options オブジェクトに渡します。 OT.initPublisher() メソッド(~のとき) パブリッシャーの初期化).
詳細については、こちらをご覧ください Vonage Video API ナレッジベース記事.
音声や動画にフィルターやエフェクトを適用する
公開済みの音声や動画には、以下の方法でフィルターやエフェクトを適用できます:
- MediaStreamTrack オブジェクトの公開と、そのオブジェクトへのエフェクトの適用
- 背景ぼかしまたは背景置換フィルターの適用
- 高度なノイズ抑制フィルタの適用
- Vonage Media Processorライブラリを使用したカスタム変換の適用
購読している音声や動画には、以下の方法でフィルターやエフェクトを適用できます。 Vonage Media Processor ライブラリを使用して変換を適用する。
これらについては、以下の各節で説明します。
MediaStreamTrack オブジェクトの公開と、そのオブジェクトへのエフェクトの適用
を使用することができます。 オーディオ MediaStream トラック または ビデオ MediaStream トラック を、公開ストリームのソースオーディオまたはソースビデオとして使用できます。この機能を使うと、公開するオーディオやビデオに、背景ぼかしや背景置換などのフィルターやエフェクトを適用できます。
を使用することができます。 OT.getUserMedia() メソッドを使用して、ユーザーが選択したカメラを使用する MediaStream への参照を取得します。次に、その MediaStream オブジェクトから取得した動画 MediaStreamTrack を Video 要素のソースとして使用できます。次に、その Video 要素を HTML Canvas 要素に追加し、canvas にフィルタやエフェクトを適用して、canvas から取得したフィルタ処理済みの video MediaStreamTrack オブジェクトを、公開ストリームのビデオ・ソースとして使用できます。例として、Stream-Filter のサンプルをご覧ください。 opentok-web-samples repo をGitHubで公開している。
を使用することができます。 OT.getUserMedia() メソッドを使用して、ユーザーが選択したマイクを使用するMediaStreamへの参照を取得します。そして、そのMediaStreamオブジェクトから取得したオーディオMediaStreamTrackを audioSource を呼び出すと OT.initPublisher().を作成することができます。 オーディオコンテキスト オブジェクトを呼び出し createMediaStreamSource() オブジェクトを、MediaStream オブジェクトを引数として渡して作成する MediaStreamAudioSourceNode オブジェクトにオーディオ・フィルタを適用できます。その後、MediaStreamAudioSourceNodeオブジェクトにオーディオ・フィルタを適用することができ、その結果、フィルタがパブリッシュされたストリームに適用されます。
背景ぼかしまたは背景置換フィルターの適用
を使用する。 Publisher.applyVideoFilter() メソッドを使用して、パブリッシャーにビデオフィルターを適用できます。背景ぼかしフィルターか背景画像フィルターを適用できます。パブリッシャーが一度に適用できるフィルターは 1 つ (または 0 つ) だけです。新しいフィルターを設定すると、以前に設定したフィルターは削除されます。
次のコードは、パブリッシャーの動画に背景ぼかしフィルターを適用します:
publisher.applyVideoFilter({
type: 'backgroundBlur',
blurStrength: 'low',
});
次のコードは、パブリッシャーの動画に背景置換フィルタを適用します:
publisher.applyVideoFilter({
type: 'backgroundReplacement',
backgroundImgUrl: 'http://example.com/image.jpg',
});
を設定することで、ビデオフィルターを適用することもできます。 videoFilter オプションを呼び出すときに OT.initPublisher() メソッドを使用する:
const publisher = OT.initPublisher(null, {
videoFilter: {
type: 'backgroundReplacement',
backgroundImgUrl: 'http://example.com/image.jpg',
},
mirror: false,
});
重要だ:
- ビデオフィルタには十分なプロセッササポートが必要です。サポートされているブラウザであっても、バックグラウンド処理が利用可能な処理リソースを制限する場合、トランスフォーマは安定しないことがあります。参照 お客様のご要望.
- コンテンツ・セキュリティ・ポリシー(CSP)に関する注意事項:もし
script-srcディレクティブが設定されていることを確認してください。'wasm-unsafe-eval'が指定されます。そうでない場合、背景ぼかしや置換フィルタに必要なWebAssemblyは、ページ上での読み込みと実行がブロックされます。 - 背景画像は、パブリッシャの動画のサイズに合わせてリサイズされます。最良の結果を得るには、公開されている動画と同じ寸法(または少なくとも同じ縦横比)の画像を使用してください。背景画像を設定する
mirrorオプションでfalseを呼び出すときにOT.initPublisher()メソッドを使うことで、パブリッシャーのページで背景画像を正しい向きで (ミラーされずに) 表示させることができます。
詳細は Publisher.applyVideoFilter().
この方法は Publisher.setVideoMediaProcessorConnector() メソッドを呼び出します。このメソッドは Publisher.setVideoMediaProcessorConnector(connector) は、エラーで拒否されたプロミスを返します。 name プロパティを 'OT_NOT_SUPPORTED'.コネクタを取り外すには Publisher.setVideoMediaProcessorConnector(null).
を設定することで、初期ビデオフィルターを設定することもできます。 videoFilter を呼び出す際に OT.initPublisher() メソッドを使用する。
ビデオフィルターをクリアするには Publisher.clearVideoFilter() メソッドを使用する。
注釈
- 動画フィルターは、Chrome、Firefox、Electron、Opera、Edge、Samsung Internet、Android版WebView、およびSafari(バージョン26以降)とiOS版WebView(バージョン26以降)の最新バージョンでのみサポートされています。クライアントがこの機能をサポートしているかどうかは、
OT.hasMediaProcessorSupport('video')メソッドを使用する。 - Vonage Media Libraryには、次のような背景ぼかしや背景画像フィルターよりも多くのオプションを提供するトランスフォーマーが含まれています。
Publisher.applyVideoFilter('video')メソッドを使用します。また、Vonage Media Libraryを使用して、独自のカスタムオーディオトランスフォーマーやカスタムビデオトランスフォーマーを作成することもできます。詳しくは Vonage メディアプロセッサーの使用 開発者ガイド
高度なノイズ抑制フィルタの適用
アドバンスノイズサプレッションは、パブリッシャー周辺のバックグラウンドノイズを大幅に低減するオーディオフィルターです。これは、参加者がカフェのような混雑した騒がしい環境にいる場合や、空調システムのようなホワイトノイズが存在する場合に役立ちます。これは単独でも noiseSuppression プロパティを呼び出すときに設定する。 OT.initPublisher メソッドを使用する。
を使用する。 Publisher.applyAudioFilter() パブリッシャーにオーディオフィルターを適用する方法です。高度なノイズ除去フィルターを適用することができます。パブリッシャーには、一度に1つ(または0つ)のフィルターしか適用できません。新しいフィルターを設定すると、以前に設定されていたフィルターはすべて削除されます。
次のコードは、パブリッシャーの音声に高度なノイズ抑制オーディオフィルターを適用します:
publisher.applyAudioFilter({
type: 'advancedNoiseSuppression',
});
を設定することで、高度なノイズ抑制オーディオフィルターを適用することもできます。 audioFilter オプションを呼び出すときに OT.initPublisher() メソッドを使用する:
const publisher = OT.initPublisher(null, {
audioFilter: {
type: 'advancedNoiseSuppression'
},
});
重要だ:
- オーディオフィルターには、適切なプロセッサのサポートが必要です。サポートされているブラウザであっても、バックグラウンドプロセスによって利用可能な処理リソースが制限されている場合、トランスフォーマーの動作が不安定になることがあります。詳しくは お客様のご要望.
- コンテンツ・セキュリティ・ポリシー(CSP)に関する注意事項:もし
script-srcディレクティブが設定されていることを確認してください。'wasm-unsafe-eval'が指定されている場合。そうでない場合、高度なノイズ抑制に必要な WebAssembly は、ページ上での読み込みおよび実行がブロックされます。
詳細は Publisher.applyAudioFilter().
この方法は Publisher.setAudioMediaProcessorConnector() メソッドを呼び出します。このメソッドは Publisher.setAudioMediaProcessorConnector(connector) は、エラーで拒否されたプロミスを返します。 name プロパティを 'OT_NOT_SUPPORTED'.コネクタを取り外すには Publisher.setAudioMediaProcessorConnector(null).
高度なノイズ抑制フィルタを解除するには Publisher.clearAudioFilter() メソッドを使用する。
注釈
- オーディオフィルターは、Chrome、Electron、Opera、Edge、Samsung Internet、およびWebView(Android版)の最新バージョンでのみサポートされています。その他の(Chromiumベースではない)ブラウザやiOSではサポートされていません。クライアントがこの機能をサポートしているかどうかは、
OT.hasMediaProcessorSupport('audio')メソッドを使用する。 - 使用時
Publisher.applyAudioFilter()アセットはVonageサーバーからダウンロードされます。これらのアセットをセルフホストしたい場合は、以下を参照してください。 このブログ記事 ホスティングに関する情報、およびPublisher.setAudioMediaProcessorConnector()メソッドを使用して、セルフホストアセットに高度なノイズ抑制フィルタを適用します。
Vonage Media Processorライブラリを使用したカスタム変換の適用
参照 Vonage メディアプロセッサーの使用 開発者ガイド
低帯域幅のパブリッシャー向け音声のみのパブリッシング
帯域幅が低い状況では、パブリッシャーを設定して、映像を無効にしつつ音声は有効にしておくことができます。パブリッシャーの帯域幅が改善されると、映像の配信が再開されます。詳細については、 オーディオ・フォールバック 開発者ガイド
CPUのパフォーマンスの変化の検出
セッションをモニターすることで、デバイスのCPU負荷の変化を検出することができます。 cpuPerformanceChanged イベント。このイベントには、 cpuPerformanceState プロパティ。このプロパティには、次のいずれかの値が設定されます:「nominal」、「fair」、「serious」、「critical」(参照: このW3C仕様). この事象が発生した場合、アプリケーションはユーザーにリソース消費状況を通告したり、次のような計算負荷の高いプロセスを無効にしたりすることができます。 ビデオトランス. セッションを参照 cpuPerformanceChanged イベントを開催する。
以下のコードは、CPUがクリティカルなパフォーマンス状態に入った際にビデオキャプチャを無効にし、その状態が「フェア」以上に戻った時点で再び有効にするものです:
let videoDisabledByCPU = false;
session.on('cpuPerformanceChanged', (event) => {
if (event.cpuPerformanceState === 'critical'){
// The application should alert the user why their video is being disabled
publisher.publishVideo(false);
videoDisabledByCPU = true;
} else if (event.cpuPerformanceState === 'nominal' || event.cpuPerformanceState === 'fair'){
if (videoDisabledByCPU){
publisher.publishVideo(true);
videoDisabledByCPU = false;
}
}
})
通話品質の最適化に関するその他のガイドラインについては、以下を参照してください。 通話品質モニタリング.
重要だ: このAPIの利用には制限があります。 cpuPerformanceChanged 現在、この機能はChrome 125以降、Edge 125以降、およびOpera 111以降でのみ利用可能です。
デバッグに関する注意事項:
- このイベントは、ブラウザがフォーカスされている場合にのみ発生します。
- このイベントをiframeと組み合わせて使用するには、 圧力に関する権限ポリシーの算出. これにより、オンラインIDEを使用する際に問題が生じる可能性があります。
その他のユーザー・インターフェースのカスタマイズ・オプション
ユーザーインターフェイスをカスタマイズするためのその他のオプションについては UIのカスタマイズ を案内する。