agora.io VideoSDK画面共有(ScreenSharing)実装例（その１）

#概要
現在、agora.io VideoSDK 画面共有（ScreenSharing）については、以下のデモが用意されています。
このサンプルの場合、Joinボタンクリック時に画面共有（ScreenSharing）ダイアログが表示され、キャンセルした時は一度leaveする必要があります。
[Share The Screen](https://webdemo.agora.io/agora-websdk-api-example-4.x/shareTheScreen/index.html)

この記事では(Join後)leaveせずに画面共有ダイアログを繰り返し表示できるサンプルに改造します。

参考リファレンス：[Share the Screen](https://docs.agora.io/en/Video/screensharing_web_ng?platform=Web)

##サンプル
[こちら](https://github.com/fu-jimoto/AgoraIO-Screen-Sharing-Web-WithCamera)をご利用ください。
（バージョン3は[AgoraIO-Screen-Sharing-Web-WithCamera-v3](https://github.com/fu-jimoto/AgoraIO-Screen-Sharing-Web-WithCamera/tree/master/AgoraIO-Screen-Sharing-Web-WithCamera-master-v3)、
バージョン4は[AgoraIO-Screen-Sharing-Web-WithCamera-v4](https://github.com/fu-jimoto/AgoraIO-Screen-Sharing-Web-WithCamera/tree/master/AgoraIO-Screen-Sharing-Web-WithCamera-master-v4)）

以降は、バージョン4用サンプルで説明しています。

##機能一覧
※追加機能のみ表示
・SCREENSHARINGボタン　

##開発環境
・agora.io VideoSDK（Web）

##agora.io VideoSDK 画面共有ダイアログ再表示の実装例

###SCREENSHARINGボタンの追加
はじめに画面共有ダイアログを起動させるためのボタンを追加します。

```html:./index.html
<button id="screensharing" type="button" class="btn btn-primary btn-sm">SCREENSHARING</button>

```

###SCREENSHARINGボタンクリック時
次に、SCREENSHARINGボタンをクリックしたときの処理を追加します。

```js:./index.js
$("#screensharing").click(function (e) {
  screensharing();
})
```

###SCREENSHARINGボタンクリック時の詳細処理
SCREENSHARINGボタンクリック後、画面共有ダイアログを起動させる処理を追加します。

```js:./index.js

async function screensharing() {

  [ localTracks.videoTrack ] = await Promise.all([
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
  localTracks.videoTrack.on("track-ended", handleTrackEnded);
  localTracks.videoTrack.play("local-player");
  $("#local-player-name").text(`localVideo(${options.uid})`);

  // publish local tracks to channel
  await client.publish(Object.values(localTracks));
  console.log("publish success");

}

```

###共有停止ボタンクリック時の処理
画面共有を停止した時に表示している映像を停止する処理になります。

```js:./index.js
function handleTrackEnded() {
  var track = localTracks["videoTrack"];
  if(track) {
    track.stop();
    track.close();
    localTracks["videoTrack"] = undefined;
  }
  $("#local-player-name").text("");
  client.unpublish(track);
  console.log("handleTrackEnded");
}
```

###共有画面ダイアログのキャンセル時対応
共有画面ダイアログをキャンセルした場合でもJoin処理は成功するように、
(画面共有用)VideoTrack取得処理を分けています。

```js:./index.js
async function join() {
　//省略
　/*JoinおよびAudioTrack取得処理*/
  [ options.uid, localTracks.audioTrack] = await Promise.all([
    // join the channel
    client.join(options.appid, options.channel, options.token || null),
    // ** create local tracks, using microphone and screen
    AgoraRTC.createMicrophoneAudioTrack()
  ]);
  console.log(options.uid);

　/*(画面共有用)VideoTrack取得処理*/
  [ localTracks.videoTrack ] = await Promise.all([
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
  localTracks.videoTrack.on("track-ended", handleTrackEnded);

　//省略
}
```

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

###１．画面起動
画面を起動します。(index.htmlをクリック)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/afe43ad3-3204-ce6c-abb8-497aad931a87.png" alt="image1.PNG" width=50% />

###２．各種選択・入力
appId、チャネル名を入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/a97d7e41-d60e-bf21-df5b-ff0935dd2c27.png" alt="image2.PNG" width=50% />
(注)appIdは実物のものではありません。

###３．Join(画面共有ダイアログ起動)
Joinをクリックします。（画面共有ダイアログが起動）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/3e4335f1-1b00-6be1-4731-5a484e2265f9.png" width=50% />

Join後に画面共有ダイアログが起動します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/fa57be2d-a963-f535-06fe-6c802c5536ee.png" alt="image3.PNG" width=50% />

###４．画面共有ダイアログのキャンセル
画面共有ダイアログをキャンセルしたため、VideoTrackの取得できずエラーとなります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/381831c3-2fca-c37d-3fd6-f3037ef93f4e.png" alt="image5.PNG" width=50% />

###５．画面共有ダイアログの再表示
（Join後に再び画面共有ダイアログを起動するため）SCREENSHARINGボタンをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/4a55c69e-059f-16a8-9e59-ede4749a065d.png" width=50% />

画面共有ダイアログが再び表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/31f0eefb-a2f5-0a2a-8e51-1fa1fecdfdf2.png" alt="image3.PNG" width=50% />

###６．共有の開始
共有ボタンをクリックし、共有を開始します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/95527ddc-288d-8bfc-7334-3e64ad7a5cb9.png" alt="image6.PNG" width=50% />

###７．共有の停止
共有を停止します。
###８．画面共有ダイアログの再々表示
再びSCREENSHARINGボタンをクリックします。
再び画面共有ダイアログが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/31f0eefb-a2f5-0a2a-8e51-1fa1fecdfdf2.png" alt="image3.PNG" width=50% />

SCREENSHARINGボタンをクリックすることで、Join後に繰り返し画面共有ダイアログを表示させることができました。

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