Real time interaction - Education version SDK overview

Real time Interactive Education Edition (formerly Low Code Interactive Classroom, LCIC) is a multifunctional product that integrates audio and video connectivity, interactive whiteboard, and live streaming

（ https://www.tencentcloud.com/document/product/1168/53651 ）

This project is a client-side JavaScript SDK (demo), which allows you to develop and customize your own real-time interactive applications based on the SDK

Core concepts

Room: The room represents a globally unique spatiotemporal place where real-time interaction occurs, identified by the room ID, and can be created by Tencent Cloud API（ https://www.tencentcloud.com/document/product/1168/52794 ）, then you can call the SDK method to join the room and start publishing audio and video streams in the room

Function

The SDK mainly includes the following modules:

-TCIC: Packaging the original educational version of concepts such as rooms/homeowners/spectators, supporting the basic operations of these objects.

-TIM: Supports real-time data communication within the room, such as chatting, all staff messaging, etc. It can achieve various business models such as all staff answering, announcements, gift distribution, etc.

-TRTC: Real time video call function packaging, which can achieve functions such as connected voice calls.

Demo

https://dev-class.qcloudclass.com/next/

Demo Code

https://github.com/tencentyun/lcic-UIlessdemo

Quick Start

1. Install SDK dependencies

npm

npm install --save @tcic/core-sdk-v1

yarn

yarn add @tcic/core-sdk-v1

2. Import the SDK

import * as SDK from '@tcic/core-sdk-v1';

3. Create the TCIC AND TRTC instance

const tcic = SDK.create({
  userId: 'xxx';  //
  token: 'token_of_the_userid';
  classId: 345678; // got from cloud api
});

const trtcClient = SDK.createTrtcClient(tcic);

4. Join the room and create TIM instance

await tcic.init();

const tim = SDK.createTimClient(tcic);

5. Local preview your video and audio

trtcClient.localPreview({
  view: 'dom-id',
});

6. Start and join the TRTC room, your local preview will beutomatically published to the room.

await tcic.start();
await trtcClient.enterRoom();

7. Pause your video and audio

trtcClient.pausePublish({
  target: ['video', 'audio'],
});

8. Resume your video and audio

trtcClient.resumePublish({
  target: ['video', 'audio'],
});

9. Fetch the room members by page.

tcic.getMembersDetail(classId, {
  page: 1,
  limit: 100,
});

10. Automatically play member audio and video. If students have not joined, it will automatically play after students join.

trtcClient.startRemote({
  view: `dom-id`,
  streamType: 'main',
  userId: 'remote-user-id',
});

11. End the room

await tcic.end()

Create a white board instance.

const teduBoard = SDK.createTiw(tcic, 'your-white-board-container-dom-id').instance;

// set up event listeners.
teduBoard.on(TEduBoard.EVENT.TEB_ERROR, (errorCode, errorMessage) => {
  console.log('======================:  ', 'TEB_ERROR', ' errorCode:', errorCode, ' errorMessage:', errorMessage);
});

teduBoard.on(TEduBoard.EVENT.TEB_WARNING, (warnCode, warnMessage) => {
   console.log('======================:  ', 'TEB_WARNING', ' warnCode:', warnCode, ' warnMessage:', warnMessage);
});

teduBoard.on(TEduBoard.EVENT.TEB_HISTROYDATA_SYNCCOMPLETED, () => {
   console.log('======================:  ', 'TEB_HISTROYDATA_SYNCCOMPLETED');
});

Synchronize whiteboard operations to remote users by tim.

// Monitor operations of local whiteboard and sync the operation to the remote user's whiteboard use the tim instance
teduBoard.on(TEduBoard.EVENT.TEB_SYNCDATA, data => {
  tim.sendRoomCustomMsg({
    data: JSON.stringify(data),
    extension: 'TXWhiteBoardExt'
  }).then(() => {
    // sync sucess.
  }, () => {
    // sync failed.
  });
});

On the remote side:

tim.on('customMsg', (data, msg)=>{
  if (msg.data?.content?.extension === 'TXWhiteBoardExt') {
    if (msg.from != tcic.userId) { // filter out messages sent by yourself.
      teduBoard.addSyncData(data);
    }
  }
});

...

for more reference, see: https://doc.qcloudtiw.com/web/official/tutorial-tutorial-2-1.html

API reference

https://docs.qcloudclass.com/latest/tcic_engine/modules.html

RoadMap

The SDK is still under rapid iterative development stage. The subsequent new version will release a signal-based data flow SDK, which will further simplify the usage and add more enhanced and rich capabilities, so stay tuned.

中文版:

实时互动-教育版无UISDK概述

实时互动-教育版（原低代码互动课堂，LCIC）是一款集成音视频连麦、互动白板和直播等多功能的产品. (https://cloud.tencent.com/document/product/1639)

本项目是客户端js SDK (demo), 您可以基于SDK开发定制您自己的实时互动应用

核心概念

房间: 房间代表一场是全局唯一的实时互动发生的时空场所,用房间ID标识, 您可以通过云api接口(https://cloud.tencent.com/document/product/1639/80942) 创建房间, 然后调用SDK的方法加入房间并开始在房间发布音视频流

功能

SDK主要包含以下模块：

• TCIC：包装原教育版房间/房主/观众等概念，支持这些对象的基本操作。
• TIM：支持房间内实时数据通讯，例如聊天，全员消息等功能，可实现如全员抢答，公告，礼物下发等各种业务模式。
• TRTC：实时视频通话功能包装，可实现如连麦通话等功能。

快速开始

1. 安装SDK依赖

npm

npm install --save @tcic/core-sdk-v1

yarn

yarn add @tcic/core-sdk-v1

2. 引入依赖

import * as SDK from '@tcic/core-sdk-v1';

3. 初始化实例并加入房间

const tcic = SDK.create({
  userId: 'xxx';  //
  token: 'token_of_the_userid';
  classId: 345678; // got from cloud api
  groupLiveCode: "", // 学员分组码，仅对学生端有效，传入后会对学员进行分组管理，通过云 apiDescribeGroupLiveCodes获取。
});

const trtcClient = SDK.createTrtcClient(tcic);

4. 加入课堂并创建tim实例

await tcic.init();

const tim = SDK.createTimClient(tcic);

5. 本地预览

trtcClient.localPreview({
  view: 'dom-id',
});

6. 开始房间并加入trtc, 本地预览将会自动发布至房间

await tcic.start();
await trtcClient.enterRoom();

7. 暂停音视频

trtcClient.pausePublish({
  target: ['video', 'audio'],
});

8. 恢复音视频

trtcClient.resumePublish({
  target: ['video', 'audio'],
});

9. 分页拉取成员列表

tcic.getMembersDetail(classId, {
  page: 1,
  limit: 100,
});

10. 自动播放成员音视频, 若学生未加入, 待学生加入后会自动播放

trtcClient.startRemote({
  view: `dom-id`,
  streamType: 'main',
  userId: 'remote-user-id',
});

11. 结束房间

await tcic.end()

API 参考

https://docs.qcloudclass.com/latest/tcic_engine/modules.html

RoadMap

SDK仍处在快速迭代开发中, 后续新版本将会发布基于signal的数据流SDK, 会进一步简化使用流程, 并加入更多增强丰富的能力,敬请期待.