公開する設定とデバイス
このガイドを使用して、送信ビデオとオーディオのキャプチャおよびエンコード方法を設定します。 このガイドでは、デバイスの権限と選択、デバイスの記憶、カメラの向きモード、解像度とフレームレート、モーションまたはテキストのコンテンツヒント、代替デバイスからの公開について説明します、 解像度とフレームレート、動画やテキストのコンテンツヒント、代替ソース(Canvas、Video、Web Audio)からのパブリッシュ ソース(Canvas、Video、Web Audio)、高度なPublisherオプションの場所について説明します。
カメラとマイクの許可を確認する
Publisherがクライアントのカメラとマイクにアクセスする前に、ユーザがアクセスを許可する必要があります。Publisherオブジェクトは、ユーザがカメラとマイクへのアクセスを許可または拒否すると、イベントをディスパッチします:
publisher.on({
accessAllowed: function () {
// The user granted access to the camera and mic.
},
accessDenied: function () {
// The user denied access to the camera and mic.
}
});
また、許可/拒否ダイアログが開いたり閉じたりしたときにもイベントをディスパッチする:
publisher.on({
accessDialogOpened: function () {
// The Allow/Deny dialog box is opened.
},
accessDialogClosed: function () {
// The Allow/Deny dialog box is closed.
}
});
出版社には accessAllowed プロパティは、アクセスが許可されているかどうかを示す。
カメラとマイクを選ぶ
パブリッシャーが使用するカメラとマイクを選択します。デバイスを列挙し、Publisherオプションで選択できます。
のプロパティプロパティを設定することで、パブリッシャーにデバイスの背面カメラを使用させることができます。 OTPublisher コンポーネントを設定し cameraPosition プロパティを "back":
<OTPublisher
properties={{
cameraPosition: 'back',
}}
/>
画面共有ストリーム(ソースがカメラではなくクライアントの画面であるストリーム)を公開することもできます。詳しくは 画面共有.
パブリッシャーが使用する音声と映像の入力デバイスを(オプションで)指定できます。あなたが OT.initPublisher() メソッドを呼び出すと、(オプションで) audioSource そして videoSource の特性である。 properties オブジェクトが渡される。 OT.initPublisher() メソッドを使用する。
まず OT.getDevices() メソッドで利用可能なデバイスを列挙します。デバイスの配列は devices パラメーターの callback 関数に渡される。 OT.getDevices() メソッドを使用します。例えば、次のコードはオーディオとビデオ入力デバイスのリストを取得します:
var audioInputDevices;
var videoInputDevices;
OT.getDevices(function(error, devices) {
audioInputDevices = devices.filter(function(element) {
return element.kind == "audioInput";
});
videoInputDevices = devices.filter(function(element) {
return element.kind == "videoInput";
});
for (var i = 0; i < audioInputDevices.length; i++) {
console.log("audio input device: ", audioInputDevices[i].deviceId);
}
for (i = 0; i < videoInputDevices.length; i++) {
console.log("video input device: ", videoInputDevices[i].deviceId);
}
});
によってリストアップされた各デバイスは OT.getDevices() には一意のデバイスIDがあります。 deviceId プロパティを使用します。これらのデバイスID値を audioSource そして videoSource の特性である。 properties オブジェクトに渡される OT.initPublisher():
var pubOptions =
{
audioSource: audioInputDevices[0].deviceId,
videoSource: videoInputDevices[0].deviceId
};
var publisher = OT.initPublisher(null, pubOptions, function(error) {
console.log("OT.initPublisher error: ", error);
});
を設定する。 videoSource プロパティ null または false 音声のみのセッションで ( 音声セッションでの発表).
を設定する。 videoSource プロパティ null または false 音声のみのセッションで
について Vonageビデオ・ハードウェア・セットアップ・コンポーネント は、クライアントが使用するカメラとマイクを選択するためのユーザーインターフェースを提供します。これは OT.getDevices() メソッドを使用する。
画面共有ストリーム(ソースがカメラではなくクライアントの画面であるストリーム)を公開することもできます。詳しくは 画面共有.
また、次のこともできる。 パブリッシャーが使用するカメラを変更する.
また、次のこともできる。 パブリッシャーが使用するオーディオソースを変更する.
デバイスの選択を記憶
HTTPS コンテキストでは、一部のブラウザはカメラとマイクの選択を次回以降の訪問のために記憶することができます。例えば、IEでは usePreviousDeviceSelection: true パブリッシャの初期化時
var pubOptions = { usePreviousDeviceSelection: true };
var publisher = OT.initPublisher(null, pubOptions, function (error) {
console.log("OT.initPublisher error:", error);
});
を設定することもできる。 facingMode を使用して、サポートされているデバイスでフロントカメラまたはバックカメラを選択し、オーディオ入力デバイスの自動管理を無効にします。 disableAudioInputDeviceManagement 完全なコントロールが必要なら
IEで使用するカメラとマイクの選択をユーザーに促す(以前のデバイス選択を無視する)には、以下のように設定しないでください。 usePreviousDevices プロパティは OT.initPublisher() メソッド(または falseデフォルト)。
オーディオ入力デバイスの自動管理を無効にする(詳細):
var pubOptions = {disableAudioInputDeviceManagement: true};
var publisher = OT.initPublisher(null, pubOptions, function(error) {
console.log("Publishing a stream");
});
解像度とフレームレートの設定
推奨ビデオ解像度とフレームレートの設定 OT.initPublisher() のオプションがある:
var publisher = OT.initPublisher(targetElement, {
resolution: '1280x720', // 1920x1080, 1280x720, 640x480, or 320x240
frameRate: 15 // 30, 15, 7, or 1
});
注:実際の加入者の解像度やフレームレートは、ネットワークやデバイスの条件によって異なる場合があります。
ストリーム設定(ウェブ)
公開ストリームの推奨ビデオ解像度を設定するには、次のように設定します。 resolution プロパティの properties パラメータに渡す OT.initPublisher():
var publisherProperties = {resolution: '1280x720'};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
console.log('Stream resolution: ' + event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height);
});
有効な値は "1920x1080", "1280x720", "640x480"そして "320x240".デフォルトは640x480。
公開ストリームの推奨フレームレートを設定するには frameRate 財産である:
var publisherProperties = {frameRate: 7};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
console.log('Frame rate: ' + event.stream.frameRate);
});
有効な値は30、15、7、1。
パブリッシャーがフレームレートを指定した場合、ビデオストリームの実際のフレームレートは frameRate ただし、実際のフレームレートは、ネットワークやシステムの状況に応じて変化します。を呼び出すときにフレームレートを指定しない場合は、フレームレートを指定する必要があります。 OT.initPublisherこのプロパティは未定義である。
メディア・ルーターを使用するセッションの場合(以下のセッションは メディアモード routedに設定)、フレームレートを下げると、ストリームが使用できる最大帯域幅が比例して減少する。
しかし、そのセッションで メディアモード を relayed に設定すると、フレームレートを下げてもストリームの帯域幅は減らない。
について videoHeight() そして videoWidth() メソッドは、パブリッシャ・オブジェクトの構成された解像度を返します。サブスクライバのビデオ・ストリームの実際の解像度は videoWidth() そして videoHeight() メソッドの値と異なる場合があります。の値とは異なる場合があります。 resolution プロパティに渡した。 OT.initPublisher() パブリッシング・ブラウザが要求された解像度をサポートしていない場合。
ビデオコンテンツのヒント
動画コンテンツのヒントを設定して、公開動画の品質とパフォーマンスを向上させることができます。これは特定の状況で役立ちます:
- 主にテキストまたはビデオコンテンツを含むスクリーン共有ビデオを公開する場合。
- カメラ映像ソースを使用する場合、フレームレートを落として解像度を維持したい場合は、 コンテンツヒントを "text" または "detail" に設定することができます。ルーティングされたセッションでは、パブリッシャーがスケーラブル・ビデオの使用をサポートしている場合、フル解像度の低フレームレート・ストリームと、ネットワーク条件が許せばフル解像度の通常フレームレート・ストリームを送信します。OpenTok Media Router は、これらのストリームのいずれかを加入者に転送します。
これは、指定したコンテンツの種類により適したエンコーディングや処理方法を使用するよう、ブラウザに指示するものです。
ストリームの初期ビデオコンテンツヒントを設定する。 videoContentHint に渡すオプションの OT.initPublisher() メソッドを使用する:
var publisherOptions = {
videoContentHint: "text",
// other options, such as videoSource: "screen"
};
var publisher = OT.initPublisher(targetElement, publisherOptions, callbackFunction);
を呼び出すことで、動画コンテンツのヒントを動的に変更できます。 setVideoContentHint() メソッドを呼び出します:
publisher.setVideoContentHint("motion");
ビデオコンテンツヒントは、以下の値のいずれかに設定できます:
""- ヒントは提供されません(デフォルト)。パブリッシング・クライアントは、動画コンテンツをどのように扱うべきか、最善の推測を行います。"motion"- トラックは、動きが重要なビデオを含んでいるかのように扱われるべきである。たとえば、ビデオを含む画面共有ビデオストリームにこの設定を使用することができます。"detail"- トラックは、ビデオの詳細が特別に重要であるかのように扱われるべきである。たとえば、テキストコンテンツ、絵画、線画を含む画面共有ビデオストリームにこの設定を使用することができます。"text"- トラックは、テキストの詳細が特別に重要であるかのように扱われるべきである。たとえば、テキストコンテンツを含む画面共有ビデオストリームにこの設定を使用することができます。
テキスト」と「詳細」のコンテンツヒントでは、ブラウザはビデオのフレームレートを下げる必要があっても、高解像度を維持しようとします。モーション」コンテンツヒントでは、ブラウザはフレームレートが失速するのを防ぐために解像度を下げます。
Chrome 60+、Safari 12.1+、Edge 79+、Opera 47+、最近のバージョンのSamsung Internet、WebView Android、およびiOS 12.2+のWebViewは、ビデオコンテンツのヒントをサポートしています。その他のブラウザでは、この設定は無視されます。
最大ビットレートの設定
パブリッシャーの最大ビデオ・ビットレートを設定して、帯域幅の使用量に上限を設定できます(従量制ネットワークなど)。定義済みのプリセット(DEFAULT、BW_SAVER、EXTRA_BW_SAVER)を使用するか、生のビットレート値を設定します。参照 本書.
別のソースから出版する(ウェブ)
カスタムビデオソースからのパブリッシュ
パブリッシャーのビデオ・ソースをビデオ MediaStreamTrack オブジェクトに設定できます。これにより、以下のことが可能になります:
HTML Canvas 要素を動画として使用して動画を公開します。動画として
captureStream()メソッドを呼び出す。getVideoTracks()メソッドを呼び出して、ビデオ MediaStreamTrack オブジェクトを取得します。Video要素から動画を公開する動画を
captureStream()メソッドを使用して MediaStream オブジェクトを取得します。このメソッドはgetVideoTracks()メソッドは、オーディオMediaStreamTrackオブジェクトの配列(通常は1つ)を返します。このMediaStreamTrackオブジェクトをaudioSourceプロパティのoptionsオブジェクトに渡します。OT.initPublisher()メソッドを使用する。
ビデオ MediaStreamTrack オブジェクトを videoSource プロパティの options オブジェクトに渡します。 OT.initPublisher() メソッドを使用します。これにより、MediaStreamTrack オブジェクトで表される動画が、公開ストリームの動画ソースとなります。
Vonage video Plugin for Internet Explorerでは、ビデオソースをMediaStreamTrackオブジェクトに設定することはサポートされていません。
カスタムオーディオソースからのパブリッシュ
Publisherのオーディオ・ソースをオーディオMediaStreamTrackオブジェクトに設定できます。これにより、以下のことが可能になります:
- AudioまたはVideoエレメントからオーディオをパブリッシュする。を呼び出す
captureStream()メソッドを使用して MediaStream オブジェクトを取得します。このメソッドはgetAudioTracks()メソッドには、オーディオMediaStreamTrackオブジェクトの配列(通常は1つ)が格納されます。そして、MediaStreamTrackオブジェクトをaudioSourceプロパティのoptionsオブジェクトに渡します。OT.initPublisher()メソッドを使用する。 - オーディオMediaStreamTrackオブジェクトからオーディオをパブリッシュする。例えば、AudioContext オブジェクトと Web audio API を使って、動的にオーディオを生成することができます。そして
createMediaStreamDestination().stream.getAudioTracks()[0]AudioContextオブジェクトで、オーディオMediaStreamTrackオブジェクトを取得する。audioSourceプロパティのoptionsオブジェクトに渡します。OT.initPublisher()メソッドを使用する。
フィルターとエフェクトの適用
公開ストリームのソースとして使用するマイクやカメラから取得した音声やビデオに、フィルターやエフェクトを適用できます。以下を参照してください。 フィルターとエフェクト.
その他のオーディオ・ビデオ・オプション
のオプション一覧をご覧ください。 パブリッシャー設定.