FcrUIScene SDK

Currently not supported for this platform.

Currently not supported for this platform.

This page introduces how to add Flexible Classroom into your app.

Understand the tech

The following figure shows the overall technical architecture of Flexible Classroom:

The source code of Flexible Classroom contains the following packages:

• agora-demo-app: The Agora Classroom SDK demo app, supports Web, H5, Electron and other platforms, supports online classroom, online invigilation function, and provides code samples for online classroom before, during, and after class.

• agora-plugin-gallery: An independent plug-in library for Agora Classroom SDK, which inherits the AgoraWidgetBase class and implements the AgoraWidgetLifecycle interface. It includes plug-ins such as interactive whiteboard, IM chat, answering machine, voting machine, and timer.

• fcr-ui-scene/: General education scene SDK

  • /src/uistores: UI Store directory. UI Store is responsible for providing business logic encapsulation for UI components.
  • /src/containers: UI functional components combined with UI Store to become UI business components.
  • /src/scenarios: UI scene. Scenarios are composed of multiple business components.
  • /src/extension: API package for communicating with Widget
  • /src/resources: Static resource files such as pictures and sounds
  • /src/utils: Common UI components

• fcr-ui-kit/: Common scene UI component library

  • /src/components: Common UI components
  • /src/utils: General hooks tool class

• agora-common-libs: General tool class library, including ThemeProvider, I18nProvider, and other global general tools

• agora-edu-core: Provides upstream API calls and downstream data structure encapsulation for education and proctoring scenarios in smart classrooms.

• agora-rte-sdk: Provides cross-end RTC adaptation capabilities as well as classroom event callbacks and data structure encapsulation.

Integration methods

You can use multiple methods to integrate Cloud Classroom into your web project. Depending on whether you need to customize the classroom UI, you can choose different integration methods:

• If you are satisfied with the default UI and do not want to change any of it, integrate the whole Cloud Classroom through npm or CDN.
• If you want to customize the classroom UI based on the default UI of Cloud Classroom, you need to integrate by downloading the source code on GitHub.

Use the default UI

If you are satisfied with the default UI of Cloud Classroom and do not want to change any of it, integrate through npm or CDN.

Through npm

1. To install the SDK, run the following command:

   npm install fcr-ui-scene agora-plugin-gallery

2. Import modules and plug-ins into the project's JavaScript code:

   import { FcrUIScene } from 'fcr-ui-scene'
   import {
     FcrChatroom,
     FcrBoardWidget,
     FcrPollingWidget,
     FcrStreamMediaPlayerWidget,
     FcrWebviewWidget,
     FcrCountdownWidget,
     FcrPopupQuizWidget
   } from 'agora-plugin-gallery/scene'

3. To launch a classroom, call FcrUIScene.launch.

   import { FcrUIScene } from 'fcr-ui-scene'
   import {
   FcrChatroom,
   FcrBoardWidget,
   FcrPollingWidget,
   FcrStreamMediaPlayerWidget,
   FcrWebviewWidget,
   FcrCountdownWidget,
   FcrPopupQuizWidget
   } from 'agora-plugin-gallery/scene'
   
   const unmount = FcrUIScene.launch(document.querySelector("#root"), {
   appId: "Your App ID",
   region: "NA",
   userUuid: "user id",
   userName: "user name",
   roomUuid: "room id",
   roomType: 10, // Room type: 10 for Cloud Class.
   roomName: "room name",
   pretest: true, // Whether to enable pre-class equipment detection
   token: "rtm token", // In a test environment, you can use temporary RTM Token; in a production or security environment, it is strongly recommended that you use a server-generated RTM Token.
   language: "zh",
   duration: 60 * 30, // Course time in seconds.
   recordUrl: "your record url",
   roleType: 1, // User roles: 1 is teacher, 2 is student
   widgets: {
   easemobIM: FcrChatroom, // IM widget
   netlessBoard: FcrBoardWidget, // Interactive whiteboard widget
   poll: FcrPollingWidget, // Voter widget
   mediaPlayer: FcrStreamMediaPlayerWidget, // Video sync player widget
   webView: FcrWebviewWidget, // Embedded browser widget
   countdownTimer: FcrCountdownWidget, // Countdown widget
   popupQuiz: FcrPopupQuizWidget, // Clicker widget
   },
   });

Through CDN

1. Add the following code to the HTML file in your project:

   <!-- <!-- Please replace X.Y.Z with the cloud classroom version number, such as 1.0.40.
   You can check the latest version number through the release notes or GitHub repository branch. -->
   <script src="https://download.agora.io/edu-apaas/release/scene_sdk@X.Y.Z.bundle.js"></script>
   <script src="https://download.agora.io/edu-apaas/release/scene_widget@X.Y.Z.bundle.js"></script>

2. To launch a classroom, call FcrUIScene.launch.

Sample code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Introduce SDK, 1.0.40 is the sample version number. You can check the latest version number through the release notes or GitHub repository branch. -->
    <script src="https://download.agora.io/edu-apaas/release/scene_sdk@1.0.40.bundle.js"></script>
    <!-- Introduce Widget, 1.0.40 is the sample version number. You can check the latest version number through the release notes or GitHub warehouse branch -->
    <script src="https://download.agora.io/edu-apaas/release/scene_widget@1.0.40.bundle.js"></script>
  </head>
  <body>
    <style>
      #root {
        width: 100%;
        height: 100%;
      }
    </style>
    <div id="root"></div>
    <script type="text/javascript">
    const virtualBackgroundImages = {
    // virtual background assets
      virtualBackground1: 'effect/default1.jpg',
      virtualBackground2: 'effect/default2.jpg',
      virtualBackground3: 'effect/default3.jpg',
      virtualBackground4: 'effect/default4.jpg',
      virtualBackground5: 'effect/default5.jpg',
      virtualBackground6: 'effect/default6.jpg',
      virtualBackground7: 'effect/default7.jpg',
      virtualBackground8: 'effect/default8.mp4',
      virtualBackground9: 'effect/default9.mp4',
    };

    const virtualBackgroundVideos = [
    virtualBackgroundImages.virtualBackground8,
    virtualBackgroundImages.virtualBackground9,
      ];
      // Start cloud classroom
      const unmount = FcrUIScene.launch(document.querySelector("#root"), {
        appId: "your appid",
        region: "NA",
        userUuid: "12345678",
        userName: "Teacher001",
        roomUuid: "room003",
        roomType: 10, // Room type: 10 for Cloud Class.
        roomName: "RoomName001",
        pretest: true, // Whether to enable pre-class equipment detection
        token: "your token", // In a test environment, you can use temporary RTM Token; in a production or security environment, it is strongly recommended that you use a server-generated RTM Token.
        language: "zh",
        duration: 60 * 60 *2, // Course time in seconds.
        recordUrl: "your record url",
        roleType: 1, // User roles: 1 is teacher, 2 is student
        widgets: {
          easemobIM: FcrChatroom, // IM widget
          netlessBoard: FcrBoardWidget, // Interactive whiteboard widget
          poll: FcrPollingWidget, // Voter widget
          mediaPlayer: FcrStreamMediaPlayerWidget, // Video sync player widget
          webView: FcrWebviewWidget, // Embedded browser widget
          countdownTimer: FcrCountdownWidget, // Countdown widget
          popupQuiz: FcrPopupQuizWidget, // Clicker widget
        },
        virtualBackgroundImages,
        virtualBackgroundVideos
      },
        () => {
          // success
        },
        (err) => {
          console.log(err)
          // failure
        },
        (type) => {
          //Destroy
          history.push(`/?reason=${type}`);
        },
);
    </script>
  </body>
</html>

The sample code requires passing in rtmToken. You can refer to Secure authentication with tokens to learn what a Signaling token is, how to get a temporary Signaling token for testing purposes, and how to generate a Signaling token from the server. The generated token passed in userId must be consistent with the userUuid parameters passed in the launch method; otherwise, the generated token will be invalid.

Customize the classroom UI

If you want to customize the classroom UI based on the default UI of Cloud Classroom, you need to integrate by downloading the source code on GitHub. Refer to the following steps:

1. Clone the Flexible-Classroom-Desktop repository:

   git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git

2. Checkout the latest release branch.

   1. Change directory to flexible-classroom-desktop

   2. Switch the branch, run the following commands:

      cd flexible-classroom-desktop
      git checkout release/2.9.0

3. Modify the code according to your needs. See FcrUIScene SDK customization guide for details.

4. Debug your code.

   After finishing the development, follow these steps to debug:

   1. To install dependencies, run the following command:

      yarn install:packages

   2. To run the project in development mode, use the following command:

      yarn dev:scene

5. After finishing the development, package the SDK JS file with the following command:

   1. To package the SDK code:

      yarn pack:scene:sdk

   2. To package the SDK plugins:

      yarn pack:scene:plugin

Currently not supported for this platform.