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

#agora.io SDKの画面共有(ScreenSharing)実装例（その２）

現在、agora.io VideoSDK 画面共有（ScreenSharing）については、以下のデモが用意されています。
[Share The Screen](https://webdemo.agora.io/agora-websdk-api-example-4.x/shareTheScreen/index.html)

この記事では、画面共有（ScreenSharing）と映像を両方表示するようなサンプルに改造します。

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

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

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

##機能一覧
※追加・変更機能のみ表示
[追加]
・カメラデバイス選択プルダウン  ：カメラIDを取得
・マイクデバイス選択プルダウン　：マイクIDを取得
・SCREENSHARINGボタン  ：(join後の)画面共有ダイアログ起動
[変更]
・Joinボタン　：画面共有のJoin処理を追加

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

##agora.io VideoSDK 映像と画面共有の両方を表示する実装例

###実装のポイント
映像、画面共有（ScreenSharing）の両方を表示するには、映像、画面共有がそれぞれjoinし、trackを作成することがポイントです。

###各種デバイス選択の追加
カメラデバイスの選択、マイクデバイスの選択プルダウンを追加します。

```html:./index.html
<div class="select-group mb-2">
 <div class="audio mb-2">
   <select name="audioSource" id="audioSource" class="form-select form-select-sm w-25" >
   </select>
 </div>
   <div class="microphone mb-2">
   <select name="videoSource" id="videoSource" class="form-select form-select-sm w-25">
 </select>
 </div>
</div>

```
###ボタンの追加
ボタンを追加します。

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

###Joinボタンクリック時
映像用、画面共有用のJoin処理をそれぞれ行います。

```javaScript:./shareTheScreen.js
async function join() {

  await join_camera(); //映像用
  await join_screen(); //画面共有用

}
```

###画面共有のJoin処理
画面共有ではcreateScreenVideoTrack()を利用します。

```javaScript:./shareTheScreen.js
async function join_screen() {

  //省略
  [ options.uid_s, localTracks.screenTrack] = await Promise.all([
    // join the channel
    client2.join(options.appid, options.channel, options.token || null),
    AgoraRTC.createScreenVideoTrack({encoderConfig: {width: {max: 1280} , height: {max: 720}, frameRate: 30}},"disable")
  ]);
　//省略
}
```

###screensharingボタンクリック時
Join後に画面共有を再度実行する時の処理です。

```javaScript:./shareTheScreen.js
async function screensharing() {

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

  // publish local tracks to channel
  await client2.publish(localTracks.screenTrack);
  console.log("publish success");
}
```

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

###１．画面起動
画面を起動します。(index.htmlをクリック)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/e4bb4671-36c0-4720-d2f1-1d2c15144dc6.png" width=50% />

###２．各種選択・入力
カメラ、マイクを選択し、appId、channelを入力します。

###３．Join
Joinをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5e0ed303-b401-8fc9-1ad2-7b350b2629e2.png" width=50% />
映像が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/24bbc0a6-4201-b1ad-652b-1ce4c2430059.png" alt="image3.PNG" width=50% />
(注)イメージの映像は実際のカメラ映像ではありません。

###４．画面共有のJoin
続いて画面共有のダイアログが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/f6f49a4e-abb7-d084-a784-7b29fce5218d.png" alt="image3.PNG" width=50% />

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/d7bd6dab-ac24-7a80-c666-f9d9e8607dac.png" width=50% />

###５．画面共有の再表示
(共有の停止後)SCREENSHARINGボタンをクリックし、再び画面共有ダイアログを起動します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/2a804bf8-9c58-2eb2-21e7-1b4df9b616db.png" alt="image7.PNG" width=50% />
画面共有ダイアログが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/c83be155-8568-1c67-3c06-ce0bd4019add.png" alt="image3.PNG" width=50% />

###６．画面共有の開始
共有ボタンをクリックし、共有を開始します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/d7bd6dab-ac24-7a80-c666-f9d9e8607dac.png" alt="image11.PNG" width=50% />

映像と画面共有を表示させることができました。


※参考サイト
[agora.io VideoSDK 画面共有(ScreenSharing)実装例（その１）](https://qiita.com/v-cube/items/625ae329cdaf9722ba4b)

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