agora.io RENDERモード (映像表示モード) 

# 概要
agora.io の VideoSDK for Native では、[RENDERモード](https://docs.agora.io/en/Video/API%20Reference/java/classio_1_1agora_1_1rtc_1_1video_1_1_video_canvas.html#a2c5722848cb5a96999f44de58025ae04)という機能により、画面上の映像表示設定をすることができます。
本記事では、Androidを利用して、本機能の利用方法および各モードの映像表示を説明します。

# RENDERモードの利用方法
RENDERモードは、以下のAPIコール時に引数で指定します。

- [setupLocalVideo](https://docs.agora.io/en/Video/API%20Reference/java/classio_1_1agora_1_1rtc_1_1video_1_1_video_canvas.html#a2c5722848cb5a96999f44de58025ae04)
- [setupRemoteVideo](https://docs.agora.io/en/Video/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#a0e9f693c9bc2ccb91554c2c7dc6b7140)
- [setLocalRenderMode](https://docs.agora.io/en/Video/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#a8978be2e06307e632abee88c4824b8f6)
- [setRemoteRenderMode](https://docs.agora.io/en/Video/API%20Reference/java/classio_1_1agora_1_1rtc_1_1_rtc_engine.html#ad3e02c615451858e16f50c05b294307c)

setupLocalVideo と setupRemoteVideo は、ビデオ通話開始時にそれぞれ自拠点、他拠点の映像表示を初期化するためのAPIです。
setLocalRenderMode と setRemoteRenderMode は、初期化後に映像表示を変更するためのAPIです。

- [自拠点映像初期化の実装例](https://docs.agora.io/en/Video/start_call_android?platform=Android#5-set-the-local-video-view)

```
// Java
private void setupLocalVideo() {

    // Enable the video module.
    mRtcEngine.enableVideo();

    // Create a SurfaceView object.
    private FrameLayout mLocalContainer;
    private SurfaceView mLocalView;

    mLocalView = RtcEngine.CreateRendererView(getBaseContext());
    mLocalView.setZOrderMediaOverlay(true);
    mLocalContainer.addView(mLocalView);
    // Set the local video view.
    VideoCanvas localVideoCanvas = new VideoCanvas(mLocalView, VideoCanvas.RENDER_MODE_HIDDEN, 0);
    mRtcEngine.setupLocalVideo(localVideoCanvas);
}
```

# 各RENDERモードについて
RENDERモードは、2020年6月現在3種類あります。
各モードについて説明します。
※2拠点入室時のほうが各モードの差異がわかりやすいので、1拠点入室時と2拠点入室時両方の画面キャプチャを載せています。

## HIDDEN
余白なく、映像を表示します。
カメラ映像と画面のアスペクト比が一致しない場合、カメラ映像の一部をトリミングして、表示します。

![HIDDEN1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/e2ca3fa9-36e2-6dea-0fe0-fbc263c871e7.jpeg)　　　![HIDDEN2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/0518616f-eea2-35b4-2470-9c69a136f67d.jpeg)

## FIT
カメラで取得したアスペクト比のまま、映像を画面上に表示します。
カメラ映像と画面のアスペクト比が一致しない場合、画面上に余白 (黒い部分) ができます。

![FIT1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/67795988-6745-2306-a32f-424bfdbd79ee.jpeg)　　　![FIT2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/ff9ba173-9356-9ea2-1e35-ab66b241419d.jpeg)


## FILL
余白なく、映像を表示します。
カメラ映像と画面のアスペクト比が一致しない場合、映像を拡大もしくは収縮させて、画面全体に映像が表示されるようにします。

![FILL1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/31c459f0-8cf4-8608-1dec-2afb14fd3c12.jpeg)　　　![FILL2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386074/dbffbb33-9313-c2cf-0818-5f119e26ffcf.jpeg)

# 最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=b81c37252fdb22606152)
[<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=ee9e4a3fa594f9f861b7)