tencent cloud

コンポーネント trtc-electron-education は、リアルタイム双方向対話型授業のシーンで使用するTencent Real-Time Communication（TRTC）とInstant Messaging（IM)の機能を対象として、二次パッケージングしたものです。基本の音声・ビデオチャット、画面共有の機能をパッケージングすると同時に、eラーニングのシーンを対象に教師のQA開始、学生の挙手、教師が学生を招待して皆の前で回答させる、回答の終了などの関連機能もパッケージングされています。
trtc-electron-educationは、1つのオープンソースのnpm コンポーネントであり、Tencent Cloudの2つのクローズドソースであるSDKに依存しています。具体的な実現プロセスは、リアルタイム双方向対話型授業(Electron)をご参照ください。

• TRTC SDK：TRTC SDKを低レイテンシーのオーディオビデオ通話コンポーネントとして使用しています。
• IM SDK： IM SDKをシグナリング情報の送信と処理に利用します。

コンポーネントの接続

// yarn方式の導入
yarn add trtc-electron-education
// npm方式の導入
npm i trtc-electron-education --save

コンポーネントのパラメータ

入力必須となる主要パラメータは下表で示すとおりです。

初期化の例示

import TrtcElectronEducation from 'trtc-electron-education';
const rtcClient = new TrtcElectronEducation({
     sdkAppId: 1400***803,
     userID: '123'
     userSig: 'eJwtzM9****-reWMQw_'
 });

コンポーネントの概要

基本関数

on(EventCode, handler, context)

コンポーネントが配布するイベントのモニタリングに利用します。
パラメータ：

例示：

const EVENT = rtcClient.EVENT
rtcClient.on(EVENT.MESSAGE_RECEIVED, onMessageReceived);

off(EventCode, handler)

イベントモニタリングの取消。
パラメータ：

例示：

const EVENT = rtcClient.EVENT
rtcClient.off(EVENT.MESSAGE_RECEIVED, onMessageReceived);

createRoom(params: CreateRoomParams)

教師のクラス作成。
パラメータ：

例示：

interface CreateRoomParams {
  classId: number; // 教室 ID
  nickName: string; // ニックネーム
  avatar?:string; // プロファイル画像URL
}
rtcClient.createRoom(params).then(() => {
})

destroyRoom(classId: number)

教師がクラスから退出し、ルームを廃棄します。
パラメータ：

例示：

rtcClient.destroyRoom(classId)

enterRoom(params: EnterRoomParams)

教師が授業を開始し、学生は教室に入り、聴講の準備をします。
パラメータ：

例示：

interface EnterRoomParams {
  role: string; // ロール
  classId: number; // 教室 ID
  nickName?: string; // ニックネーム
  avatar?:string; // プロファイル画像URL
}
rtcClient.enterRoom(params).then(() => {
})

exitRoom(role:string, classId: number)

教師が授業を終了させ、学生は教室から退出します。
パラメータ：

例示：

rtcClient.exitRoom(role, classId);

挙手の操作部分の関数

startQuestionTime(classId: number)

教師がQA時間を開始。教師側が通知を発信し、学生がQA開始のイベントを受信して、挙手の機能を起動します。
パラメータ：

例示：

rtcClient.startQuestionTime(classId)

raiseHand()

学生の挙手。学生が挙手の通知を送信し、教師側が学生の挙手の通知を受信します。
パラメータ：無
例示：

rtcClient.raiseHand()

inviteToPlatform(userID: string)

教師が皆の前で回答させるために学生を招待。教師側が挙手リストの中の学生userIDを選択し、招待の通知を送信します。学生側は皆の前で回答する招待のイベントを受信し、招待を受けた学生のマイクが起動します。挙手する学生がいない場合は、教師が回答する学生を直接指名します。学生側が皆の前で回答する招待のイベントを受信し、指名された学生のマイクが起動します。
パラメータ：

例示：

rtcClient.inviteToPlatform(userID).then(() => {
})

finishAnswering(userID: string)

回答の終了。教師側が学生側の回答を終了します。学生は回答終了の通知を受信し、指定された学生のマイク接続が停止します。
パラメータ：

例示：

rtcClient.finishAnswering(userID).then(() => {
})

stopQuestionTime(classId: number)

QA時間の停止。教師側がQA時間を停止します。学生側は回答時間停止の通知を受信します。マイク接続済みの学生はマイク接続を停止し、挙手の機能をオフにする必要があります。
パラメータ：

例示：

rtcClient.stopQuestionTime(classId)

プッシュプルストリーム操作に関する関数

getScreenShareList()

画面共有のウィンドウのリストを取得。
パラメータ：無
例示：

rtcClient.getScreenShareList();

startScreenCapture(source: SourceParam)

画面共有を選択し、プッシュを開始。
パラメータ：

例示：

interface SourceParam {
  type: number; // キャプチャソースタイプ
  sourceId: string; // ソースIDの収集
  sourceName: string; // ソース名の収集、UTF8 エンコーディング
}
rtcClient.startScreenCapture({
   type,
   sourceId,
   sourceName
 })

startRemoteView(params: RemoteParams)

リモートのビデオ画面または画面共有の画面の表示を開始。
パラメータ：

例示：

interface RemoteParams {
  userID: string; // ユーザーID
  streamType: number; // 画面タイプ。1-大画面、2-小画面、3-画面共有
  view: HTMLElement; //表示画面をロードするDOM
}
const view = document.getElementById('localVideo');
rtcClient.startRemoteView({
  userID: userID,
  streamType: 1,//1-大画面、2-小画面、3-画面共有
  view: view
});

stopRemoteView(params: StopRemoteParams)

リモートのビデオ画面または画面共有の画面の表示を停止すると、同時に当該リモートユーザーのデータストリームを再びプルしなくなります。
パラメータ：

例示：

interface StopRemoteParams {
  userID: string; // ユーザーID
  streamType: number; // 画面タイプ。1-大画面、2-小画面、3-画面共有
}
rtcClient.stopRemoteView({
   userID: userID,
   streamType: 1 //1-大画面、2-小画面、3-画面共有
 });

メッセージ送受信に関する関数

sendTextMessage(params: MessageParams)

チャットルームのメッセージ送信。
パラメータ：

例示：

interface MessageParams {
  classId: number; // 教室 ID
  message: string; // メッセージテキスト
}
rtcClient.sendTextMessage(params).then(() => {
})

sendCustomMessage(userID: string, data: string)

カスタマイズ C2C メッセージの送信。
パラメータ：

例示：

rtcClient.sendCustomMessage(userID, JSON.stringify(params)

sendGroupCustomMessage(classId: number, data: string)

カスタマイズグループメッセージの送信。
パラメータ：

例示：

rtcClient.sendGroupCustomMessage(classId, JSON.stringify(params))

デバイス操作に関する関数

openCamera(view: HTMLElement)

カメラの起動。
パラメータ：

例示：

const domEle = document.getElementById('localVideo');
rtcClient.openCamera(domEle);

closeCamera()

カメラの停止。
パラメータ：無
例示：

rtcClient.closeCamera();

getCameraList()

カメラリストの取得。
パラメータ：無
例示：

rtcClient.getCameraList()

setCurrentCamera(deviceId:string)

カメラの設定。パラメータは getCameraDevicesListの中から取得できるデバイスIDです。
パラメータ：

例示：

rtcClient.setCurrentCamera(deviceId)

openMicrophone()

マイクをオンにします。
パラメータ：無
例示：

rtcClient.openMicrophone();

closeMicrophone()

マイクをオフにします。
パラメータ：無
例示：

rtcClient.closeMicrophone();

getMicrophoneList()

マイクのデバイスリストを取得します。
パラメータ：無
例示：

rtcClient.getMicrophoneList()

setCurrentMicDevice(micId:string)

マイクの設定。パラメータは getMicDevicesListの中から取得できるデバイスIDです。
パラメータ：

例示：

rtcClient.setCurrentMicDevice(micId)

setBeautyStyle(params: BeautyParams)

美顔、美白、肌の色調補正効果のランクを設定します。
パラメータ：

例示：

interface BeautyParams {
  beautyStyle: number;//スムース、ナチュラル
  beauty: number; //美顔レベル
  white: number; //美白レベル
  ruddiness: number; //肌色補正レベル
}
rtcClient.setBeautyStyle({
    beautyStyle: 1,
    beauty: 5,
    white: 5,
    ruddiness: 5
})

コンポーネントイベント

例示

const EVENT = rtcClient.EVENT
rtcClient.on(EVENT.STUDENT_RAISE_HAND, () => {
   //学生の挙手
})

詳細イベント