tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Low-code Interactive Classroom
    Documentation
    Download PDF

    Web and H5

    Last updated: 2024-06-28 10:04:46
    Download PDF
      This document mainly describes how to quickly integrate Tencent Cloud LCIC Web/HTML5 Application into your project.

      Prerequisites

      1. You have completed the procedures for Sign up for a Tencent Cloud account and Identity Verification.
      2. The desktop or mobile browser you are using supports audio and video services. You can refer to FAQs About Web for detailed requirements.

      Step 1: Create New Application

      1. Log in to the Low-code Interative Classroom, and select Quick Start from the left navigation bar.
      2. By default, you enter the "Create application" interface, where you can select "Create new application" for the application type. Enter the application name, such as TestLCIC.
      If you have already created an application, you can click "Select an existing application" for the application type.
      Note:
      Each account can get a trial version application for free. If you need to create a commercial version, you can choose and purchase the corresponding version based on your business needs on the Purchase Page.
      3. Add or edit Tag (optional), and then click Create.
      
      Note:
      Application names may only contain underscores, digits, or alphanumeric characters in both English and Chinese.
      Tags are used to identify and organize your resources in Tencent Cloud. For instance, a corporation with several business units, each of which has one or more LCIC applications, can use tags to label departmental information on LCIC applications. Tags are optional, and you can add or edit them based on your actual business needs.

      Step 2: Enter SDKAppId and Key (SecretKey)

      1. Choose Application Management> Settings to obtain the SDKAppId.
      2. Enter Cloud Access Management to obtain the key. If there is no key, you need to create a new one in API Key Management. For details, refer to Key Management.
      

      Step 3: Obtain Parameters Required to Enter the Classroom

      1. By calling the TencentCloud API interface RegisterUser to register a user, you can obtain the corresponding user ID (userid) information.
      2. By calling the TencentCloud API interface LoginUser to log in, you can obtain the user authentication token information.
      3. By using the Application Programming Interface CreateRoom to create a classroom, you can obtain the Classroom ID (classid) information.
      4. Specify the version of the classroom you need to integrate: latest.
      5. The scene, debugjs, and debugcss are optional parameters, which are only needed when defining the UI. See Custom UI Integration for details. debugjs and debugcss are used only for the debugging of customized layouts and components, and only accessed via localhost or 127.0.0.1. Do not use these parameters in the release stage.
      6. lng, location, and layout are also optional parameters. You can determine whether to enter these parameters based on actual business needs. If not, they will use the default values. The layout parameter is only effective when the classroom layout is set to video plus document layout (videodoc).
      Field
      Type
      Meaning
      Remarks
      Mandatory
      
      userid
      String
      Username
      It is obtained through the RegisterUser interface.
      Yes
      
      classid
      String
      Classroom ID
      It is obtained through the return of creating the CreateRoom interface.
      Yes
      
      token
      String
      Backend authentication parameters
      It is obtained through the LoginUser interface.
      Yes
      
      version
      String
      Version number of the classroom
      The corresponding version can be selected from the release logs. Note: For the interactive classroom client version, 'latest' is recommended.
      Yes
      
      scene
      String
      Scene name
      It is used to distinguish different custom layouts. It is configured through the SetAppCustomContent interface, and set to default by default.
      No
      
      debugjs
      String
      JS link of the custom defined UI
      It is obtained through the custom defined UI integration.
      No
      
      debugcss
      String
      CSS link of the custom defined UI
      It is obtained through the custom defined UI integration.
      No
      
      role
      String
      Role for entering the classroom, which is empty by default
      Optional parameter supervisor (patrolling/content review). Only registered users in the application have the authority.
      No
      
      lng
      String
      Language parameter, which is zh-CN by default
      Currently zh-CN and en-US are supported.
      No
      
      location
      Boolean
      Whether to report geographical location information
      It is set to false by default, indicating no reporting.
      No
      
      layout
      String
      Page layout
      It is set to top layout (top) by default. Currently, this parameter is only effective for video document pattern. It supports double row layout (double), right layout (right), left layout (left), and three-part layout (three)
      No
      
      boardColor
      String
      Whiteboard color
      It is used to set the whiteboard color. It is set to #182E25 by default. It supports Hex format and rgba(0, 0, 0, .3) setting.
      No
      
      back_url
      String
      Exit Classroom Callback Address
      It is empty by default. It is the page address that needs to be bounced back when clicking return or exiting the classroom. The parameter needs to be encoded using encodeURIComponent
      No
      

      Step 4: Enter the Classroom

      Standard Features

      Connect the recently obtained parameters to form the URL for accessing the classroom according to the following standard. You can achieve web integration after being redirected to this URL.
      The specific link is as follows:
      https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569
      Note:
      If the userid in the appended URL matches the teacher's ID ( teacherid) specified in the create classroom, the current user is a teacher. If it matches the current classroom's assistant's ID (assistantid), the user is an assistant. Otherwise, the user is a student.

      Advanced Features

      Custom UI Integration

      LCIC Web/H5 also provides an integration solution for customizing the UI. Users can customize the layout and style on the business side. By customizing the interface, you can access the JS and CSS links on the business side. You can add the parameters debugjs and debugcss to the link above (these parameters are only used for debugging) as shown below:
      https://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&debugjs=%!s(<nil>)&debugcss=%!s(<nil>)
      When your custom JS and CSS have been debugged, you can use the SetAppCustomContentAPI or the Low-code Interactive Classroom > ApplicationManagement > Settings > Scenes to bind the scene, and the links to the custom JS and CSS. When accessing the classroom, append the scene parameter to the URL to load the layout and components of the corresponding scene. When dealing with various types of classes and various layouts, you can switch scenes with this parameter on the business side, as shown below:
      http://class.qcloudclass.com/latest/class.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&scene=default

      Custom Business Domain

      On the course page, if you need to hide the classroom domain and only display the business domain on the business side, you can create a new business domain through the CDN (CDN) Console and backsource to the classroom domain. For the detailed process, refer to Custom Business Domain.

      Other Related Documents

      LCIC API
      Customize Interface
      Web related problems
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy