tencent cloud

インストール関連

trtc-electron-sdkは公式のElectron v12.0.1バージョンと互換性がありますか。

互換性があります。trtc-electron-sdkは特にelecron自体のSDKに依存しないので、それに関するバージョンの依存関係はありません。

Electronのダウンロードの際に404エラーが表示されます。

端末に次のコマンドを入力します。

$ npm config set electron_custom_dir 8.1.1 # バージョン番号によって決定

実行関連

Windows 32システムの実行時にError：resource\trtc_electron_sdk.node is not a valid Win32 applicationというエラーが表示されます。32ビットのtrtc_electron_sdk.nodeが必要ということでしょうか。

解決方法：

1. プロジェクトディレクトリ下のtrtc-electron-sdkのライブラリディレクトリ（xxx/node_modules/trtc-electron-sdk）に入り、次を実行します。

   npm run install -- arch=ia32
   

2. 32ビットのtrtc_electron_sdk.nodeのダウンロードを完了後、項目を再度パッケージ化します。

vscode terminalでElectron Demoを起動すると、入室後にディスプレイが白くなります。

vscodeにカメラの権限が必要です。次の方法で権限を追加することができます。

  cd ~/Library/Application\ Support/com.apple.TCC/
  cp TCC.db TCC.db.bak
  sqlite3 TCC.db    # sqlite> prompt appears.
   # for Mojave, Catalina
  INSERT into access VALUES('kTCCServiceCamera',"com.microsoft.VSCode",0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1541440109);
   # for BigSur
  INSERT into access VALUES('kTCCServiceCamera',"com.microsoft.VSCode",0,1,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1541440109);

Demoの実行時にNULLポインタの未定義のエラー“cannot read property 'dlopen' of undefined”がスローされてしまいます。

解決方法：
Electron 12バージョンではコンテキスト分離がデフォルトでオンになっています。contextIsolationをfalseに設定できます。

let win = new BrowserWindow({
width: 1366,
height: 1024,
minWidth: 800,
minHeight: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
},
});

Electronで再入室の問題が何度も発生します。

具体的なcaseを分析する必要がありますが、おおよその原因は次のとおりです。

• クライアントのネットワーク状態不良（ネットワークが切断されると再入室がトリガーされます）。
• 連続して2回入室シグナルを送信した場合も、再入室となる場合があります。
• デバイスの負荷が高すぎたことで、デコードに失敗し再入室となる場合があります。
• 同一のUIDでの複数端末ログインが互いにキックアウトされ、再入室となる場合があります。

端末に「Electron failed to install correctly」と表示されました。

インストールが完了したように見えて、実行中のプログラムがある場合、端末に次のエラーが表示されます。

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

次の3つの手順によって手動でのダウンロードを行ってください。

1. npm config get cacheを実行し、キャッシュディレクトリを確認します。
2. Electronを手動でダウンロードし、キャッシュディレクトリに保存します。
3. 再びnpm installを実行します。

カメラまたはマイクを呼び出すとそのままクラッシュしました。

vscodeの端末起動プログラムを使用し、trtc-electron-sdkがカメラとマイクを起動した場合、プログラムがそのままクラッシュします。

• 対処方法A：権限が承認されている端末実行プログラムを使用します。
• 対処方法B：vscodeの権限承認を行います。システム環境設定 > セキュリティとプライバシーからvscodeの権限を承認します。
• 対処方法C：次の手順で保護メカニズムを無効化します。
  1. システムを再起動し、 command + rキーを押したまま、システムが保護モードに入るまで押し続けます。
  2. terminal を開いてcsrutil disableと入力し、保護メカニズムを無効化します。
  3. 再起動し、正常にシステムに入ります。この時点で vscode の端末起動プログラムは使用できるようになっています。
  4. 保護メカニズムを再度有効にしたい場合は、ステップ2でcsrutil enableを実行します。

Electronのコンソールで「xx is not defined」というエラーが表示されました。

プログラムの実行時に、Electron のコンソールで xx is not defined と表示されます。この xx には node モジュールが入ります。例えば次のようになります。

Uncaught ReferenceError: require is not defined

Electron の main.js ファイルで nodeIntegration 設定項目を true に変更します。

let win = new BrowserWindow({
       width: 1366,
       height: 1024,
       webPreferences: {
            nodeIntegration: true,  // この項目をtrueに設定してください
       },
  });

パッケージ化関連

.nodeモジュールのロードに問題があります。

エラーメッセージ

パッケージ化してコンパイルしたプログラムを実行する際、コンソールにこのようなエラーメッセージがみられます。

• NodeRTCCloud is not a constructor
  
• Cannot open xxx/trtc_electron_sdk.nodeまたはThe specified module could not be found
  
• dlopen(xxx/trtc_electron_sdk.node, 1): image not found
  

ソリューション

上のようなメッセージが表示された場合は、 trtc_electron_sdk.nodeモジュールがプログラムに正しくパッケージ化されていないことを意味します。次の手順に従って処理することができます。

1. native-ext-loaderをインストールします。

    $ npm i native-ext-loader -D
   

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

      const os = require('os');
      // target_platformパラメータが渡されない場合、プログラムはデフォルトで現在のプラットフォームタイプに応じてパッケージします
      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;
      }
      }
      // win32 は統一してWindowsプラットフォームを表し、32ビットと64ビットのどちらも含まれます。darwinはMacプラットフォームを表します
      if (!['win32', 'darwin'].includes) target = os.platform();
      return target;
      })();
      

   2. 次のrules設定を追加します。

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

      注意：

      • vue-cliを使用して作成した項目については、webpack設定はvue.config.jsファイルのconfigureWebpackオプションに保存されます。
      • create-react-appを使用して作成した項目については、webpack設定ファイルは[プロジェクトディレクトリ]/node_modules/react-scripts/config/webpack.config.jsとなります。

3. packages.jsonファイルを設定し、パッケージ設定と構築したスクリプトを追加します。
   1. electron-builderパッケージ設定を追加します（大文字と小文字の区別に注意）。

      "build": {
      "省略": "...",
      "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" 
       }
      ]
      },
      "directories": {
      "output": "./bin"
      }
      },
      

   2. scripts構築、パッケージスクリプト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"
      }
      

   3. 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"
      }
      

エントリーファイルが見つかりません。

create-react-appを使用して作成した項目を、electron-builderでパッケージ化する際にこの問題が起きることがあります。

   $ node_modules\.bin\electron-builder.cmd
     • electron-builder  version=22.6.0 os=6.1.7601
     • loaded configuration  file=package.json ("build" field)
     • public/electron.js not found. Please see https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3
     • loaded parent configuration  preset=react-cra

このうち、public/electron.js not foundが、エントリーファイルが見つからないことを意味しています。

ソリューション

1. エントリーファイルを移動してリネームします。

   $ cd [項目ディレクトリ]
   $ mv main.electron.js ./public/electron.js
   

2. pacakge.jsonファイルを修正します。

   {
   "main": "public/electron.js",
   "省略": "..."
   }
   

パッケージ化を実行した際、fs-extraモジュールの構文エラーが表示されました。

[プロジェクトディレクトリ]\node_modules\electron-builder\node_modules\fs-extra\lib\empty\index.js:33
} catch {
           ^
SyntaxError: Unexpected token {
at new Script (vm.js:51:7)

最新のnodeにアップグレードできます。具体的にはNode.js公式サイトをご参照ください。