Real-Time Interactive Teaching (Electron)

Last updated: 2021-05-07 15:16:28

    Free Demo

    Demonstration

    You can download and install the demo we provide to try out TRTC’s real-time interactive teaching feature, which supports teaching modes such as audio, video, and screen sharing, as well as interactions such as Q&A, hand raising, inviting to speak, and ending Q&A.

    To quickly implement the real-time interactive teaching feature, you can modify the demo we provide and adapt it to your needs. You can also use the trtc-electron-education component to customize your own UI.

    Using the Demo UI

    Step 1. Create an application.

    1. Log in to the TRTC console and select Development Assistance > Demo Quick Run.
    2. Enter an application name, e.g. TestEduDemo, and click Create.

    Note:

    The real-time interactive teaching feature uses two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM will be activated automatically. IM is a value-added service. See Value-added Service Pricing for its billing details.

    Step 2. Download the SDK and demo source code.

    1. Download the SDK and demo source code for your platform.
    2. Click Next.

    Step 3. Configure demo project files.

    1. In the Modify Configuration step, select the platform in line with the source package downloaded.

    2. Find and open the TRTCEducation/app/debug/GenerateTestUserSig.js file.

    3. Set parameters in GenerateTestUserSig.js as follows:

      • SDKAPPID: 0 by default. Set it to the actual `SDKAppID`.
      • SECRETKEY: left empty by default. Set it to the actual key.
    4. Click Next to complete the creation.

    5. After compilation, click Return to Overview Page.

    Note:

    The method for generating UserSig described in this document involves configuring SECRETKEY in client code. In this method, SECRETKEY may be easily decompiled and reversed, and if your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for the local execution and debugging of the demo.
    The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to the business server for a dynamic UserSig. For more information, see How do I calculate UserSig on the server?.

    Step 4. Run the demo.

    // Install Yarn, which is used to manage the demo.
    npm install yarn -g
    // Install the required dependencies.
    yarn install
    // Develop and debug.
    yarn dev
    // Package.
    yarn package
    
    • You can package for macOS only on macOS and for Windows only on Windows.

    Step 5. Modify the demo source code.

    The following frameworks are used by the demo:

    • typescript
    • react & react hooks
    • electron & electron-react-boilerplate
    • element-ui

    The following table lists the files and the UI views they represent. You can refer it to when making UI changes.

    File Use
    app/containers/HomePage.tsx Implementation code for the classroom entry view
    app/containers/ClassRoomPage.tsx Implementation code for the classroom view
    app/components/TeacherClass.tsx Implementation code for teacher-end views
    app/components/StudentClass.tsx Implementation code for student-end views
    app/components/Chat.tsx Implementation code for the chat room view
    app/components/UserList.tsx Implementation code for the member list view

    Implementing A Custom UI

    If the UI in the demo does not meet your expectations, you can use the audio and video capabilities of the trtc-electron-education component we provide and customize your own UI.

    Step 1. Integrate the SDKs.

    // Import via Yarn
    yarn add trtc-electron-education
    // Import via npm
    npm i trtc-electron-education --save
    

    Step 2. Initialize the component.

    Initialize the component. The table below lists the required key parameters.

    Parameter Type Description
    sdkAppId number SDKAppID, which is required and can be viewed in the TRTC console
    userID string User ID, which is required and can be assigned by your account system
    userSig string User signature, which acts as a login password and is required. It is calculated based on user ID. For details, see UserSig.
    import TrtcElectronEducation from 'trtc-electron-education';
    const rtcClient = new TrtcElectronEducation({
       sdkAppId: 1400***803,
       userID: '123'
       userSig: 'eJwtzM9****-reWMQw_'
     });
    

    Step 3. Start a class as a teacher.

    1. Call the createRoom method of the component to create a classroom.
      const params = {
         classId, // Classroom ID
         nickName // Nickname
      }
      rtcClient.createRoom(params).then(() => {
       // Classroom created
      })
      
    2. Call the enterRoom method of the component to start a class.
      rtcClient.enterRoom({
         role: 'teacher', // Role
         classId // Classroom ID
      })
      
    3. Call the openCamera method of the component to turn on the local camera.
      const domEle = document.getElementById('test');
      rtcClient.openCamera(domEle)
      
    4. Share your screen, e.g., a PowerPoint or courseware.
      a. Call the getScreenShareList method of the component to get the window list.
      const screenList = rtcClient.getScreenShareList()
      
      b. Call the startScreenCapture method of the component to push screen sharing streams.
      rtcClient.startScreenCapture({
         type,// Capture source type
         sourceId,// Capture source ID, which is a window handle if a window is shared or a screen ID if the screen is shared
         sourceName // Capture source name, which is UTF-8-encoded
      })
      
    5. To ask students questions, call the startQuestionTime method of the component to start Q&A. After receiving the event notification, students can "raise hands" to request to answer the questions.
      rtcClient.startQuestionTime(classId) // `classId` is the classroom ID
      
    6. When students "raise hands", call the inviteToPlatform method of the component to invite a student to answer. The student’s mic will be turned on automatically.
      rtcClient.inviteToPlatform(userID) // `userID` of the invited student
      
    7. After the student finishes answering, call the finishAnswering method of the component to turn the student’s mic off.
      rtcClient.finishAnswering(userID)// `userID` of the student whose mic is to be turned off
      

    Step 4. Attend a class as a student.

    1. Call the enterRoom method of the component to enter a classroom.
      rtcClient.enterRoom({
         role: 'student', // Role
         classId // Classroom ID
      })
      
    2. After the teacher starts Q&A, call the raiseHand method of the component to request to answer.
      rtcClient.raiseHand()
      

    Step 5. Implement the chat room feature.

    The teacher and students can send text messages to each other in a chat room.

    const params = {
       classId: classId, // Classroom ID
       message: 'Hello' // Message content
    }
    rtcClient.sendTextMessage(params) // Send the message in the chat room