2022年05月13日

Agora.io VideoSDKの画面共有(ScreenSharing)実装例(その1)

※2020年の記事です。

 

現在、Agora.io VideoSDK 画面共有(ScreenSharing)については、サンプルが用意されています。

上記サンプルは、Joinボタンクリック時に画面共有(ScreenSharing)ダイアログが表示され、キャンセルするとleaveします。
今回は、(Joinしたまま)leaveせずに画面共有ダイアログを何度も表示できるサンプルに改造します。

Githubに公開しています 

お役立ち資料ダウンロード

オンライン体験におけるブイキューブの技術サポートのご案内

【図解】システム開発のお手伝い

ブイキューブのソリューションアーキテクトが、寄り添います!
各種ライブ配信システムのアーキテクチャについて わかりやすい構成図にてご紹介!

無料ダウンロード

機能一覧

※追加機能のみ表示
[追加]
・SCREENSHARINGボタン 
 →画面共有ダイアログ起動

開発環境

・agora.io VideoSDK(Web)

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

SCREENSHARINGボタンの追加

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

./index.html
<button class="btn btn-raised btn-primary waves-effect waves-light" id="screensharing">SCREENSHARING</button>
    

SCREENSHARINGボタンクリック時

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

/src/index.js
  $("#screensharing").on("click", function (e) {
        e.preventDefault();
        console.log("screensharing")
        const params = serializeFormData();
        if (validator(params, fields)) {
        rtc.screensharing(params);
        }
      })
    

SCREENSHARINGボタンクリック時の詳細処理

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

実装のポイント

画面共有ダイアログ起動時にCreateStream()処理を必ず追加します。
Join時に表示された画面共有ダイアログをキャンセルするとCreateStreamが完了せず失敗を返すので、再度作成する必要があります。

 

this._localStream = AgoraRTC.createStream(streamSpec);

 

下記コードは、join処理のLocalStreamを作成する処理からLocalStreamのinit処理(143行目から201行目)までをコピーしています。
1.LocalStreamの作成(143行目から180行目)
2.LocalStreamのinit()(182行目から201行目)

/src/rtc-client.js
  screensharing(data){
        console.log("screensharing start");
    
        // create local stream
        const streamSpec = {
          streamID: this._params.uid,
          audio: false,
          video: false,
          screen: true,
          microphoneId: data.microphoneId,
          cameraId: data.cameraId
        }
    
        // Your firefox need use support mediaSource at least
        if (isFirefox()) {
          streamSpec.mediaSource = 'window';
        } else if (!isCompatibleChrome()) {
          // before chrome 72 need install chrome extensions
          // You can download screen share plugin here https://chrome.google.com/webstore/detail/agora-web-screensharing/minllpmhdgpndnkomcoccfekfegnlikg
          streamSpec.extensionId = 'minllpmhdgpndnkomcoccfekfegnlikg';
        }
    
        this._localStream = AgoraRTC.createStream(streamSpec);
    
        // set screen sharing video resolution
        if (data.screenShareResolution != 'default') {
          this._localStream.setScreenProfile(data.screenShareResolution);
          console.log("set screen profile", data.screenShareResolution);
        }
    
        // Occurs when sdk emit error 
        this._localStream.on("error", (evt) => {
          Toast.error("error", JSON.stringify([evt]))
        })
    
        // Occurs when a you stop screen sharing
        this._localStream.on("stopScreenSharing", (evt) => {
          this._localStream.stop();
          this._showProfile = false;
          Toast.notice("stop screen sharing")
        })
    
        // init local stream
        this._localStream.init(() => {
          console.log("init local stream success");
          // play stream with html element id "local_stream"
          this._localStream.play("local_stream", {fit: "cover"})
          // run callback
          resolve();
        }, (err) =>  {
          Toast.error("stream init failed, please open console see more detail")
          console.error("init local stream failed ", err);
          if (isFirefox()) {
            console.error('Failed to start screen sharing, maybe firefox not support mediaSource, please upgrade your firefox to latest version')
            return;
          }
          if (!isCompatibleChrome()) {
            console.error('Failed to start screen sharing, maybe chrome extension was not installed properly, you can get it from https://chrome.google.com/webstore/detail/minllpmhdgpndnkomcoccfekfegnlikg');
            return;
          }
        })
        console.log("screensharing success");
        return;
      }
    

動作確認

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

1.画面起動

画面を起動します。(npm install、npm run devを実行しlocalhost:8080を表示)

2.各種選択・入力

appId、チャネル名を入力します。

(注)appIdは実物のものではありません。

3.Join(画面共有ダイアログ起動)

Joinをクリックします。(画面共有ダイアログが起動)

Join後に画面共有ダイアログが起動します。

4.画面共有ダイアログのキャンセル

画面共有ダイアログをキャンセルします。
キャンセルされたため、LocalStreamのinit処理に失敗した旨のエラーメッセージが表示されます。

5.画面共有ダイアログの再表示

(Join後に再び画面共有ダイアログを起動するため)SCREENSHARINGボタンをクリックします。

画面共有ダイアログが再び表示されます。

6.共有の開始

共有ボタンをクリックし、共有を開始します。

7.共有の停止

共有を停止します。

8.画面共有ダイアログの再々表示

再びSCREENSHARINGボタンをクリックします。
再び画面共有ダイアログが表示されます。

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

ガイドブックダウンロード

【すぐ読める!ガイドブック】ビデオ通話・ライブ配信SDK「Agora」

【大充実】通話・配信SDK「Agora」ガイドブック

通話・配信サービス開発や、配信技術のリプレイスを検討中の方、必見の内容です。
Agora SDKの特徴から活用例まで徹底解説!

無料ダウンロード
ブイキューブ

執筆者ブイキューブ

Agoraの日本総代理店として、配信/通話SDKの提供だけでなく、導入支援から行い幅広いコミュニケーションサービスに携わっている。

関連記事

先頭へ戻る