tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Low-code Interactive Classroom
    Documentation

    Web

    Last updated: 2023-09-05 11:01:57
      This document shows you how to quickly integrate the LCIC web SDK into your project.

      Prerequisites

      1. You have registered a Tencent Cloud account and completed identity verification.
      2. Your desktop or mobile browser should be able to support audio and video services. For detailed requirements, please refer to the common issues on the web end.

      Step 1. Create an Application

      1. Log in to the LCIC console and select Quick Start on the left sidebar.
      2. Select New and enter an application name such as TestLCIC. If you have already created an application, select Existing.
      Note:
      Each account can create a trial application for free. If there is no trial application under the current account, you can directly create a trial application for experience. If you need to create a commercial application, you can create a corresponding version of the application on the purchase page according to your business needs.
      3. Add or edit tags for the application and click Next.
      
      Note:
      The application name can only contain letters, Chinese characters, numbers, and underscores.
      Tags are used to mark and sort your Tencent Cloud resources. For example, your company may have multiple business units, each using one or more LCIC applications. You can tag the applications with the information of the corresponding business units. Tags are optional. You can add and edit tags for your applications as needed.

      Step 2. Get the SDKAppID and Key

      1. Click Application Management > Settings to view the SDKAppID.
      2. Go to the Cloud Access Management (CAM) console to view the access key. If there isn't a key, create one. For details, see "Root Account Access Key Management".
      

      Step 3. Get the Parameters Required to Enter a Room

      1. Call the TencentCloud API RegisterUser to register a user. The user ID (userid) will be returned.
      2. Call the TencentCloud API LoginUser to log in. The authentication token will be returned.
      3. Call the TencentCloud API CreateRoom to create a class. The class ID (classid) will be returned.
      4. Specify the SDK version. Unless you have special requirements, we recommend you use the latest version.
      5. scene, debugjs, and debugcss are optional parameters. Set them only if you need to customize your own UI. debugjs and debugcss are used for custom layout debugging and can only be accessed via localhost or 127.0.0.1. Do not use them in a production environment.
      6. lng, location, and layout are also optional parameters. If you don't specify them, the default values will be used. layout is valid only if the room subtype is "Document + Video" (videodoc).
      Field
      Type
      Description
      Remarks
      Required
      
      userid
      string
      The user ID.
      Returned by the RegisterUser API.
      Yes
      classid
      string
      The class ID.
      Returned by the CreateRoom API.
      Yes
      
      token
      string
      The backend authentication token.
      Returned by the LoginUser API.
      Yes
      version
      string
      The SDK version.
      Refer to the release notes to determine which version you want to integrate.
      Yes
      scene
      string
      The scene name.
      A scene represents a custom layout. You can configure a scene using the SetAppCustomContent API.
      No
      debugjs
      string
      The JavaScript link of the custom UI.
      See "Custom UI" below.
      No
      debugcss
      string
      The CSS link of the custom UI.
      See "Custom UI" below.
      No
      lng
      string
      The language, which is zh-CN by default.
      Valid values: zh-CN, en-US.
      No
      location
      boolean
      Whether to report the geographic coordinates (latitude and longitude).
      The default value is false, which means the geographic coordinates will not be reported.
      No
      
      layout
      string
      The layout.
      Valid values: top, double, right, left, three.
      No
      

      Step 4. Enter the Class

      Splicing the URL

      Use the parameters obtained in the previous step to splice the URL of the class webpage, in the following format: https://class.qcloudclass.com/${version}/index.html?userid=${userid}&token=${token}&classid=${classid}
      After the parameters are specified, the URL will look like this:
      https://class.qcloudclass.com/1.8.0/index.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569
      Note:
      If userid is the same as teacherid, the user will enter the class as the teacher. If userid is the same as assistantid, the user will enter the class as a teaching assistant. In other cases, the user will enter as a student.

      Advanced Features

      Custom UI Integration

      The LCIC web SDK allows you to customize your own UI. Just use our custom UI component to get the JavaScript and CSS links and add the debugjs and debugcss parameters (for debugging only) to the above URL.
      https://class.qcloudclass.com/1.8.0/index.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&debugjs=%!s(<nil>)&debugcss=%!s(<nil>)
      After debugging, call the TencentCloud API SetAppCustomContent or go to Application Management > Scene Configuration of the LCIC console to bind the JavaScript and CSS links to a scene. Then, when you enter the class, add the scene parameter to the URL to load the layout of the corresponding scene. This is useful if you have different types of classes with different layout designs.
      http://class.qcloudclass.com/1.8.0/index.html?userid=12345&token=yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII&classid=368507569&scene=default

      Advanced Features - Custom Domain

      If you want to display your own domain and hide the actual domain of your classes, add your domain in the CDN console and configure it as an origin server domain.
      When in the classroom page, if the business side wants to hide the classroom domain and only display the business domain, it can create a new business domain through the Content Delivery Network Console (CDN) and source it back to the classroom domain. For detailed steps, please refer to the Custom Business Domain section.

      Related documents

      LCIC APIs
      FAQs - Web
      Frequently Asked Questions on the Web
      
      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