tencent cloud

ここでは、主にTencent Cloud TRTC Electron SDK をプロジェクトに素早く統合する方法を紹介します。

サポートするプラットフォーム

• Windows(PC)
• Mac

TRYC Electron SDKの統合

手順1：Node.jsのインストール

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

手順2： Electronのインストール

コマンドラインポートで以下のコマンドを実行し、Electronをインストールします。バージョンは>=4.0.0を推奨します。

$ npm install electron@latest --save-dev

手順3： Electronバージョン TRTC SDKのインストール

1. Electron項目でnpmコマンドを使用してSDKパッケージをインストールします：

   $ npm install trtc-electron-sdk@latest --save
   

説明：

TRTC Electron SDK最新版では、 trtc-electron-sdk でクエリーできます。

2．プロジェクトのスクリプトでモジュールを導入して、使用します。

const TRTCCloud = require('trtc-electron-sdk').default;
// import TRTCCloud from 'trtc-electron-sdk';
this.rtcCloud = new TRTCCloud();
// SDKバージョン番号の取得
this.rtcCloud.getSDKVersion();

v7.9.348から、TRTC Electron SDKはtrtc.d.tsファイルを増加しており、 TypeScriptを使用する開発者には便利になりました：

import TRTCCloud from 'trtc-electron-sdk';
const rtcCloud: TRTCCloud = new TRTCCloud();
// SDKバージョン番号の取得
rtcCloud.getSDKVersion();

パッケージで実行可能なプログラム

手順1：パッケージングツールのインストール

1．パッケージングツールelectron-builder を使用してパッケージングすることを推奨します。以下のコマンドを実行してelectron-builderをインストールできます。

$ npm install electron-builder@latest --save-dev

2． Electronバージョンの TRTC SDK（すなわちtrtc_electron_sdk.node ファイル）を正しくパッケージするために、以下のコマンドを実行して native-ext-loader ツールもインストールする必要があります。

$ npm install native-ext-loader@latest --save-dev

手順2：webpack.config.js設定の修正

webpack.config.js は、項目アーキテクチャの設定情報を含んでいます。webpack.config.js ファイルの位置は以下のとおりです。

• 通常、webpack.config.js は項目のルートディレクトリにあります。
• create-react-app 使用して項目を新規作成する状況では、この設定ファイルは node_modules/react-scripts/config/webpack.config.jsです。
• vue-cli を使用して項目を新規作成する状況では、webpack の設定は vue.config.js 設定の configureWebpack のプロパティにあります。
• プロジェクトファイルがカスタマイズされている場合は、ご自身でwebpack設定を検索してください。

1. 初めに webpack.config.js を構築するときは、 受信名を--target_platform のコマンドラインパラメータにできるため、コードの構築プロセスで異なる目標プラットフォームの特徴に応じて正しくパッケージできます。 module.exports の前に以下のコードを追加します。

   const os = require('os');
   const targetPlatform = (function(){
    let target = os.platform();
    for (let i=0; i<process.argv.length; i++) {
        if (process.argv[i].includes('--target_platform=')) {
            target = process.argv[i].replace('--target_platform=', '');
            break;
        }
    }
    if (!['win32', 'darwin'].includes) target = os.platform();
    return target;
   })();
   

注意：

os.platform() によって返される結果では、"darwin" は Macのプラットフォームを表します。64ビットまたは 32ビットに関わらず、"win32" は Windowsプラットフォームを表します。

2. その後 rules オプションでは以下の設定を追加します。targetPlatform 変数は rewritePath を使って、異なる目標プラットフォームに従って違う設定に切り替えることができます。

rules: [
{ 
    test: /\.node$/, 
    loader: 'native-ext-loader', 
    options: { 
        rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources' 
    } 
},
]

この設定の意味は以下のとおりです。

• Windowsの.exe ファイルをパッケージにするときは、 native-ext-loader に [アプリケーションプログラムルートディレクトリ]/resources ディレクトリでTRTC SDKをアップロードします。
• Macの .dmg をパッケージするときは、 native-ext-loader に[アプリケーションディレクトリ]/Contents/Frameworsk/../Resources ディレクトリでTRTC SDKをロードします。

package.json のスクリプト構築で、 --target_platformパラメータを追加するには、以下を実行します。

手順3：package.json設定の修正

package.json は項目のルートディレクトリにあり、そのうち項目のパッケージに必要な情報を含みます。しかし、デフォルトの状況では、package.json の中のパスを修正しなければ順調にパッケージできません。以下の手順に従ってこのファイルを修正できます。

1．main設定の修正。

// 多くの状況では、mainファイル名は任意に設定できます。例えば、 TRTCSimpleDemoのものは次のように設定できます。
"main": "main.electron.js",

// しかし、 create-react-app のスキャフォールディングを使用して新規作成した項目、mainファイルは次のように設定する必要があります：
"main": "public/electron.js",

"build": {
    "appId": "[appId はご自身で定義してください]",
    "directories": {
    "output": "./bin"
    },
    "win": {
    "extraFiles": [
      {
        "from": "node_modules/trtc-electron-sdk/build/Release/",
        "to": "./resources",
        "filter": ["**/*"]
      }
    ]
    },
    "mac": {
    "extraFiles": [
      { 
        "from": "node_modules/trtc-electron-sdk/build/Release/trtc_electron_sdk.node", 
        "to": "./Resources" 
      }
    ]
    }
},

// create-react-app項目にはこの設定を使用してください
"scripts": {
    "build:mac": "react-scripts build --target_platform=darwin",
    "build:win": "react-scripts build --target_platform=win32",
    "compile:mac": "node_modules/.bin/electron-builder --mac",
    "compile:win64": "node_modules/.bin/electron-builder --win --x64",
    "pack:mac": "npm run build:mac && npm run compile:mac",
    "pack:win64": "npm run build:win && npm run compile:win64"
}

// vue-cli項目にはこの設定を使用してください
"scripts": {
  "build:mac": "vue-cli-service build --target_platform=darwin",
  "build:win": "vue-cli-service build --target_platform=win32",
  "compile:mac": "node_modules/.bin/electron-builder --mac",
  "compile:win64": "node_modules/.bin/electron-builder --win --x64",
  "pack:mac": "npm run build:mac && npm run compile:mac",
  "pack:win64": "npm run build:win && npm run compile:win64"
}

手順4：パッケージコマンドの実行

• Mac .dmgインストールファイルのパッケージ：

  $ cd [項目ディレクトリ]
  $ npm run pack:mac
  

  実行に成功すると、パッケージツールはbin/your-app-name-0.1.0.dmgインストールファイルを新規作成しますので、このファイルのリリースを選択してください。

• Windows .exeインストールファイルのパッケージ：

  $ cd [項目ディレクトリ]
  $ npm run pack:win64
  

  実行に成功すると、パッケージツールはbin/your-app-name Setup 0.1.0.exeインストールファイルを新規作成しますので、このファイルのリリースを選択してください。

注意：

TRTC Electron SDK は、プラットフォームパッケージ（Mac下でWindowsをパッケージする.exe ファイル、またはWindowsプラットフォーム下でMacをパッケージする .dmgファイルなど）を一時的にサポートしません。現在プラットフォームを跨がるパッケージ方法を検討中ですのでご期待ください。

よくあるご質問

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

SDKがUDPプロトコルを使用してオーディオ・ビデオ伝送を行っているため、UDPをブロックするオフィスネットワークでは使用できません。類似した問題がおありの際は、企業ファイアウォール制限の対応をご参照の上、問題及び原因解決にお役立てください。

2. Electronのインストールまたはパッケージ化のトラブル

• Electron統合中にトラブルが生じた場合、例えばインストールのタイムアウトまたは失敗、パッケージ後にtrtc_electron_sdk.nodeファイルのロード失敗などの状況が生じた場合は、お問い合わせまでご連絡いただければご質問にお答えします。

参考ドキュメント

• SDK APIマニュアル
• SDK更新ログ
• Simple Demoソースコード
• API Exampleソースコード
• Electronについてのよくあるご質問