ここでは、主にTencent Cloud TRTC Electron SDK をプロジェクトに素早く統合する方法を紹介します。
1.WindowsOSに従って、最新バージョンのNode.js インストールパックWindows Installer (.msi) 64-bit
を選択、ダウンロードします。
2.アプリケーションプログラムリストにあるNode.js command promptを開き、コマンドラインのポートを起動し、その後の手順における各コマンドの入力に使用します。
コマンドラインポートで以下のコマンドを実行し、Electronをインストールします。バージョンは>=4.0.0を推奨します。
$ npm install electron@latest --save-dev
$ 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.パッケージングツール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
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.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プラットフォームを表します。
rules
オプションでは以下の設定を追加します。targetPlatform
変数は rewritePath
を使って、異なる目標プラットフォームに従って違う設定に切り替えることができます。rules: [
{
test: /\.node$/,
loader: 'native-ext-loader',
options: {
rewritePath: targetPlatform === 'win32' ? './resources' : '../Resources'
}
},
]
この設定の意味は以下のとおりです。
.exe
ファイルをパッケージにするときは、 native-ext-loader
に [アプリケーションプログラムルートディレクトリ]/resources
ディレクトリでTRTC SDKをアップロードします。.dmg
をパッケージするときは、 native-ext-loader
に[アプリケーションディレクトリ]/Contents/Frameworsk/../Resources
ディレクトリでTRTC SDKをロードします。package.json
のスクリプト構築で、 --target_platform
パラメータを追加するには、以下を実行します。
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"
}
パラメータ | 説明 |
---|---|
main | Electron のエントリーファイルは、一般には自由に設定できます。しかし、項目をcreate-react-app のスキャフォールディングを使用して作成した場合は、エントリーファイルは public/electron.js に設定する必要があります |
build.win.extraFiles | Windowsプログラムをパッケージする場合は、electron-builder はfrom が示すディレクトリ下のすべてのファイルをbin/win-unpacked/resources(すべて小文字表記)にコピーします |
build.mac.extraFiles | Macプログラムをパッケージする場合は、electron-builder はfrom が示すtrtc_electron_sdk.node ファイルをbin/mac/your-app-name.app/Contents/Resources(頭文字は大文字表記)にコピーします |
build.directories.output | パッケージファイルの出力パス。例えば、この設定をbin ディレクトリに出力する場合は、実際のニーズに従って修正します |
build.scripts.build:mac | Macプラットフォームを目標にスクリプトを構築します |
build.scripts.build:win | Windowsプラットフォームを目標にスクリプトを構築します |
build.scripts.compile:mac | Macの .dmgインストールファイルをコンパイルします |
build.scripts.compile:win64 | Windowsの .exeインストールファイルをコンパイルします |
build.scripts.pack:mac | まず build:macアーキテクチャコードをコールしてからcompile:macをコールして .dmgインストールファイルをパッケージします |
build.scripts.pack:win64 | まず build:winアーキテクチャコードをコールしてからcompile:win64をコールして .exeインストールファイルをパッケージします |
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ファイルなど)を一時的にサポートしません。現在プラットフォームを跨がるパッケージ方法を検討中ですのでご期待ください。
SDKがUDPプロトコルを使用してオーディオ・ビデオ伝送を行っているため、UDPをブロックするオフィスネットワークでは使用できません。類似した問題がおありの際は、企業ファイアウォール制限の対応をご参照の上、問題及び原因解決にお役立てください。
この記事はお役に立ちましたか?