tencent cloud

Feedback

Web and H5

Last updated: 2024-08-27 16:49:24
    This document mainly describes how to quickly integrate Tencent Cloud LCIC Web/HTML5 Application into your project

    Prerequisites

    2. The desktop or mobile browser you are using can support audio and video services. You can refer to FAQs About Web for detailed requirement.

    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), then click Create.
    
    
    
    Note:
    Application names may only contain underscores, digits, or alphanumeric characters in both English and Chinese.
    Tags serve to identify and organize the various resources you possess within Tencent Cloud. For instance, a corporation with several business divisions might have one or more LCIC applications per division. In such cases, the corporation could assign tags to the LCIC applications to denote departmental information. Tags are not mandatory; you may add or edit them based on your actual business requirements.

    Step 2: Access SDKAppId and Key (SecretKey)

    1. Navigate to Application Management> Settings to access SDKAppId.
    2. Enter the Cloud Access Management 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: Access 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. Through 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 access 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, only needed when defining UI. See Custom UI Integration for more 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 this parameter for the release stage.
    6. lng, location, layout are also optional parameters. Businesses can determine whether they need to be entered. If not, they will use the default value. 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
    Obtained through the RegisterUser interface
    Yes
    
    classid
    string
    Classroom ID
    Access is obtained by creating a return via the CreateRoom interface
    Yes
    
    token
    string
    Backend authentication parameters
    Obtained through the LoginUser API
    Yes
    
    version
    string
    Version number of the classroom
    Select the corresponding version by releasing logs. Note: For the interactive classroom client version, we recommend using 'latest'
    Yes
    
    scene
    string
    Scenario name
    Used to distinguish different custom layouts, configure via the SetAppCustomContent interface, default is default
    No
    
    debugjs
    string
    JS link of the custom defined UI
    Access through the custom defined UI integration
    No
    
    debugcss
    string
    CSS link of the custom defined UI
    Access through the custom defined UI integration
    No
    
    role
    string
    Role for entering the classroom, default is empty
    Optional parameter supervisor (patrolling/content review), only registered users in the application have the authority
    No
    
    lng
    string
    Language parameter, default is zh-CN
    Currently supported are zh-CN, en-US
    No
    
    location
    boolean
    Whether to report geographical location information
    Default false, no reporting
    No
    
    layout
    string
    Page layout
    Default is top layout (top), currently only effective for video document pattern, support for double row layout (double), right layout (right), left layout (left), three-part layout (three)
    No
    
    boardColor
    string
    Whiteboard color
    Whiteboard color setting, default is: #182E25, supports Hex format, also supports rgba(0, 0, 0, .3) setting
    No
    
    back_url
    string
    Exit Classroom Callback Address
    Default is empty. It's 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 Feature

    Connect the recently accessed parameters to form the URL for user entry into the classroom according to the following standard. You can achieve web integration by jumping to this URL link.
    The specific link is as follow:
    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, then 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 custom define the layout and style during business, and 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=http://localhost:443/demo/dist/myLib.umd.min.js&debugcss=http://localhost:443/demo/dist/myLib.css
    When your custom JS and CSS have been debugged, you can use the SetAppCustomContentAPI or the Low-code Interative Classroom > Application Management > Settings > Scenes to bind the scene, and the links to the custom JS and CSS (You cannot use an address with a port, otherwise it will be blocked). When entering 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, the business side can switch scenes according to this parameter, 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 the business side wishes to hide the classroom domain and only display the business domain, you can create a new business domain through the CDN (CDN) Console and backsource to the classroom domain. For the detailed process, please refer to Custom Business Domain.

    Other Related Documents

    LCIC API
    Contact Us

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

    Technical Support

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

    7x24 Phone Support