tencent cloud

Tencent Real-Time Communication

お知らせ・リリースノート
製品アップデート情報
Tencent Cloudオーディオビデオ端末SDKの再生アップグレードおよび承認チェック追加に関するお知らせ
TRTCアプリケーションのサブスクリプションパッケージサービスのリリースに関する説明について
製品の説明
製品概要
基礎概念
製品の機能
製品の強み
ユースケース
性能データ
購入ガイド
Billing Overview
無料時間の説明
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
課金に関するよくあるご質問
Refund Instructions
初心者ガイド
Demo体験
Call
コンポーネントの説明（TUICallKit）
Activate the Service
Run Demo
クイック導入
オフライン通知
Conversational Chat
クラウドレコーディング（TUICallKit）
AI Noise Reduction
インターフェースのカスタマイズ
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
公開ログ
よくある質問
ライブ配信
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo のクイックスタート
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDKのダウンロード
APIコードサンプル
Usage Guidelines
クライアント側 API
高度な機能
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
コンソールガイド
アプリケーション管理
使用統計
監視ダッシュボード
開発支援
Solution
Real-Time Chorus
よくあるご質問
課金関連問題
機能関連
UserSig関連
ファイアウォールの制限の対応関連
インストールパッケージの圧縮に関するご質問
AndriodおよびiOS関連
Web端末関連
Flutter関連
Electron関連
TRTCCalling Web関連
オーディオビデオ品質関連
その他のご質問
旧バージョンのドキュメント
TUIRoom（Web）の統合
TUIRoom (Android)の統合
TUIRoom (iOS)の統合
TUIRoom (Flutter)の統合
TUIRoom (Electron)の統合
TUIRoom APIのクエリー
クラウドレコーディングと再生の実現（旧）
Protocols and Policies
セキュリティコンプライアンス認証
セキュリティホワイトペーパー
情報セキュリティの説明
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC ポリシー
プライバシーポリシー
データ処理とセキュリティ契約
用語集
ドキュメントTencent Real-Time CommunicationRTC EngineUsage Guidelines01. SDKのプロジェクトへのインポートElectron

Electron

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-07-19 15:01:26
ここでは、主にTencent Cloud TRTC Electron SDKをプロジェクトに素早く統合する方法を紹介します。以下の手順に従って設定すれば、 SDK の統合作業を完了できます。



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

Windows(PC)
Mac

SDKのインポート

ステップ1. Node.jsのインストール

Windowsプラットフォームのインストールガイド
Mac OSプラットフォームのインストールガイド
1．WindowsOSに従って、最新バージョンのNode.js インストールパッケージWindows Installer (.msi) 64-bitを選択、ダウンロードします。 2．アプリケーションプログラムリストにあるNode.js command promptを開き、コマンドラインのポートを起動し、その後の手順における各コマンドの入力に使用します。


1. ターミナル（Terminal）ポートを開き、以下のコマンドを実行してHomebrewをインストールします。すでにインストールされている場合は、この手順はスキップしてください。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. 以下のコマンドを実行し、 Node.jsをインストールします。 10.0 バージョンより大きい必要があります。
$ brew install node

ステップ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();

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

パッケージツールのインストール：パッケージツールelectron-builder を使用してパッケージングすることを推奨します。以下のコマンドを実行してelectron-builderをインストールできます。
$ npm install electron-builder@latest --save-dev
Electronバージョンの TRTC SDK（すなわちtrtc_electron_sdk.nodeファイル）を正しくパッケージするために、次のコマンドを実行してnative-ext-loaderツールもインストールする必要があります。
$ npm install native-ext-loader@latest --save-dev

ステップ5：パッケージ設定の変更（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'
             // 開発環境について
             // rewritePath: './node_modules/trtc-electron-sdk/build/Release'
         } 
     },
]
この設定の意味は以下のとおりです。
Windowsの.exe ファイルをパッケージにするときは、 native-ext-loader に [アプリケーションプログラムルートディレクトリ]/resources ディレクトリでTRTC SDKをアップロードします。
Macの .dmg をパッケージするときは、 native-ext-loader に[アプリケーションディレクトリ]/Contents/Frameworsk/../Resources ディレクトリでTRTC SDKをロードします。
ローカル開発を実行する際は、native-ext-loaderに./node_modules/trtc-electron-sdk/build/Releaseディレクトリ下でTRTC SDKをロードさせます。simple demoの設定をご参照ください。
package.json のスクリプト構築で、 --target_platformパラメータを追加するには、以下を実行します。

ステップ6：package.json設定の修正

package.json は項目のルートディレクトリにあり、そのうち項目のパッケージに必要な情報を含みます。しかし、デフォルトの状況では、package.json の中のパスを修正しなければ順調にパッケージできません。以下の手順に従ってこのファイルを修正できます。
1. main設定の修正。
// 多くの状況では、mainファイル名は任意に設定できます。例えば、 TRTCSimpleDemoのものは次のように設定できます。
"main": "main.electron.js",

// しかし、 create-react-app のスキャフォールディングを使用して新規作成した項目、mainファイルは次のように設定する必要があります：
"main": "public/electron.js",
2. 以下の build 設定をコピーし、package.json ファイルに追加します。これは electron-builder が読み取る必要のある設定情報です。
"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" 
   }
 ]
  }
},
3. scriptsノードにおいて以下のアーキテクチャおよびパッケージしたコマンドスクリプトを追加します。 ここでは 、create-react-app および vue-cli 項目を例に、その他のツールで作成した項目もこの設定を参考にすることができます。
// 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インストールファイルをパッケージします

ステップ7：パッケージコマンドの実行

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をブロックするオフィスネットワークでは使用できません。類似した問題がおありの際は、企業ファイアウォール制限の対応をご参照ください。

Electronのインストールまたはパッケージ化にトラブルが生じました。

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

参考ドキュメント

SDK APIマニュアル
SDK更新ログ
Simple Demoソースコード
API Exampleソースコード
Electronについてのよくあるご質問
前の記事へ: Web次の記事へ: クイックインテグレーション(Flutter)

ヘルプとサポート

この記事はお役に立ちましたか？

フィードバック