Electron

最終更新日:2021-10-11 17:21:41

    ここでは、主にTRTC Demo (Electron)を素早く実行する方法をご紹介します。

    前提条件

    Tencent Cloudアカウントの登録を行い、実名認証が完了済みであること。

    操作手順

    ステップ1:新規アプリケーションの作成

    1.TRTCコンソールにログインし、【開発支援】>【Demoのクイック実行】を選択します。
    2.【アプリケーションの作成】をクリックして、 TestTRTCなどのアプリケーション名を入力します。すでにアプリケーションがある場合は、【既存のアプリケーションを選択】をクリックします。
    3. ビジネスのニーズに合わせてタグを追加または編集し、【作成する】をクリックします。

    説明:

    • アプリケーション名には、数字、中国語と英語の文字、アンダーラインのみを含めることができ、15文字以内とします。
    • タグは、Tencent Cloudのさまざまなリソースを識別および整理するのに役立ちます。例えば:企業に複数の事業部門があり、各部門に1つ以上のTRTCアプリケーションがある場合、TRTCアプリケーションにタグを追加することで部門情報にマークを付けることができます。タグは必須ではありません。実際のビジネスニーズに合わせてタグを追加または編集できます。

    ステップ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に関するご質問をご参照ください。

    ファイルディレクトリの説明

    .
    |---README.md                             READMEファイルです。よくお読みください
    |---main.electron.js                      Electronメインファイル
    |---public                             静的ファイルに保存
    |---babel.config.js
    |---package.json
    |---vue.config.js                         vue-cliプロジェクトファイル
    |---src                                   ソースコードディレクトリ
    | |---app.vue
    | |---common.css
    | |---main.js
    | |---components                          UIコンポーネントディレクトリ
    | | |---main-menu.vue
    | | |---nav-bar.vue
    | | |---show-screen-capture.vue
    | |---common                  ツール関数、パブリックコーパスなど
    | | |---live-room-service.js
    | | |---log.js                            ログツール
    | | |---mtah5.js                          
    | | |---routes.js
    | | |---rand.js
    | |---pages                          ページディレクトリ
    | | |---index.vue                         メインページ
    | | |---trtc                       ビデオミーティング関連ページ
    | | | |---trtc-room.vue        ビデオミーティングルームページ
    | | | |---trtc-index.vue   ビデオミーティングエントリーページ
    | | |---404.vue
    | | |---live               ライブストリーミングページ
    | | | |---live-index.vue   ライブストリーミングエントリーページ
    | | | |---live-room-audience.vue     ライブルーム視聴者ページ
    | | | |---live-room-anchor.vue     ライブルームキャスターのページ
    | |---debug    注意!デプロイするとき、このフォルダ内の署名ロジックをサーバーに移動して実装してください
    | | |---lib-generate-test-usersig.min.js  
    | | |---gen-test-user-sig.js              
    

    ステップ4:コンパイルと実行

    1. Nodeの最新バージョンをインストールします。64bitの.msiファイルの使用を推奨します。Nodeダウンロードアドレス
    2. win + rを押してcmdを入力し、管理者権限でコマンドラインウィンドウを起動し、プロジェクトディレクトリのディレクトリを見つけて、以下のコマンドを実行します。
      $ npm install
      インストール

    4.npmの依存パッケージのインストール完了を待って、コマンドラインウィンドウで以下のコマンドを引き続き実行してDemoを実行します。

    $ npm run start  # 初回の実行の場合、しばらくしてからウィンドウにUIが現れます
    demo実行

    プロジェクトのメインコマンド

    コマンド 説明
    npm run start 開発環境でDemoを実行
    npm run pack:mac Macの.dmgインストールファイルのパッケージング
    npm run pack:win64 Windows 64ビットの.exe インストールファイルのパッケージング

    よくあるご質問

    1. キーをクエリーするとき、パブリックキーとプライベートキーの情報しか取得できませんが、キーはどうしたら取得できますか。

    TRTC SDK 6.6バージョン(2019年08月)では、新しい署名アルゴリズムのHMAC-SHA256の使用を開始しました。それ以前に作成されたアプリケーションの場合、新しい暗号化鍵を取得するために、署名アルゴリズムをアップグレードする必要があります。アップグレードしない場合でも、旧バージョンアルゴリズムECDSA-SHA256を引き続き使用できます。

    アップグレード操作:

    1. TRTCコンソールにログインします。
    2. 左側ナビゲーションバーで【アプリケーション管理】を選択し、ターゲットアプリケーションのある行の【アプリケーション情報】をクリックします。
      3.【クイックスタート】タブを選択して【ステップ2 UserSigを発行するためのキーを取得】エリアの【ここをクリックしてアップグレード】をクリックします。

    2. 2台のデバイスで同時にDemoを実行しているのに、お互いの画面が表示されないのはなぜですか。

    2台のデバイスでDemoを実行するときは、異なるUserIDを使用していることを確認してください。TRTCでは、2台のデバイスでの同一UserID(SDKAppIDが異なる場合を除く)の同時使用をサポートしていません。

    3. ファイアウォールにはどのような制限がありますか。

    SDK が UDP プロトコルを使用してオーディオビデオ伝送を行っていることから、 UDPに対してブロックがあるオフィスネットワークでは使用することができません。類似の問題があれば、 企業ファイアウォール制限の対応をご参照の上、問題原因を調べ解決してください。