tencent cloud

説明：

現在のプッシュSDKはベターテスト版です。課金ルールについては、今後リリースする正式版の内容をご参照ください。

SDKはビデオストリーム画面を処理する機能を提供します。具体的には、複数のチャネルのビデオストリームのミックス(PiP)、画面エフェクトの処理（ミラー、フィルター）、エレメントの追加（ウォーターマーク、テキスト）があります。基本的な処理フローとして、SDKではまず複数のチャネルのストリームを採取します。次に採取したストリームに対してローカルでミクスストリーミングを行い、画面をマージしたり、音声をミクスしたりします。最後に、その他のエフェクト処理を実行します。これらはブラウザ自体の機能に依存するため、ブラウザの性能をある程度要求します。インターフェースプロトコルについては、TXVideoEffectManagerをご参照ください。以下でローカルミクスストリーミングの基本的な使用方法を簡単に説明します。

基本的な使用方法

ローカルミクスストリーミング機能を使用するには、SDKを初期化しSDKインスタンスlivePusherを取得してください。初期化のソースコードについては、アクセスガイドをご参照ください。

ステップ1：ビデオエフェクト管理インスタンスを取得します

var videoEffectManager = livePusher.getVideoEffectManager();

ステップ2：ローカルミクスストリーミングを有効にします

まず、ローカルミクスストリーミング機能を有効にする必要があります。デフォルトでは、SDKは1チャネルのビデオストリームと1チャネルのオーディオストリームだけを採取できます。ローカルミクスストリーミング機能が有効になっている場合、複数のチャネルのストリームを採取し、採取したストリームをブラウザを経由してローカルでミクスできます。

videoEffectManager.enableMixing(true);

ステップ3：ミクスストリーミングパラメータを設定します

ミクスストリーミングパラメータを設定します。主にミクスを行って最終的に生成するビデオの解像度とフレームレートを設定します。

videoEffectManager.setMixingConfig({
videoWidth: 1280,
videoHeight: 720,
videoFramerate: 15
});

ステップ4：複数のチャネルのストリームを採取します

ローカルミクスストリーミングを有効にした後、複数のチャネルのストリームを採取します。例えば、カメラを起動しスクリーンを共有します。ストリームIDを保存しなければなりません。これは、これからの操作ではストリームIDを使用する必要があるためです。

var cameraStreamId = null;
var screenStreamId = null;
livePusher.startCamera().then((streamId) => {
cameraStreamId = streamId;
}).catch((error) => {
console.log(‘カメラ起動失敗：'+ error.toString());
});
livePusher.startScreenCapture().then((streamId) => {
screenStreamId = streamId;
}).catch((error) => {
console.log(‘スクリーン共有失敗：'+ error.toString());
});

ステップ5：画面レイアウトを設定します

採取した2チャネルの画面のレイアウトを設定します。ここでは、スクリーンの共有画面をメインに、カメラ画面を左上側に配置します。具体的なパラメータの設定は、TXLayoutConfigをご参照ください。

videoEffectManager.setLayout([{
streamId: screenStreamId,
x: 640,
y: 360,
width: 1280,
height: 720,
zOrder: 1
}, {
streamId: cameraStreamId,
x: 160,
y: 90,
width: 320,
height: 180,
zOrder: 2
}]);

ステップ6：ミラーエフェクトを設定します

カメラで採取した画面は実際のと逆です。そのため、ここでは、カメラの画面を左右反転するように設定します。

videoEffectManager.setMirror({
streamId: cameraStreamId,
mirrorType: 1
});

ステップ7：ウォーターマークを追加します

まず画像を1枚用意します。次にこの画像をウォーターマークとしてビデオストリーム画面に追加します。ここでは、ウォーターマーク画像を右上側に配置します。

var image = new Image();
image.src = './xxx.png'; // 画像のアドレスは同じリージョンにする必要があります。そうしないと、クロスリージョンの問題が発生します
videoEffectManager.setWatermark({
image: image,
x: 1230,
y: 50,
width: 100,
height: 100,
zOrder: 3
});

ステップ8：プッシュを開始します

上記の操作を完了すると、レイアウトがPiPで、ミラーエフェクトとウォーターマークがあるビデオストリームができました。この処理後のビデオストリームをサーバーにプッシュします。

livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');

説明：

WebRTCミクスストリーミングに関するインターフェースについては、API概要をご参照ください。