tencent cloud

フィードバック

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

最終更新日:2022-04-02 16:29:01

    Demo体験

    デモンストレーション

    すでに作成してあるAppインストールパッケージをダウンロード、インストールして、リアルタイムインタラクティブ授業の機能を体験することができます。基本的なオーディオビデオ通話、画面共有、ホワイトボード、テキストチャットなどの基本機能を提供するだけでなく、全員のマイクミュート、学生の挙手による発言申請、先生の学生への発言要請、点呼、サインインなどといった高度な機能の提供も実現しました。

    リアルタイムインタラクティブ授業クイックスタートのソースコード

    ステップ1:アプリケーションの作成、SDKAppIDとキーの取得

    すでにTRTCのアプリケーションを作成している場合は、このステップをスキップし、以前作成したアプリケーションのSDKAppIDとキーを直接使用することができます。

    1. TRTCコンソールにログインし、開発支援 > Demoクイックスタート**を選択し、アプリケーションの作成タブでTestTRTCなどのアプリケーション名を入力して、作成**ボタンをクリックします。

    2. ソースコードのダウンロードタブをスキップし、次のステップボタンを直接クリックして設定の変更タブに進み、次のページに表示されたSDKAppIDとキーを以後のステップで使用できるよう、記録します。

    ステップ2:Instant Messaging(IM)の設定

    説明:

    リアルタイムインタラクティブ授業はTencent CloudのTRTCIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期してアクティブ化することができます。IMは付加価値サービスであり、課金ルールの詳細については、IMの料金説明をご参照ください。

    1. 関連するクラウドサービスメニューに進み、下図のIMアプリケーションをクリックしてIMアプリケーション管理ページにジャンプします。

    2. 先ほど作成したアプリケーションを見つけてクリックするとアプリケーション管理ページに進みます。

    3. メニューの機能設定 > ログインとメッセージを開くと、下図のように表示されますので、ログイン設定エリアの編集リンクをクリックし、Web端末の同時オンライン可能数を2以上の値に設定します(現在このアプリケーションで同時にログインを必要とするWeb IMインスタンスの数は最大2つで、引き続き使用する際の設定は追加可能です)。

    ステップ3:実行環境の準備

    このコードプロジェクトの実行はnode.jsとyarnに依存します。

    1. node.jsのインストール
      node.jsは14.16.0以降のバージョンの使用をお勧めします。インストール完了後、コマンドライン端末で以下のコマンドを実行してnode.jsのバージョンを確認することをお勧めします。

      node --version
      
    2. yarnのインストール

    • node.jsのバージョンが16.10より前の場合は、コマンドライン端末で以下のコマンドを実行してyarnをインストールします。

      npm i -g corepack
      
    • node.jsのバージョンが16.10以降の場合は、コマンドライン端末で以下のコマンドを実行してyarnをインストールします。

      corepack enable
      
    注意:

    Window10、11で権限不足のエラーメッセージが表示されたときは、管理者としてcmdで実行してみてください。

    ステップ4:コードクローンプロジェクト

    直接コードのダウンロードができ、解凍後にコードディレクトリtrtc-education-electronに進むか、またはgit ツールを使用してコードプロジェクトをクローンすることができます。gitツールを使用したコードクローンプロジェクトでは、コマンドライン端末で以下のコマンドを実行してください。

    git clone https://github.com/TencentCloud/trtc-education-electron.git
    cd trtc-education-electron
    

    ステップ5:SDKAppIDとキーの設定

    1. src/main/config/generateUserSig.jsファイルを見つけて開きます。
    2. 身分認証発行用のユーザー署名UserSigに使用するために、generateUserSig.jsファイルの関連パラメータを設定します。
      • SDKAPPID:デフォルトでは0です。ステップ1で作成したアプリケーションのSDKAppIDを設定してください。
      • SECRETKEY:デフォルトでは空文字列です。ステップ1で作成したアプリケーションのキーを設定してください。
    注意:

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

    ステップ6:開発モードの実行

    コマンドライン端末で、コードディレクトリtrtc-education-electronに進み、以下のコマンドを実行します。

    yarn
    yarn start
    
    注意:

    • 初めてyarnコマンド実行の依存関係をインストールする際、Window10、Window11で権限不足のエラーメッセージが表示された場合は、管理者としてcmdで一度実行してみてください。その後は一般ユーザーとしてcmdまたはVisual Studio Code、WebStormといった統合開発ツール付属の端末で実行することができます。
    • 依存関係のインストール中に、Electronのダウンロードが遅い、またはスタックするなどの問題が発生した場合は、お問い合わせして問題を解決できます。

    ステップ7:インストールパッケージの作成、実行

    コマンドライン端末で、コードディレクトリtrtc-education-electronに進み、以下のコマンドを実行してインストールパッケージを作成します。作成したインストールパッケージはtrtc-education-electron/build/releaseディレクトリにあり、インストールと実行が可能です。

    yarn package
    
    
    注意:

    Macインストールパッケージの作成はMac PCのみを使用できます。Windowsインストールパッケージの作成はWindows PCのみを使用できます。

    技術的なお問い合わせ

    詳細については、お問い合わせにご連絡をいただくか、colleenyu@tencent.comにメールでご連絡ください。

    参考ドキュメント

    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)