tencent cloud

Feedback

Windows & macOS

Last updated: 2023-09-05 11:11:24
    The LCIC Electron SDK allows you to build a cross-platform desktop application that can be run on both Windows and macOS. This document shows you how to integrate the SDK into your project.

    Prerequisites

    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

    We offer two integration methods.

    Method 1: Splicing the URL

    You can integrate the LCIC Electron SDK into a webpage and launch your application from the browser.
    1. Download and install the demo application:
    macOS
    2. You need to first direct users to a transit page before they can enter the class. Use the parameters obtained in the previous step to generate the URL of this page, which is in the format of tcic://class.qcloudclass.com/${version}/class.html?classid=${classId}&userid=${userId}&token=${token}. When a user opens this page, your application will be launched from this page.
    
    
    
    Download ElectronProtocolCheck.js and import it into your project. The sample code in the staging page is as follows:
    
      // ElectronProtocolCheck See the github example for the file code
    import ElectronProtocolCheck from './ElectronProtocolCheck';
    // The id that needs to enter the class
      const classId  = 368507569;
    // The id of the user currently entering the classroom
      const userId = "JIUzI1NiIsIn123456";
    // token It needs to be dynamically obtained from the background interface to prevent the login state from expiring and failing
      const token =  'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII';
      const version = 1.8.0; // See the release log for the specific version number
      const url = `tcic://class.qcloudclass.com/${version}/class.html?classid=${classId}&userid=${userId}&token=${token}`;
      console.log(`callClient->start: ${url}`);
    // Evoke the client
      ElectronProtocolCheck(
        url,
        successCallBack: (res) => {
          // call for success
          console.log('callClient->success! ');
        },
        failCallBack: (res) => {
    console.log('callClient->failed! ');
          // Did not call out, it is recommended to implement a pop-up window prompting download here
    
          // If the user clicks Download --> Reload window information, open the client.
    
          // If the user cancels the download or closes the popup. In the class where users try to experience the web/H5 version
          // You can also add a timeout pop-up window. Generally, if the user does not make a click operation within 2500ms, a modal click box can appear
        },
        unsupportedCallBack: () {
            // If the browser does not support it, you can use the web link to load
        });
    We provide you with a complete demo, click LCIC-Electron-Demo to view .
    Note:
    In the concatenated URL, if the passed-in userid is the same as the teacherid specified for the current classroom, then the current user is the teacher. If it is the same as the assistantid for the current classroom, then the user is an assistant. Otherwise, the user is a student.

    Method 2: Integrating the SDK into your project

    1. Make sure you use the following framework versions.
    Framework
    Version
    Electron
    10.4.3+
    Node
    10.14.1+
    Python
    2.7.x
    
    2. Use the following npm command to install the SDK package in your project:
    npm install tcic-electron-sdk@1.8.7
    Note:
    The latest version of TCIC Electron SDK can be viewed in tcic-electron-sdk.
    3. Import the module in your project script and call the initialization API (passing in the parameters obtained in the previous step) to launch the class page.
    const TCIC = require('tcic-electron-sdk')
    
    TCIC.initialize({
      classId: '368507569',
      userId: '123456',
      token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
      version: '1.8.0'
    })

    Advanced Features

    Integration Service

    If you want to quickly integrate LCIC into your existing business while retaining your logo and application name, you can use our integration service.
    
    
    
    1. Process your business logic
    After integration, you can use joinClass of the window global variable to enter a class. If you have already implemented the class entry logic for your project using either of the two integration methods mentioned above, the following code sample shows you how to process your business logic to make your project compatible.
    
    const options = {
      classId: '368507569',
      userId: '123456',
      token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
      version: '1.8.0'
    };
    // Method for clicking to enter a class
    window.joinClass(options);
    
    // The following shows how to make your existing logic compatible.
    
    // Determine whether the method exists
    if (window.joinClass) {
    window.joinClass(options);
    } else {
    // Existing class entering logic
    }
    Use closeWin of the window global variable to close the client.
    window.closeWin();
    2. Provide the necessary information:
    Field
    Description
    Required
    AppName
    Your application name.
    Yes
    Logo
    Your application logo. Please provide a 256 x 256 image in ICO/PNG format.
    Yes
    URL
    Your URL.
    Yes
    Note:
    The URL you provide should be a complete URL that is capable of monitoring the login state and can direct to the login page if a user is not logged in. If you use the login page instead, users will have to log in every time they open the page.
    3. Email us in the following format and include the information in the attachment. If the correct information is provided, we will complete the integration for you within one business day.
    Note:
    Subject
    SDK Integration Service
    Content
    Company name: XXX
    Your name:
    Contact:
    The necessary information (attachment)

    Advanced Features - Custom UI

    We also offer an integration solution that allows you to customize your own UI. Use the custom UI component to obtain the JavaScript and CSS links and add the debugjs and debugcss (for debugging only) parameters to the above URL.
    // If you splice the URL
    const url = `tcic://class.qcloudclass.com/${version}/class.html?classid=${classId}&userid=${userId}&token=${token}debugjs=%!s(<nil>)&debugcss=%!s(<nil>)`;
    
    // If you integrate the SDK into your project
    TCIC.initialize({
      classId: '368507569',
      userId: '123456',
      token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
      version: '1.7.2',
    debugjs: '%!s(<nil>)',
    debugcss: '%!s(<nil>)',
    })
    
    // If you use our integration service
    const options = {
      classId: '368507569',
      userId: '123456',
      token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODAwNzQwMjEsImlhdCI6MTY3OTQ2OTIyMSwiaXNzIjoibFpNQ2tvTjNkSGlnVmhhcXJkdFc0cU9JYWpleVh2RWwiLCJzY2hvb2xfaWQiOjM5MjMxOTMsInVzZXJfaWQiOiIyTG9XREU2aHhzOUNCNVhCczZHT1BnVXpweUgifQ.2wzh6eUC4llbbGhchGDOYbDrsdSdymfP3zjLLPjnOII',
      version: '1.8.0',
    debugjs: '%!s(<nil>)',
    debugcss: '%!s(<nil>)',
    };
    window.joinClass(options);
    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 or pass in the parameter to load the layout of the corresponding scene. This is useful if you have different types of classes with different layout designs.

    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.

    Related documents

    LCIC APIs
    
    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