リアルタイムインタラクティブ授業(Electron)

最終更新日:2021-10-12 09:40:10

    Demo体験

    DemoのUIの再利用

    手順1:アプリケーションの新規作成

    1. TRTCコンソールにログインし、【開発支援】>【Demoクイックスタート】を選択します。
    2. 例えば、TestEduDemoなどのアプリケーション名を入力して、【作成】をクリックします。
    説明:

    本機能はTencent CloudTRTCIMという2つの基本的なPAASサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMは付加価値サービスであり、課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。

    手順2:SDKおよびDemoソースコードをダウンロード

    1. 実際の業務ニーズに基づき、SDKおよび付属のDemoソースコードをダウンロードします。
    2. ダウンロード完了後、【ダウンロードしました。次のステップ】をクリックします。

    手順3:Demoプロジェクトファイルの設定

    1. 設定変更ページに進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。

    2. Electron/js/GenerateTestUserSig.jsファイルを見つけて開きます。

    3. GenerateTestUserSig.jsのファイルの関連するパラメータを設定します。

      • SDKAPPID:デフォルトは0。実際のSDKAppIDを設定してください。
      • SECRETKEY:デフォルトは空文字列。実際のキー情報を設定してください。
    4. 貼り付け完了後、【貼り付けました。次のステップ】をクリックすれば、作成が完了します。

    5. コンパイル完了後、【コンソール概要に戻る】をクリックすればOKです。

    注意:

    • ここで言及したUserSigの新規作成ソリューションでは、クライアントコードでSECRETKEYを設定します。この手法のうちSECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためのこの手法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します
    • UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

    手順4:Demoの実行

    // yarnをインストールし、demoをyarnに基づき管理します
    npm install yarn -g
    // 必要な依存をインストールします
    yarn install
    // 開発デバック
    yarn dev
    // パッケージ化
    yarn package
    
    注意:

    Macでパッケージ化したMacパッケージング、Windows PCでパッケージ化したWindowsパッケージのみ使用できます。

    手順5:Demoソースコードの修正

    Demoで使用するアーキテクチャの技術は次のとおりです。

    • typescript
    • react & react hooks
    • electron & electron-react-boilerplate
    • element-ui

    以下の表にはファイルまたはフォルダおよび対応するUIをリストアップして、二次調整を行いやすくしています。

    ファイル 機能説明
    app/containers/HomePage.tsx 教室参加のUIの実装コード
    app/containers/ClassRoomPage.tsx 教室のUIの実装コード
    app/components/TeacherClass.tsx 教室-教師側UIの実装コード
    app/components/StudentClass.tsx 教室-学生側UIの実装コード
    app/components/Chat.tsx 教室-チャットルームのUIの実装コード
    app/components/UserList.tsx 教室-メンバーリストのUIの実装コード

    カスタムUIの実装

    Demoにデフォルトで実装されているUIが期待どおりでない場合は、必要に応じて独自のユーザーインターフェースを実装することができます。すなわち、当社がパッケージングしたtrtc-electron-educationコンポーネントで提供する音声・ビデオの機能のみを使用し、UI部分を単独で実装します。

    手順1:SDKへの統合

    // yarn方式の導入
    yarn add trtc-electron-education
    // npm方式の導入
    npm i trtc-electron-education --save
    

    手順2:コンポーネントの初期化

    コンポーネントを初期化します。そのうち、入力必須となる主要パラメータを下表で紹介します。

    パラメータ タイプ 説明
    sdkAppId number 入力必須のパラメータ。TRTCコンソールの中でSDKAppIDを確認できます。
    userID string 入力必須のパラメータ。ユーザーIDは、お客様のアカウントシステムから指定できます。
    userSig string 入力必須のパラメータ。ID署名(ログインパスワードに相当)は、userIDから算出します。具体的な計算方法については、UserSigの計算方法をご参照ください。
    import TrtcElectronEducation from 'trtc-electron-education';
    const rtcClient = new TrtcElectronEducation({
     sdkAppId: 1400***803,
     userID: '123'
     userSig: 'eJwtzM9****-reWMQw_'
    });
    

    手順3:教師側の授業の実現

    1. 教師側がコンポーネント createRoomのメソッドを呼び出し、教室を作成します。

      const params = {
        classId, // 教室ID
        nickName // ニックネーム
      }
      rtcClient.createRoom(params).then(() => {
      //教室の作成の成功
      })
      
    2. 教師側がコンポーネントenterRoomのメソッドを呼び出し、授業を開始します。

      rtcClient.enterRoom({
        role: 'teacher', // ロール
        classId // 教室ID
      })
      
    3. 教師側がコンポーネントopenCameraのメソッドを呼び出し、自分のカメラを立ち上げます。

      const domEle = document.getElementById('test');
      rtcClient.openCamera(domEle)
      
    4. 教師側は自分の画面を学生側に共有させ、PPT、教材の再生などを視聴させることができます。
      a. 先にコンポーネントgetScreenShareListのメソッドを呼び出し、ウィンドウのリストを取得する必要があります。

      const screenList = rtcClient.getScreenShareList()
      

      b. コンポーネントのstartScreenCaptureを呼び出し、画面を共有するストリームのプッシュを開始します。

      rtcClient.startScreenCapture({
        type,// キャプチャソースタイプ
        sourceId,// ソースIDの収集。ウィンドウについては、当該フィールドにウィンドウのハンドルを表示します。画面については、当該フィールドに画面IDを表示します
        sourceName // ソース名の収集、UTF8エンコーディング
      })
      
    5. 授業中、教師が学生と質疑応答の交流を行いたい場合、コンポーネントstartQuestionTimeのメソッドを呼び出し、質疑応答時間をオンにすることができます。学生側は、このコマンドの受信後、挙手にて回答を申請できるようになります。

      rtcClient.startQuestionTime(classId) // classIdは教室IDです
      
    6. 学生の挙手の後、教師側はコンポーネントinviteToPlatformのメソッドを呼び出し、学生を皆の前での発言に招待することができます。招待された学生はマイクが自動的に起動します。

      rtcClient.inviteToPlatform(userID) // 発言に招待された学生のuserID
      
    7. 教師側は、コンポーネントfinishAnsweringのメソッドを呼び出して、学生のマイク使用を禁止することができます。

      rtcClient.finishAnswering(userID)// マイク使用を禁止された学生のuserID
      

    手順4:学生側の聴講の実現

    1. 学生側は、コンポーネントenterRoomのメソッドを呼び出して、教室に入室して聴講の準備をします。

      rtcClient.enterRoom({
        role: 'student', // ロール
        classId // 教室ID
      })
      
    2. 教師側が挙手による質疑応答をオープンにすると、学生側はコンポーネントraiseHandのメソッドを呼び出し、発言を申請できます。

      rtcClient.raiseHand()
      

    手順5:チャットルーム機能の実装

    教師側と学生側は、チャットルームを利用してテキストメッセージを相互に送信することができます。

    const params = {
      classId: classId, // 教室ID
      message: 'こんにちは' // メッセージのテキスト
    }
    rtcClient.sendTextMessage(params) // チャットルームのメッセージの送信