AI リアルタイム字幕をオンライン会議に導入する方法

本記事では手軽に使えるカンファレンス用のデモをすばやくインストールする手順と、AI リアルタイム文字起こし機能を用いて会議中の音声情報を字幕形式で表示する方法を紹介します。よりスマートなビジネス会議ツールを構築したい方や、オンライン授業やライブ・ロードショーなどのアクセシビリティを向上したい方に役立つ、明確なアイデアと運用例が得られます。

■ まずは Conference デモ を素早くインストール

1. ターミナルを開き、以下のコマンドをコピー＆ペーストしてリポジトリをクローンします。

git clone https://github.com/Tencent-RTC/TUIRoomKit.git

1. 依存関係をインストールします。

cd ./TUIRoomKit/Web/example/vite-vue3-ts

npm install

「Activate Service」ページにアクセスし、SDKAppID と SDKSecretKey を取得した上で、TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js ファイルに記載してください。

機能紹介

TUIRoomKit を導入した後、画面下部の「AI Assistant」をクリックすると AI リアルタイム字幕機能をオンにできます。「AI リアルタイム字幕」を選択すると、会議中の発言が字幕として表示されるようになります。

機能実装手順

ステップ1：ローカルのバックエンドサービス起動

注意:
Open AI transcription（音声文字起こし）にはユーザーのクラウド用 ID とキーが必要で、セキュアな取り扱いが求められます。クライアントの実装ではなく自社のバックエンド側に StartAITranscription を組み込み、Node.js などのサーバーで処理する必要があります。他言語の場合でもデバッグを行い、対応するサンプルコードを生成してください。

Node.js バックエンドサービスを起動して、クライアントがユーザーの入室を検知した際に HTTP リクエストを経由して AI 字幕タスクを開始させます。サンプルコードはこちらからダウンロードできます。

require('dotenv').config();
const express = require('express');
const tencentcloud = require('tencentcloud-sdk-nodejs-trtc');
const cors = require('cors')

const TrtcClient = tencentcloud.trtc.v20190722.Client;

// 環境変数から SecretId, SecretKey を取得
const secretId = process.env.TENCENT_SECRET_ID || '';
const secretKey = process.env.TENCENT_SECRET_KEY || '';
const region = process.env.TENCENT_REGION || '';

const clientConfig = {
  credential: {
    secretId: secretId,
    secretKey: secretKey,
  },
  region: region,
  profile: {
    httpProfile: {
      endpoint: 'trtc.tencentcloudapi.com',
    },
  },
};

const client = new TrtcClient(clientConfig);

const app = express();
app.use(express.json());
app.use(cors());

// AI 字幕タスク開始エンドポイント
app.post('/start', async (req, res) => {
  const { SdkAppId, RoomId, RoomIdType = 1, UserId, UserSig } = req.body;
  const params = {
    SdkAppId: SdkAppId,
    RoomId: RoomId,
    RoomIdType: RoomIdType,
    TranscriptionParams: {
      UserId: UserId,
      UserSig: UserSig,
    },
  };

  try {
    const data = await client.StartAITranscription(params);
    console.log('success', data);
    res.status(200).json(data);
  } catch (err) {
    console.error('error', err);
    res.status(500).json({ error: err.message });
  }
});

// AI 字幕タスク停止エンドポイント
app.post('/stop', async (req, res) => {
  const { TaskId } = req.body;

  try {
    const data = await client.StopAITranscription({ TaskId: TaskId });
    res.status(200).json(data);
  } catch (err) {
    console.error('error', err);
    res.status(500).json({ error: err.message });
  }
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ステップ2：Roomkit で AI アシスタントを有効化

注意：
Roomkit は AI 字幕・会議内容の要約向けデータを処理しますが、実際の ASR（音声認識）はクライアントユーザーが会議に入室したタイミングで作動します。ビジネス要件に応じて、この呼び出しロジックやタイミングを調整してください。

<template>
  <conference-main-view display-mode="permanent"></conference-main-view>
</template>
<script setup lang="ts">
import { roomService } from '@tencentcloud/roomkit-web-vue3';
// conference-main-view がマウントされる前に呼び出し
roomService.setComponentConfig({ AIControl: { visible: true } });
</script>

ステップ3：Roomkit がユーザーの入室を検知し、Node.js サービスを呼び出して AI 字幕を有効にする

<template>
  <conference-main-view display-mode="permanent"></conference-main-view>
</template>
<script setup lang="ts">
import { conference } from '@tencentcloud/roomkit-web-vue3';
import { startAITranscription } from '../http';
const handleAITask = (data: {roomId: string}) => {
  const { roomId } = data;
  startAITranscription({
    RoomId: roomId,
    UserId: 'robot', // ここでは robot という仮想ユーザーを使用
    UserSig: 'xxx',  // robot 用の userSig
    SdkAppId: sdkAppId,
    RoomIdType: 1,   // 文字列タイプのルーム
  });
};
conference.on(RoomEvent.ROOM_JOIN, handleAITask);
conference.on(RoomEvent.ROOM_START, handleAITask);
onUnmounted(() => {
  conference.off(RoomEvent.ROOM_JOIN, handleAITask);
  conference.off(RoomEvent.ROOM_START, handleAITask);
});
</script>

// http.ts
import axios from 'axios';
const http = axios.create({
  baseURL: 'http://localhost:3000', // Node.js サーバーのアドレス
  timeout: 10000,                   // タイムアウト設定
});

interface TranscriptionParams {
  SdkAppId: number;
  RoomId: string;
  RoomIdType?: number;
  UserId: string;
  UserSig: string;
}

interface StopParams {
  TaskId: string;
}

// AI 字幕タスク開始
export function startAITranscription(params: TranscriptionParams) {
  return http.post('/start', params);
}

// AI 字幕タスク停止
export function stopAITranscription(params: StopParams) {
  return http.post('/stop', params);
}

以上のステップを通じて、Node.js バックエンドで AI 字幕タスクを起動し、TUIRoomKit と連携することでオンライン会議中にリアルタイムで字幕を表示できます。スマートなビジネス会議ツールを目指したり、オンライン学習やライブ・ロードショーのアクセシビリティを高めたい場合など、さまざまな用途でお役立てください。