Video Live Integration
本文書では、デスクトップ側の TUILiveKit コンポーネントをプロジェクトに素早く統合することで、アプリケーションにライブプッシュ機能を提供する方法を説明します。
環境準備
Windows パソコン:オペレーティングシステム Windows 10 または 11 Version。
Node.js: バージョン:Node.js ≥ 16.19.1(公式の LTS バージョンを使用し、npm バージョンが node バージョンと一致することを推奨)。
ステップ 1:サービスをアクテイブ化する
Tencent Cloud が提供する音声・ビデオサービスを使用する前に、コンソールでアプリケーションの音声・ビデオサービスをアクテイブ化する必要があります。具体的な手順については、 サービスをアクテイブ化する(TUILiveKit) を参照してください。
ステップ 2:TUILiveKit ソースコードのダウンロード
git clone https://github.com/Tencent-RTC/ultra-live-electron.git
ステップ 3:TUILiveKit の統合
TUILiveKit がデスクトップ側で実行される際には、TUILiveKit のメインインターフェースと設定インターフェースをホストするための 2 つの Electron ウィンドウをそれぞれ作成する必要があります。これらの 2 つのウィンドウをそれぞれ TUILiveKitメインウィンドウ とサブウィンドウ と呼びます。この統合の結果、既存の Electron アプリケーション 内でボタンをクリックすることで、TUILiveKit メインウィンドウ を作成して開き、TUILiveKit のすべての機能を使用できるようになります。
事前依存
コードプロジェクトには以下のテクノロジースタックが含まれている必要があります。
Vue3
Webpack
TypeScript
Electron
注意:
TUILiveKit コードをプロジェクトにコピーする
1. TUILiveKit コンポーネントをコピーする
ultra-live-electron/src/TUILiveKit
ディレクトリをプロジェクトのsrc
ディレクトリにコピーします。2. TUILiveKit ウィンドウ作成コードのコピー
ultra-live-electron/TUILiveKit.main.js
とultra-live-electron/TUILiveKit.preload.js
ファイルをプロジェクトのルートディレクトリにコピーします。3. TUILiveKit のメインウィンドウとサブウィンドウページおよびそのページルーティング定義をコピーする
ultra-live-electron/src/views/TUILiveKitChild.vue
とultra-live-electron/src/views/TUILiveKitMain.vue
ファイルをプロジェクトのsrc/views
ディレクトリにコピーします。プロジェクトのページルーティングファイル
src/router/index.ts
に、以下の二つのルーティング設定を新規追加します:// src/router/index.tsimport { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';import HomeView from '../views/HomeView.vue';const routes: Array<RouteRecordRaw> = [{ // お客様のアプリケーションの現在のルーティングページ。ページ内に TUILiveKit メインウィンドウを開くようにトリガーするボタンがありますpath: '/',name: 'home',component: HomeView},// ********************************** TUILiveKit 関連コード開始 ********************************** //{ // TUILiveKit メインウィンドウページpath: '/tui-live-kit-main',name: 'tui-live-kit-main',component: () => import(/* webpackChunkName: "TUILiveKitMain" */ '../views/TUILiveKitMain.vue')},{ // TUILiveKit サブウィンドウページpath: '/tui-live-kit-child',name: 'tui-live-kit-child',component: () => import(/* webpackChunkName: "TUILiveKitChild" */ '../views/TUILiveKitChild.vue'),},// ********************************** TUILiveKit 関連コード終了 ********************************** //];// ********************************** TUILiveKit 関連コード開始 ********************************** //// メインプロセスからのウィンドウタイプ通知をリッスンし、ルーティングジャンプを実行window.ipcRenderer.on('window-type', (event: any, type: string) => {console.log(`[router] window type:${type}`);console.log(`[router] current href:${window.location.href}`);router.replace({ name: `tui-live-kit-${type}`});});// ********************************** TUILiveKit 関連コード終了 ********************************** //const router = createRouter({history: createWebHashHistory(),routes});export default router;
4. 美顔の関連コード、リソースと設定をコピーします。
ultra-live-electron/public/assets
ディレクトリとファイルpublic/avatar.png
をプロジェクトのpublic
ディレクトリにコピーします。ultra-live-electron/scripts/prestart.js
ファイルをプロジェクトのscripts
ディレクトリにコピーし、プロジェクトのpackage.json
ファイルのscripts
部分に以下のコマンドを新規追加します。{"scripts": {"prestart": "node ./scripts/prestart.js"}}
ここでは美顔機能を有効にせず、上記の設定、コード、リソースのコピーでプロジェクトの運用に問題がないことを保証できます。美顔機能を有効にする方法は 美顔機能を有効にする方法 を参照してください。
5.
vue.config.js
設定の修正プロジェクトの
vue.config.js
ファイルに以下の設定を新規追加します。// vue.config.jsconst { defineConfig } = require('@vue/cli-service')// *********************************** TUILiveKit 関連コード開始 *********************************** //const os = require("os");const isProduction = process.env.NODE_ENV === "production";const platform = os.platform();// *********************************** TUILiveKit 関連コード終了 *********************************** //module.exports = defineConfig({transpileDependencies: true,// *********************************** TUILiveKit 関連コード開始 *********************************** //publicPath: "./",configureWebpack: {devtool: isProduction ? "source-map" : "inline-source-map",target: "electron-renderer",module: {rules: [{test: /\.node$/,loader: "native-ext-loader",options: {rewritePath: isProduction? platform === "win32"? "./resources": "../Resources": "./node_modules/trtc-electron-sdk/build/Release",},},],},}// *********************************** TUILiveKit 関連コード終了 *********************************** //});
6.
src/debug
ディレクトリをコピーし、SDKAppID
とSDKSecretKey
を設定します。ultra-live-electron/src/debug
フォルダーをプロジェクトのsrc
ディレクトリにコピーします。コピーしたbasic-info-config.js
ファイルを開き、ステップ 1:サービスをアクテイブ化する時に取得したSDKAppID
とSDKSecretKey
を入力します。// basic-info-config.js/*** Tencent Cloud SDKAppID。お客様のアカウントの SDKAppID に置き換える必要があります。* Tencent Cloud TRTC[コンソール](https://console.cloud.tencent.com/rav )でアプリケーションを作成すると、SDKAppID が表示されます、* これは Tencent Cloud が顧客を区別するために使用する一意の識別子です。*/export const SDKAppID = 0;/*** サインを計算するための暗号化キー。取得の手順は以下の通りです。** step1. Tencent Cloud TRTC[コンソール](https://console.cloud.tencent.com/rav )に入ります。まだアプリケーションがない場合は作成します。* step2.「アプリケーション設定」をクリックして基本設定ページに入り、「アカウントシステムの統合」部分を見つけます。* step3. 「キーを見る」ボタンをクリックすると、UserSig を計算するために使用される暗号化されたキーが表示されます。これをコピーして以下の変数に貼り付けてください** 注意:この方法はデバッグ Demo にのみ適用されます。暗号キーの漏洩によるトラフィック盗用を防止するために、本番環境に移行する前に UserSig 計算コードとキーをバックエンドサーバーに移動してください。* 文書:https://cloud.tencent.com/document/product/647/17275#Server*/export const SDKSecretKey = '';
7. pinia 状態管理を有効化してテーマスタイルを導入する
プロジェクトの
src/main.ts
ファイルを開いて、pinia 状態管理のサポートを追加します。// main.tsimport { createApp } from 'vue';// *********************************** TUILiveKit 関連コード開始 *********************************** //import { createPinia } from 'pinia';import "./TUILiveKit/assets/theme.css";// *********************************** TUILiveKit 関連コード終了 *********************************** //import App from './App.vue'import router from './router'createApp(App)// *********************************** TUILiveKit 関連コード開始 *********************************** //.use(createPinia())// *********************************** TUILiveKit 関連コード終了 *********************************** //.use(router).mount('#app');
8. global.d.ts を修正
プロジェクトの
src/global.d.ts
ファイルで、Window タイプに対して以下のプロパティ宣言を追加:// src/global.d.tsexport {}declare global {interface Window {// *********************************** TUILiveKit 関連コード開始 *********************************** //ipcRenderer: any;nativeWindowHandle: Uint8Array;mainWindowPort: MessagePort | null;}// *********************************** TUILiveKit 関連コード終了 *********************************** //}
エントリーを追加し、TUILiveKit メインウィンドウを開く
プロジェクトのあるページにボタンを新規追加し、クリックすると Electron のメインプロセスに TUILiveKit メインウィンドウを開くように通知します。以下は実装したサンプルコードです。
// HomeView.vue<template><div class="home"><button @click="openTUILiveKit">ライブ配信開始</button></div></template><script setup lang="ts">import { ref } from 'vue';import type { Ref } from 'vue';import { getBasicInfo } from '../debug/basic-info-config';const isOpen:Ref<boolean> = ref(false); // 状態を記録して、TUILiveKit メインウィンドウを繰り返し開くことを避けるconst openTUILiveKit = async () => {if (!isOpen.value) {const currentUserInfo = await getBasicInfo();if (currentUserInfo) {window.ipcRenderer.send('openTUILiveKit', {userInfo: currentUserInfo // TUILiveKit メインウィンドウを開くにはユーザー情報をパラメータとして指定する必要があることに注意してください});isOpen.value = true;} else {console.error('Error: cannot get current user info');}}};</script>
Electron プロジェクトの preload スクリプトで、Electron の
ipcRenderer
オブジェクトをグローバルオブジェクトwindow
に配置します。これにより、vue コンポーネントおよび JavaScript/TypeScript スクリプト内で、Electron メインプロセスと通信が行いやすくなります。// preload.jsconst { ipcRenderer } = require("electron");// Enable `ipcRenderer` can be used in vue and Javascript modulewindow.ipcRenderer = ipcRenderer;
Electron プロジェクトのメインプロセススクリプトで、vue コンポーネントから送信された
openTUILiveKit
リクエストを受信し、TUILiveKit メインウィンドウを開きます。// main.jsconst { app, BrowserWindow, ipcMain } = require('electron');const path = require('path');// *********************************** TUILiveKit 関連コード開始 *********************************** //const { TUILiveKitMain } = require("./TUILiveKit.main");// *********************************** TUILiveKit 関連コード終了 *********************************** //let mainWindow = null;const createWindow = () => {mainWindow = new BrowserWindow({width: 800,height: 600,// *********************************** TUILiveKit 関連コード開始 *********************************** //webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation: false,}// *********************************** TUILiveKit 関連コード終了 *********************************** //});// *********************************** TUILiveKit 関連コード開始 *********************************** //bindIPCMainEvent();// *********************************** TUILiveKit 関連コード終了 *********************************** //if (app.isPackaged) {mainWindow.loadFile("dist/index.html");} else {mainWindow.loadURL('http://localhost:8080');}}// *********************************** TUILiveKit 関連コード開始 *********************************** //function bindIPCMainEvent() {ipcMain.on("openTUILiveKit", (event, args) => {console.log(`[main] open live kit`, args);TUILiveKitMain.open(args); // Open TUILiveKit main window});}// *********************************** TUILiveKit 関連コード終了 *********************************** //app.whenReady().then(() => {createWindow();app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()});})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()});
プロジェクトの package.json ファイルに以下の設定を新規追加し、開発モードで Electron アプリケーションを起動することをサポートします。
{"main": "main.js","scripts": {"start": "electron ."},"overrides": {"@tencentcloud/tuiroom-engine-electron": {"trtc-electron-sdk": "^12.2.701"}}}
依存のインストール
npm install --save pinianpm install --save trtc-electron-sdk movable-resizable-jsnpm install --save @tencentcloud/tuiroom-engine-electron # TUILiveKit ライブルームエンジンnpm install --save trtc-electron-plugin-xmagic # TUILiveKit に統合された美顔プラグインnpm install --save-dev native-ext-loader electron-devtools-installer electron-builder
ステップ 4:開発モードの起動
1. プロジェクトディレクトリに入り、コマンドラインターミナル
cmd.exe
を開き、以下のコマンドを実行し、開発モードで Web プロジェクトを起動します。npm run serve
起動時に error Component name "Index" should always be multi-word vue/multi-word-component-names というエラーが発生した場合、お客様のプロジェクトの eslint 設定と TUILiveKit に差異があることを示します。お客様のプロジェクトの .eslintrc.js ファイルまたは package.json ファイルの eslintConfig 部分を開き、以下のコードに示されている vue/multi-word-component-names 検証ルールを追加し、再度「npm run serve」コマンドを実行してください。
// .eslintrc.jsmodule.exports = {root: true,env: {node: true},'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/typescript/recommended'],parserOptions: {ecmaVersion: 2020},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',// *********************************** TUILiveKit 関連コード開始 *********************************** //"vue/multi-word-component-names": process.env.NODE_ENV === 'production' ? 'warn' : 'off',// *********************************** TUILiveKit 関連コード終了 *********************************** //}}
2. プロジェクトディレクトリに入り、新しいコマンドラインターミナル
cmd.exe
を開き、以下のコマンドを実行し、開発モードで Electron アプリケーションを起動します。npm run start
起動成功後、アプリケーション画面に追加した「ライブ配信開始」ボタンをクリックすると、TUILiveKit メインウィンドウを開くことができます。開くと下図のようになります:

ステップ 5:ライブ配信を開始する
1. カメラを追加する
配信開始前に、画面ソースを追加する必要があります。現在、カメラ、画面共有、ウィンドウ共有、画像がサポートされています。以下の図はカメラを追加した後のイメージです。

2. Logo 画像の追加
ライブ配信中に自分のブランド Logo を追加する必要がある場合、Logo 画像を追加することができます。下図は、透明な背景を持つ Logo 画像を追加した後のイメージです。新しく追加された画像の周囲には黄色の枠が表示されるのは、現在選択されていることを示します。選択されているマルチメディアソースは、マウスで位置を移動したり、サイズを調整したり、右クリックメニューを使用して回転や表示レイヤーの変更などを行うことができます。

3. ライブ配信開始
ライブ配信開始をクリックすると、ライブ配信が開始されます。配信が正常に開始すると、ライブ配信開始ボタンはライブ配信終了に変わります。クリックするとライブ配信を終了できます。

4. ライブ配信の視聴
デスクトップクライアントの TUILiveKit はライブストリーミングのみをサポートします。視聴する場合は、TUILiveKit モバイルクライアントを使用し、スマホから視聴してください。Android、iOS。
ステップ 6:インストールパッケージの構築
1.
ultra-live-electron/electron-builder.json5
ファイルをプロジェクトのルートディレクトリにコピーし、ファイル内の productName
と appId
をアプリケーションの対応する情報に変更してください。2. プロジェクトの package.json ファイルに以下のコマンドを新規追加し、アプリケーションのインストールパッケージを構築できるようにします。
{"scripts": {"build:win64": "electron-builder --win --x64","pack:win64": "npm run build && npm run build:win64"}}
3. アプリケーションインストールパッケージを構築します。
プロジェクトディレクトリに入り、コマンドラインターミナル
cmd.exe
を開き、以下のコマンドを実行すると構築が開始されます。構築されたインストールパッケージはプロジェクトの release
ディレクトリにあります。npm run pack:win64
4. 構築されたアプリケーションのインストールパッケージをインストールし、実行します。
よくある質問
導入条件に合うプロジェクトがない場合、どうすればいいですか?
具体的な状況に応じて、異なる方法を採用することをお勧めします。
まだプロジェクトがない場合は、当社のオープンソース Github プロジェクト を直接クローンしてプロジェクトとして使用することをお勧めします。
お客様のプロジェクトが当社の導入条件と一致しない場合は、当社のオープンソース テンプレートプロジェクト: trtc-electron-template-vue3-webpackを参照してお客様のプロジェクトを調整してください。
JavaScript のプロジェクトであり TypeScript をサポートしていない場合は、よくある質問「3. JavaScript プロジェクトに統合する方法は?」を参照してください。
Vite での構築と導入はサポートされていますか?
JavaScript プロジェクトに統合する方法は?
JavaScript プロジェクトでは直接 TUILiveKit を統合することができないため、お客様のプロジェクトを改造して TypeScript をサポートする必要があります。手順は次のとおりです。
1. 依存のインストール
npm install --save-dev typescript@4.5.5 @typescript-eslint/eslint-plugin@5.4.0 @typescript-eslint/parser@5.4.0 @vue/cli-plugin-typescript@5.0.0 @vue/eslint-config-typescript@9.1.0
2.
ultra-live-electron/tsconfig.json
ファイルをプロジェクトのルートディレクトリにコピーします。3.
ultra-live-electron/src/global.d.ts
ファイルをプロジェクトのルートディレクトリにコピーします。美顔機能を有効化する方法は?
TUILiveKit が使用する美顔機能は Tencent Effect SDK に基づいて実装されており、使用するには 対応するサービスを購入 し、
licenseURL
と licenseKey
を取得してsrc/TUILiveKit/utils/beauty.ts
ファイルに入力する必要があります。注意:
本番環境のプロジェクトでは、バックエンドサービスを呼び出して
licenseURL
とlicenseKey
を取得する必要があります。ここで JavaScript ファイルを書き込むことで迅速に有効化することはできますが、licenseURL
とlicenseKey
が漏洩するリスクが非常に高いため、迅速な導入と体験にのみ適しています。// beauty.tsexport const XmagicLicense = {licenseURL: "",licenseKey: "",};
交流とフィードバック
ご要望やフィードバックがございましたら、info_rtc@tencent.com までお問い合わせください。