Configure and run the web client

Prerequisites

The open source Appserver service is deployed and running. For more information, see Server-side Configuration and Operation.

Project framework

This project is developed based on the UmiJS framework. The technology stack is React and TypeScript. For more information, see UmiJS official documentation.

Deploy and run the project

// Install npm packages. This may be slow.
npm install
// If you have a tool such as cnpm, pnpm, or tnpm installed, run one of the following commands instead:
cnpm install
pnpm install
tnpm install

// After the installation is complete, run the dev command. Then, follow the on-screen prompt to access the application in your browser.
npm run dev

npm run build

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist;  # The output directory for the built static files.
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location = /api/ {
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Forwarded-Port $server_port;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_set_header  Host  $host;
          proxy_pass  http://***:****/; # The address and port of the deployed AppServer.
        }
}

nginx -s reload

Features

This project primarily implements the classroom page and a supporting logon page for the demo experience. The index.tsx and classroom.tsx files in the src/pages folder are the entry files for the logon and classroom pages. The corresponding core feature logic is located in the Login and ClassRoom folders under src/components.

This project can be applied to the teacher client, teaching assistant client, and student client. The teacher client and teaching assistant client must be used on a PC, and the student client can be used on a PC or mobile device.

Teacher Side

We recommend that you access the pages of this project using a browser on a PC that runs Windows or macOS.

Logon page

• Class Role: Teacher.

• Class Type:

  • Open Class: Students can watch videos and chat with others on the student client.

  • Big Class: Teachers and teaching assistants can co-stream with others. Students can co-stream with others, watch videos, and chat with others on the student client.

• Classroom No.:

  • Optional if you log on as a teacher. You can enter the number of an existing classroom. If you leave this parameter empty, a new classroom is created.

• Username: required.

• Teaching Assistant: specifies whether to enable the teaching assistant feature. You can also grant permissions to a teaching assistant.

Classroom page

• Start and end the class.

• Device selection and switching

• Write content on the whiteboard and share documents.

• Share the screen.

• Play multimedia content. Only videos are supported.

• Edit announcements.

• Interactive messages

  • Mute or unmute all members.

  • Mute or unmute a single person.

  • Delete group messages.

• Member management

  • View members in the classroom and their status (In Classroom, Left, Removed, or Co-streaming).

  • Remove students from the classroom.

• Co-streaming and management (supported only in big classes)

  • Global settings

    • Allow or prohibit co-streaming.

    • Mute all (turn off the microphones of all students).

  • Co-streaming operations

    • Invite a student to co-stream or cancel the invitation.

    • Approve or reject a student's request to co-stream.

    • Turn a student's camera or microphone on or off.

    • End co-streaming.

Teaching assistant client

We recommend that you access the pages of this project using a browser on a PC that runs Windows or macOS.

Logon page

• Class Role: Teaching Assistant.

• Class Type:

  • Open Class: Students can watch videos and chat with others on the student client.

  • Big Class: Teachers and teaching assistants can co-stream with others. Students can co-stream with others, watch videos, and chat with others on the student client.

• Classroom No.: required. Enter the number of an existing classroom.

• Username: required.

Classroom

You can use the following features based on the granted permissions:

• Manage courses.

  • Edit announcements.

  • Manage members: You can remove students from the classroom.

• Tutorial

  Page the courseware and whiteboard.

• Interactive Messages

  • Delete group messages.

  • Mute or unmute all members.

  • Mute or unmute a single person.

Student client

We recommend that you access the pages of this project using a browser on a PC that runs Windows or macOS or a browser on an Android or iOS device.

Logon page

• Class Role: Student.

• Class Type:

  • Open Class: Students can watch videos and chat with others on the student client.

  • Big Class: Teachers and teaching assistants can co-stream with others. Students can co-stream with others, watch videos, and chat with others on the student client.

• Classroom No.:

  • Required if you log on as a student. Enter the number of an existing classroom.

• Username: required.

Classroom page

The UI of the class varies based on the class type.

• Open class

  • The live class: displays the image from the camera of the teacher client and one of the whiteboard, the shared screen, and the played multimedia content.

  • The chatroom.

  • The overview of the class.

• Big class

  • The live class:

    • Display in one or two sections

      • Display in two sections: displays the image from the camera of the teacher client in a section and one of the whiteboard, the shared screen, and the played multimedia content in the other section. This mode is preferentially used. The client pulls streams using Real-Time Streaming (RTS) 1.0 based on Web Real-Time Communications (WebRTC) to ensure a low latency between streams.

      • Display in one section: displays the image from the camera of the teacher client and one of the whiteboard, the shared screen, and the played multimedia content in one section if the browser does not support WebRTC or stream pulling over RTS fails and a degraded protocol is used.

    • Mute/Unmute

      • Students who are co-streaming with others: Students can co-stream only on a PC over WebRTC.

        • Main screen: displays the whiteboard, the shared screen, or the played multimedia content.

        • Lecturer in the upper-right corner of the screen: displays the image from the camera of the teacher client.

        • Speaker: displays the image from the camera of the student client.

      • Students who do not co-stream:

        • The whiteboard, the shared screen, or the played multimedia content.

        • The mixed video stream combines the camera feeds from all on-stage participants.

  • The co-streaming feature.

    • Apply for co-streaming or cancel the application.

    • Accept or reject the teacher's co-streaming invitation.

    • Turn devices on or off and select devices.

  • The chatroom.

  • The overview of the class.

  • Classroom announcements.

Implementation by the user

This project focuses on the development of the interactive class module. You must configure other related modules as needed before you use this project to provide services for users.

Logon

The code of the logon module in this project is provided as sample code. The AppServer provides the logon operation that can be used to send the username and password in plaintext to obtain an identity token. This part of logic can be used only for local development and experience, and cannot be used in the production environment. To implement the logon feature, use a solution such as single sign-on (SSO) or OAuth 2.0.

When you enter the classroom page in this project, the system first checks if you are logged on. If you are not, you are redirected to the logon page. This logic is located in src/wrappers/auth/index.tsx. You can modify it as needed.

Class management

This project does not include the classroom management module. If you require more advanced classroom management features, such as:

• For example, you can display the information about historical classes, such as the time period that a student spends in classes, the time period that a student spends in co-streaming, and the number of times that a student gives a speech.

• You can also manage historical classes, such as restarting or disabling classes, or exporting the data of classes.

To use these capabilities, you must implement your own business logic.

Member management

This project implements features such as viewing a member list, removing members, muting members (individually or as a group), and deleting group messages. If you need more advanced member management features, you must implement the related business logic.

Co-streaming management

This project uses a state machine pattern and Instant Messaging (IM) communication to implement simple co-streaming management by exchanging co-streaming signaling between the teacher and student clients. For example:

• Teachers invite students for co-streaming or cancel the invitation.

• Students apply for co-streaming or cancel the application.

• Teachers or students end co-streaming.

• Teachers manage the devices of students.

• Teachers enable or disable the co-streaming feature.

To obtain more advanced and customized co-hosting management features, you must implement your own services.

Teaching Assistant permissions

This project uses the state machine pattern and IM to enable the collaboration and communication between teachers and teaching assistants, such as the update of courseware and the management of interactive messages. If you want to use more features, develop the teaching assistant management module as needed.

Live stream mixing

The content of live streams varies based on the class type.

Open class

The StreamName suffix is ${teacherId}_camera: Primary and secondary screen stream mixing. This is a combined stream of the teacher's camera feed and the whiteboard, local video playback, or screen sharing stream.

Big class

• The StreamName suffix is ${teacherId}_camera: The teacher's camera stream, a single stream.

• The StreamName suffix is ${teacherId}_shareScreen: The teacher's whiteboard, local video playback, or screen sharing stream, a single stream.

• The StreamName suffix is ${teacherId}_shadow_camera:

  • If no co-streaming is performed, the default image is displayed.

  • Co-hosting: Mixing the camera streams from members.

• The StreamName suffix is ${teacherId}_shadow_shareScreen: Primary and secondary screen stream mixing. This is a combined stream of the teacher's camera feed and the whiteboard, local video playback, or screen sharing stream.

Recording and Playback

This project does not support live stream recording for classes. If you want to use related features, perform the following operations.

Create a recording template

First, configure a recording template for the live streaming domain that is specified by the live_stream.pull_url parameter in the AppServer. For more information, see Console Configuration. Note the following two template parameters:

• AppName: The default value is live.

• StreamName: Because the classroom live stream StreamName changes each time a class starts, we recommend that you set this to * (wildcard character).

View recording files

Log on to the ApsaraVideo Live console. In the navigation pane on the left, choose Streaming Management > Recordings. On the Recording Management page, view recording files. Search for recording files based on the ingest domain or the application name.

Obtain the URL of a recording file

• Call an API

  1. Call the ApsaraVideo VOD OpenAPI operation SearchMedia and pass title = {streamName} to search for video-on-demand files. For more information, see Search for media information.

  2. Call the GetPlayInfo operation of ApsaraVideo VOD to obtain the playback URL. For more information, see Obtain audio and video playback URLs.

• Configure recording callback. For more information, see Live to VOD.

Play recording files

For more information about how to use Aliplayer for video-on-demand playback, see Video-on-demand playback.

Dependent services and third-party packages

This project uses multiple third-party packages and services through npm packages and frontend imports in plugin.ts. The key dependencies are described below.

VConsole

The plugin.ts file imports the VConsole SDK for testing on mobile devices. This feature is disabled by default. To enable it, add the vconsole=1 parameter to the URL.

ApsaraVideo Player

The AliPlayer SDK is imported in plugin.ts to play live streams in a live channel. For more information, see Web Player.

Multiple IM SDKs

This project imports imp-interaction in the plugin.ts file and the third-party package @rongcloud/imlib-next/@rongcloud/engine in the package.json file. The two IM SDKs enable the following features: signaling, group messaging, and group management. The concurrent messaging using multiple channels increases the stability of messaging and decreases the latency of messaging. You can enable the corresponding features and channels in the plugin.ts file, and specify the primary channel as needed.

The token operation that is provided by the AppServer returns the token that is required for verification for each channel.

alivc-live-push

alivc-live-push.js is imported in the plugin.ts file for stream ingest. For more information, see Integrate the co-streaming SDK for Web.

Whiteboard

The files in the public/script directory are the CommsEase Interactive Whiteboard SDK. You must first activate the CommsEase Interactive Whiteboard service and implement the relevant interfaces in the AppServer.

axios

An open source npm package is used to call the API operations of the AppServer. For more information, visit GitHub.