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 ソースコードのダウンロード

Github から プロジェクトソースコード をダウンロードするか、以下のコマンドを実行してダウンロードします。
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.jsultra-live-electron/TUILiveKit.preload.jsファイルをプロジェクトのルートディレクトリにコピーします。
3. TUILiveKit のメインウィンドウとサブウィンドウページおよびそのページルーティング定義をコピーする
ultra-live-electron/src/views/TUILiveKitChild.vueultra-live-electron/src/views/TUILiveKitMain.vueファイルをプロジェクトのsrc/viewsディレクトリにコピーします。
プロジェクトのページルーティングファイルsrc/router/index.tsに、以下の二つのルーティング設定を新規追加します:
// src/router/index.ts
import { 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.js
const { 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ディレクトリをコピーし、SDKAppIDSDKSecretKeyを設定します。
ultra-live-electron/src/debugフォルダーをプロジェクトのsrcディレクトリにコピーします。コピーしたbasic-info-config.jsファイルを開き、ステップ 1:サービスをアクテイブ化する時に取得したSDKAppIDSDKSecretKeyを入力します。
// 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.ts
import { 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.ts
export {}
declare global {
interface Window {
// *********************************** TUILiveKit 関連コード開始 *********************************** //
ipcRenderer: any;
nativeWindowHandle: Uint8Array;
mainWindowPort: MessagePort | null;
}
// *********************************** TUILiveKit 関連コード終了 *********************************** //
}

エントリーを追加し、TUILiveKit メインウィンドウを開く

Vue コンポーネント
Electron preload スクリプト
Electron メインプロセス
package.json
プロジェクトのあるページにボタンを新規追加し、クリックすると 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.js
const { ipcRenderer } = require("electron");

// Enable `ipcRenderer` can be used in vue and Javascript module
window.ipcRenderer = ipcRenderer;
Electron プロジェクトのメインプロセススクリプトで、vue コンポーネントから送信されたopenTUILiveKitリクエストを受信し、TUILiveKit メインウィンドウを開きます。
// main.js
const { 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 pinia
npm install --save trtc-electron-sdk movable-resizable-js
npm 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.js
module.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 モバイルクライアントを使用し、スマホから視聴してください。AndroidiOS

ステップ 6:インストールパッケージの構築

1. ultra-live-electron/electron-builder.json5 ファイルをプロジェクトのルートディレクトリにコピーし、ファイル内の productNameappId をアプリケーションの対応する情報に変更してください。
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 に基づいて実装されており、使用するには 対応するサービスを購入 し、licenseURLlicenseKey を取得してsrc/TUILiveKit/utils/beauty.tsファイルに入力する必要があります。
注意:
本番環境のプロジェクトでは、バックエンドサービスを呼び出してlicenseURLlicenseKeyを取得する必要があります。ここで JavaScript ファイルを書き込むことで迅速に有効化することはできますが、licenseURLlicenseKeyが漏洩するリスクが非常に高いため、迅速な導入と体験にのみ適しています。
// beauty.ts
export const XmagicLicense = {
licenseURL: "",
licenseKey: "",
};

交流とフィードバック

ご要望やフィードバックがございましたら、info_rtc@tencent.com までお問い合わせください。