テレワークで日本を変える|Web会議・テレビ会議(TV会議)のブイキューブ

テレワークで日本を変える|テレビ会議(TV会議)・Web会議・電話会議のブイキューブ

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

  • WebRTC
  • Agora.io
  • ScreenShare

概要

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

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

機能一覧

※追加機能のみ表示
[追加]
・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後に繰り返し画面共有ダイアログを表示させることができました。

agora.io SDK イメージ
agora.io SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る