Electron

Last updated: 2021-08-27 15:57:25

    Use Cases

    TRTC supports four room entry modes. Video call (VideoCall) and audio call (VoiceCall) are the call modes, and interactive video live streaming (Live) and interactive audio live streaming (VoiceChatRoom) are the live streaming modes.
    The live streaming modes allow a maximum of 100,000 concurrent users in each room with smooth mic connection/disconnection. Co-anchoring latency is kept below 300 ms and watch latency below 1,000 ms. The live streaming modes are suitable for use cases such as low-latency interactive live streaming, interactive classrooms for up to 100,000 participants, video dating, online education, remote training, and super conferences.

    How It Works

    TRTC services use two types of server nodes: access servers and proxy servers.

    • Access server
      This type of nodes use high-quality lines and high-performance servers and are better suited to drive low-latency end-to-end calls, but the unit cost is relatively high.
    • Proxy server
      This type of servers use mediocre lines and average-performance servers and are better suited to power high-concurrency stream pulling and playback. The unit cost is relatively low.

    In the call modes, all users in a TRTC room are assigned to access servers and are in the role of “anchor”. This means the users can speak to each other at any point during the call (up to 50 users can send data at the same time). This makes the call modes suitable for use cases such as online conferencing, but the number of users in each room is capped at 300.

    Sample Code

    You can obtain the sample code used in this document at GitHub.

    Directions

    Step 1. Run the official SimpleDemo

    We recommend that you read Demo Quick Start > Electron first and follow the instructions to run the official SimpleDemo.

    • If you run SimpleDemo successfully, it means that you have mastered the method of installing Electron in your project.
    • If not, there may be a problem in the download or installation process. Try troubleshooting the problem by following the instructions in Electron's installation document.

    Step 2. Integrate trtc-electron-sdk into your project

    If you can run SimpleDemo successfully, then you know how to set up the Electron environment.

    • You can develop your project based on the demo we provide to get started quickly.
    • You can also run the following command to install trtc-electron-sdk in your project.
      npm install trtc-electron-sdk --save
      

    Step 3. Initialize an SDK instance and configure event callbacks

    Create a trtc-electron-sdk instance:

    import TRTCCloud from 'trtc-electron-sdk';
    let trtcCloud = new TRTCCloud();
    

    Listen for the onError event:

    // Error events must be listened for and captured, and error messages should be sent to users
    let onError = function(err) {
    console.error(err);
    }
    trtcCloud.on('onError',onError);
    

    Step 4. Assemble the room entry parameter TRTCParams

    When calling the enterRoom() API, you need to pass in a key parameter TRTCParams, which includes the following required fields:

    Parameter Field Type Description Example
    sdkAppId Number Application ID, which can be found in Application Management > Application Info in the console 1400000123
    userId String Only letters (a-z and A-Z), digits (0-9), underscores, and hyphens are allowed. test_user_001
    userSig String userSig is calculated based on userId. For the calculation method, see UserSig. eJyrVareCeYrSy1SslI...
    roomId Number String-type room IDs tend to slow down the room entry process and are therefore not supported by the SDK by default. If you need to use string-type room IDs, please submit a ticket. 29834
    import {
    ## TRTCParams
    ## TRTCRoleType
    } from "trtc-electron-sdk/liteav/trtc_define";

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = 29834;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAnchor; // Set the role to "anchor"
    Note:

    • In TRTC, users with the same userId cannot be in the same room at the same time as it will cause a conflict.
    • The value of appScene must be the same on each client. Inconsistent appScene may cause unexpected problems.

    Step 5. Enables camera preview and mic capturing

    1. Call startLocalPreview() to enable preview of the local camera. The SDK will ask for camera permission.
    2. Call setLocalViewFillMode() to set the display mode of the local video image.
      • TRTCVideoFillMode.TRTCVideoFillMode_Fill: aspect fill. The image may be scaled up and cropped, but there are no black bars.
      • TRTCVideoFillMode.TRTCVideoFillMode_Fit: aspect fit. The image may be scaled down to ensure that it’s displayed in its entirety, and there may be black bars.
    3. Call setVideoEncoderParam() to set the encoding parameters of the local video, which determine the quality of your video seen by other users in the room.
    4. Call startLocalAudio() to turn on the mic. The SDK will ask for mic permission.
    // Sample code: publish local audio/video streams
    trtcCloud.startLocalPreview(view);
    trtcCloud.startLocalAudio();
    trtcCloud.setLocalViewFillMode(TRTCVideoFillMode.TRTCVideoFillMode_Fill);

    // Set local video encoding parameters
    let encParam = new TRTCVideoEncParam();
    encParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
    encParam.resMode = TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape;
    encParam.videoFps = 25;
    encParam.videoBitrate = 600;
    encParam.enableAdjustRes = true;
    trtcCloud.setVideoEncoderParam(encParam);

    Step 6. Sets beauty filters

    1. Call setBeautyStyle(style, beauty, white, ruddiness) to enable filters.
    2. Parameter description:
      • style: style, which may be smooth or natural. The smooth style features more obvious skin smoothing effect and is suitable for entertainment scenarios.
        • TRTCBeautyStyle.TRTCBeautyStyleSmooth: smooth, which features more obvious skin smoothing effect and is suitable for shows
        • TRTCBeautyStyle.TRTCBeautyStyleNature: natural, which retains more facial details and is more natural
      • beauty: strength of the beauty filter; value range: 0-9; 0 indicates that the filter is disabled. The larger the value, the stronger the filter.
      • white: strength of the skin brightening filter; value range: 0-9; 0 indicates that the filter is disabled. The larger the value, the stronger the filter.
      • ruddiness: strength of the rosy complexion filter; value range: 0-9; 0 indicates that the filter is disabled. The larger the value, the stronger the filter. This parameter is not enabled for Windows for the time being.
    // Enable beauty filters. 
    trtcCloud.setBeautyStyle(TRTCBeautyStyle.TRTCBeautyStyleNature, 5, 5, 5);
    

    Step 7. Create a room and push streams

    1. If role in TRTCParams is set to TRTCRoleType.TRTCRoleAnchor, the current user is in the role of an anchor.
    2. Call enterRoom( ), specifying the appScene parameter, and a room whose ID is the value of the roomId field in TRTCParams will be created.
      • TRTCAppScene.TRTCAppSceneLIVE: the interactive live video streaming mode, which features smooth mic on/off and anchor latency below 300 ms. Up to 100,000 users can play the anchor’s video at the same time with playback latency as low as 1,000 ms. The example in this document uses this mode.
      • TRTCAppScene.TRTCAppSceneVoiceChatRoom: the interactive live audio streaming mode, which features smooth mic on/off and anchor latency below 300 ms. Up to 100,000 users can play the anchor’s video at the same time with playback latency as low as 1,000 ms.
      • For more information about TRTCAppScene, see TRTCAppScene .
    3. After the room is created, start encoding and transferring audio/video data. The SDK will return the onEnterRoom(result) callback. If result is greater than 0, room entry succeeds, and the value indicates the time (ms) room entry takes; if result is less than 0, room entry fails, and the value is the error code for the failure.
    let onEnterRoom = function (result) {
    if (result > 0) {
    console.log(`onEnterRoom, room entry succeeded and took ${result} seconds`);
    } else {
    console.warn(`onEnterRoom: failed to enter the room ${result}`);
    }
    };

    trtcCloud.on('onEnterRoom', onEnterRoom);

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = 29834;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAnchor;
    trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneLIVE);

    Step 8. Enter the room as audience

    1. Set the role field in TRTCParams to TRTCRoleType.TRTCRoleAudience to take the role of “audience”.
    2. Call enterRoom() to enter the room whose ID is the value of the roomId field in TRTCParams, specifying appScene:
      • TRTCAppScene.TRTCAppSceneLIVE: interactive live video streaming
      • TRTCAppScene.TRTCAppSceneVoiceChatRoom: interactive live audio streaming
    3. Watch the anchor's video:
    <div id="video-container"></div>
    <script>
    const videoContainer = document.querySelector('#video-container');
    const roomId = 29834;
    // Room entry callback, which is triggered upon successful room entry
    let onEnterRoom = function(result) {
    if (result > 0) {
    console.log(`onEnterRoom, room entry succeeded and took ${result} seconds`);
    } else {
    console.warn(`onEnterRoom: failed to enter the room ${result}`);
    }
    };
    // This callback is triggered when the anchor enables/disables camera stream pushing
    let onUserVideoAvailable = function(userId, available) {
    if (available === 1) {
    let id = `${userId}-${roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
    let view = document.getElementById(id);
    if (!view) {
    view = document.createElement('div');
    view.id = id;
    videoContainer.appendChild(view);
    }
    trtcCloud.startRemoteView(userId, view);
    trtcCloud.setRemoteViewFillMode(userId, TRTCVideoFillMode.TRTCVideoFillMode_Fill);
    } else {
    let id = `${userId}-${roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
    let view = document.getElementById(id);
    if (view) {
    videoContainer.removeChild(view);
    }
    }
    };

    trtcCloud.on('onEnterRoom', onEnterRoom);
    trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable);

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = roomId;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAudience; // Set the role to "viewer".
    trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneLIVE);
    </script>

    Step 9. Co-anchor

    1. Call switchRole(TRTCRoleType.TRTCRoleAnchor) to switch the role to “anchor” (TRTCRoleType.TRTCRoleAnchor).
    2. Call startLocalPreview() to enable local camera preview.
    3. Call startLocalAudio() to enable mic capturing.
    // Sample code: audience becomes an anchor
    trtcCloud.switchRole(TRTCRoleType.TRTCRoleAnchor);
    trtcCloud.startLocalAudio();
    trtcCloud.startLocalPreview(frontCamera, view);

    // Sample code: an anchor becomes audience
    trtcCloud.switchRole(TRTCRoleType.TRTCRoleAudience);
    trtcCloud.stopLocalAudio();
    trtcCloud.stopLocalPreview()

    Step 10. Co-anchor across rooms

    Anchors from two rooms can compete with each other without exiting their current rooms.

    1. Anchor A calls the connectOtherRoom() API. The API uses parameters in JSON strings, so anchor A needs to pass the roomId and userId of anchor B in the format of {"roomId": 978,"userId": "userB"} to the API.
    2. After co-anchoring succeeds, anchor A will receive the onConnectOtherRoom(userId, errCode, errMsg) callback, and all users in both rooms will receive the onUserVideoAvailable() and onUserAudioAvailable() callbacks.
      For example, after anchor A in room "001" uses connectOtherRoom() to call anchor B in room “002” successfully, all users in room "001" will receive the onUserVideoAvailable(B, true) and onUserAudioAvailable(B, true) callbacks, and all users in room "002" will receive the onUserVideoAvailable(A, true) and onUserAudioAvailable(A, true) callbacks.
    3. Users in both rooms can call startRemoteView(userId, view) to display the video image of the anchor in the other room. Audio will be played automatically.

    Event Timeline for Anchor Competition

    // Sample code: cross-room anchor competition
    let onConnectOtherRoom = function(userId, errCode, errMsg) {
    if(errCode === 0) {
    console.log(`Connected to the room of anchor ${userId}`);
    } else {
    console.warn(`Failed to connect to the anchor's room: ${errMsg}`);
    }
    };

    const paramJson = '{"roomId": "978","userId": "userB"}';
    trtcCloud.connectOtherRoom(paramJson);
    trtcCloud.on('onConnectOtherRoom', onConnectOtherRoom);

    Step 11. Exit the room

    Call exitRoom() to exit the room. The SDK disables and releases devices such as cameras and mics during room exit. Therefore, room exit is not an instant process. It completes only after the onExitRoom() callback is received.

    // Please wait for the `onExitRoom` callback after calling the room exit API
    let onExitRoom = function (reason) {
    console.log(`onExitRoom, reason: ${reason}`);
    };
    trtcCloud.exitRoom();
    trtcCloud.on('onExitRoom', onExitRoom);
    Note:

    If your Electron application integrates multiple audio/video SDKs, please wait after you receive the onExitRoom callback to start other SDKs; otherwise the device busy error may occur.