agora.io On-Premise Recording（Nodejs）の録画映像レイアウトを調整する実装例

#概要
今回はOn-Premise Recording（Nodejs）の録画映像レイアウトを調整する実装例をご紹介します。
録画映像レイアウトの調整とは、各入室ユーザの映像の配置と表示サイズ(縦横)を調整することです。
入室拠点数ごとにレイアウトを変更させることができます。

現在、On-Premise Recording（Nodejs）については、以下のサンプルが用意されています。
こちらのサンプルコードを使って録画映像レイアウトを調整してみます。
https://github.com/AgoraIO/Basic-Recording/tree/master/On-Premise-Recording-Nodejs


[Githubに公開しています。](https://github.com/fu-jimoto/AgoraIO-On-Premise-Recording-Nodejs-layout)
※変更したプログラムソースのみになりますので、元サンプルをダウンロードしそこに上書きしてください。

##開発環境
・agora On-Premise Recording（Nodejs）

##実現イメージ
今回は、4拠点まで入室する想定で、入室拠点が増えるごとにレイアウトを変化させる仕様にします。

・1拠点入室時（1拠点レイアウトを適用）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/21ca0216-fcc9-e85b-9b4c-79110080b96a.png" width="25%">
・2拠点入室時（2拠点レイアウトを適用）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/b6728264-98e9-2e41-32bf-c07b5a395aba.png" width="25%">
・3拠点入室時（4拠点レイアウトを適用）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/f923438c-dd3c-ea1a-c08c-040a6e8c4ced.png" width="25%">
・4拠点入室時（4拠点レイアウトのまま)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/55e9a607-d13b-2372-d1f4-35a6567aaff8.png" width="25%">

##変更したファイル
・recordManager.js
変更したファイルは[Github](https://github.com/fu-jimoto/AgoraIO-On-Premise-Recording-Nodejs-layout)に公開しています
[元のサンプルソース](https://github.com/AgoraIO/Basic-Recording/tree/master/On-Premise-Recording-Nodejs)の同ファイルを差し替えてご利用ください。


##実装のポイント

１. (基本事項として)録画映像レイアウトは、setMixLayout(layout)メソッドにレイアウト(layout)を設定することで実現します。 

※参考：layoutの初期設定時処理

```js:recordManager.js
    start(key, appid, channel) {
　　（省略）
　　　　//レイアウトの定義
       let layout = {
         "canvasWidth": 640,
         "canvasHeight": 480,
         "backgroundColor": "#00ff00",
         "regions": []
       }
　　（省略）
　　　　//(SDKに)レイアウトをセット
       sdk.setMixLayout(layout);
    }
```

・layoutプロパティ

| プロパティ名      | 説明             |
|:---------------|------------------|
| canvasWidth     | 映像の幅           |
| canvasHeight    | 映像の高さ         |
| backgroundColor | 映像の背景色       |
| regions[]         | 映像のレイアウト(配列)   |


２. 録画映像レイアウトの各映像の位置とサイズは、layoutのregions[region()]に値(region())をセットすることで実現します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/f1d3c36e-338f-2bae-7032-b78fa9104809.png" width="35%">
※regions[]の配置イメージ


・region()プロパティ

| プロパティ名       | 説明 |
|:-----------------|------------------|
| uid              |入室したユーザのuid|
| x                |uid映像のx軸|
| y                |uid映像のy軸|
| width |uid映像の幅|
| height|uid映像の高さ|
| alpha |1 ([※APIリファレンス参照](https://docs.agora.io/en/Recording/API%20Reference/recording_java/classio_1_1agora_1_1recording_1_1common_1_1_common_1_1_video_mixing_layout_1_1_region.html#afc0a3e9c1db78715822d13ebe8102f15))|
| zOrder|1 ([※APIリファレンス参照](https://docs.agora.io/en/Recording/API%20Reference/recording_java/classio_1_1agora_1_1recording_1_1common_1_1_common_1_1_video_mixing_layout_1_1_region.html#a36470c87a9cca746799e4a3a0c1da1fe))|



３. 「[実現イメージ](#実現イメージ)」のようなレイアウト構成にするには、ユーザの入室判定処理(subscribeEvents)ごとにregions[]へ値(region())を動的に更新していくことで実現します。
　→[「On-Premise Recording（Nodejs）の録画映像レイアウト調整の実装例」](#On-Premise Recording（Nodejs）の録画映像レイアウト調整の実装例)を参照
 

##On-Premise Recording（Nodejs）の録画映像レイアウト調整の実装例

前準備として、各自[On-Premise Recording（Nodejs）環境](https://github.com/AgoraIO/Basic-Recording/tree/master/On-Premise-Recording-Nodejs)をご準備ください。
※環境の作成方法は、サンプルコードのREADMEの手順に従い作成してください。

###実装コード（変更箇所）

```js:recordManager.js
subscribeEvents(recorder) {        
(省略)
 sdk.on("userjoin", (uid) => {
(省略)
   let {layout} = recorder;
   //入室拠点数(=regions[]の配列数)ごとにregions[]にセットするregionの値を更新する
   switch(layout.regions.length) {
       case 0:  //1拠点入室時（1拠点レイアウト）
           region.x = 0;
           region.y = 0;
           region.width = 640;
           region.height = 480;
           break;
       case 1:  //2拠点入室時（2拠点レイアウト）
　　　　　　//1拠点目         
           layout.regions[0].x = 0;
           layout.regions[0].y = 0;
           layout.regions[0].width = 320;　//全体幅の2分の1サイズ
           layout.regions[0].height = 480;	   
           //2拠点目
　　　　　　region.x = 320;
           region.y = 0;
           region.width = 320;
           region.height = 480;
           break;
       case 2:  3拠点入室時（4拠点レイアウト）
　　　　　　//1拠点目         
           layout.regions[0].x = 0;
           layout.regions[0].y = 0;
           layout.regions[0].width = 320;   //全体幅の2分の1サイズ
           layout.regions[0].height = 240;  //全体高さの4分の1サイズ	   
           //2拠点目
           layout.regions[1].x = 320;
           layout.regions[1].y = 0;
           layout.regions[1].width = 320;
           layout.regions[1].height = 240;	   
           //3拠点目
           region.x = 0;
           region.y = 240;
           region.width = 320;
           region.height = 240;
　　　　　　//※4拠点目には背景色が適用される
           break;
       case 3:  4拠点入室時（4拠点レイアウトのまま）             
           //1～3拠点目はcase 2で設定した値をそのまま使用
           //4拠点目
           region.x = 320;
           region.y = 240;
           region.width = 320;
           region.height = 240;
           break;
       default:
           break;
   }
   layout.regions.push(region);
   sdk.setMixLayout(layout);
 });
}
```


##動作確認
それでは動作確認してみます。

###録画の実行
（各自ご準備いただいたOn-Premise Recording（Nodejs）環境にて）
１．録画を開始します。
２．1拠点目が入室します。（case 0に相当）
３．2拠点目が入室します。（case 1に相当）
４．3拠点目が入室します。（case 2に相当）
５．4拠点目が入室します。（case 3に相当）
６．録画を停止します。
７．（必要に応じて/sdk/tools配下にあるvideo_convert.pyを実行し）映像と音声をマージします。

###録画映像の確認
コンバート後の映像を見てみます。
(※実際の映像は隠して表示してます。)
####1拠点目入室時
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/ba13b3c2-a1d5-fc4e-af75-9c8e0d4c3434.png" width="25%" >
（case 0に相当）
####2拠点目入室時
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/f39c215e-d2fc-a5ab-1858-ec871b1b61c8.png" width="25%" >
（case 1に相当）
####3拠点目入室時
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/51427703-55c5-3f1d-0e97-426beee190fd.png" width="25%" >
（case 2に相当）
※まだ入室していない4拠点目は設定した背景色(#00ff00)が表示されています。
####4拠点目入室時
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/a2a0ada0-2673-46fc-76b0-68c31614fd51.png" width="25%" >
（case 3に相当）

録画映像のレイアウトを調整することができました。

#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=d91ebbc04a460afb575c)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=d91ebbc04a460afb575c)