tencent cloud

PrevNext

フィードバック

キーワードで検索してください

Recent Pages

ドキュメント
Tencent Real-Time Communication
    ドキュメント
    Download PDF

    Electron関連

    最終更新日:2024-07-19 15:32:54
    PDFファイルをダウンロード

      インストール関連

      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.1 システムを再起動し、 command + rキーを押したまま、システムが保護モードに入るまで押し続けます。
      1.2 terminal を開いてcsrutil disableと入力し、保護メカニズムを無効化します。
      1.3 再起動し、正常にシステムに入ります。この時点で vscode の端末起動プログラムは使用できるようになっています。
      1.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 の設定を変更します。
      2.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.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ファイルを設定し、パッケージ設定と構築したスクリプトを追加します。
      3.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"
       }
      },
      3.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.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公式サイトをご参照ください。
      お問い合わせ

      カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

      お問い合わせ
      テクニカルサポート

      さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

      チケットを送信
      電話サポート（24 時間365日対応）
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      個人情報保護方針利用規約クッキーポリシー