WeChat HTML5 Livestreaming Interaction

Last updated: 2020-07-16 13:46:05

    Based on the web (HTML5) player and Instant Messaging (IM), the Web ILVB component encapsulates easy-to-use APIs and provides a free and open-source demo, allowing developers to quickly integrate and use this component.
    This component is suitable for web livestreaming scenarios, such as large conferences, events, classes, and webinars as well as WeChat HTML5 livestream marketing.

    Trying It Online

    Click here to try it out

    References

    Benefits of the Web ILVB Component

    Reduce development time and allow developers to focus on business logic

    When using the Web ILVB component, developers only need to specify several parameters after downloading the SDK to implement projects that involve common features such as LVB videos, chats, likes, and gifts.

    Reduce the time required to identify and resolve issues

    • In the live streaming scenario, when there are many participants and messages, in-house services can encounter performance bottlenecks (for example, they might not be able to handle highly concurrent workloads), resulting in difficult problems, including a low request success rate, message backlog, message loss, and high message latency. The Web ILVB component ensures high-concurrency and highly available IM capabilities by integrating Instant Messaging (IM), which is built on QQ’s wealth of experience in the IM field. It also provides statistics, logging, and troubleshooting features to help you quickly identify and resolve issues.
    • The Web ILVB component allows you to set message priorities. For example, the priority of host messages and gift messages can be set to high, and the priority of like messages can be set to low. When the frequency exceeds 40 messages per second in a live room, the IM backend limits the message frequency, but ensures that high-priority messages are delivered.

    Reduce project development and OPS costs

    • The Web ILVB component is free and open-source, and the accompanied Web (HTML5) player is also free. IM is the only value-added service required for this solution. You can use the free Trial Edition or upgrade IM to Enterprise Edition or Flagship Edition. For billing details, see Billing Overview.
    • AVChatRoom groups in IM support unlimited group members.
    • IM server nodes provide extensive coverage, allowing users to access the service from nearby without worrying about server scaling.
    • Content filtering can identify harmful content such as pornography, politics, and profanity in order to meet regulatory requirements.
    • Our IM service team quickly responds to protect your projects.

    Instructions

    Step 1: Create an IM app and a group

    1. Create an app in the IM console and obtain the SDKAppID.
    2. Generate a UserSig.
    3. Import a single account (or import multiple accounts) to IM.
    4. Create an live streaming group (AVChatRoom group) through the RESTful API or console.

    Step 2: Run the Web ILVB component

    // npm i tweblive
    import TWebLive from 'tweblive';
    
    let options = {
      SDKAppID: 0, // Replace 0 with the SDKAppID of your IM app during integration.
      domID: "id_test_video", // ID of the web player container, such as <div id="id_test_video" style="width:100%; height:auto;"></div>
      m3u8: "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8", // Replace it with the actual playback URL.
      flv: "http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv" // Replace it with the actual playback URL.
    };
    // Create an instance.
    let tweblive = new TWebLive(options);
    
    // This is triggered when the SDK is in the ready state. The accessing side listens to this event so that it can call SDK APIs to send messages or perform other actions and use different features of the SDK.
    let onIMReady = function() {
      tweblive.sendTextMessage({
        roomID: 'AV1', // Replace it with the ID of the joined live room.
        text: 'hello from TWebLive'
      }).then(function(res) {
        console.log('demo sendTextMessage OK', res);
      }).catch(function(err) {
        console.log('demo sendTextMessage failed', err);
      });
    }
    tweblive.on(TWebLive.EVENT.IM_READY, onIMReady);
    
    // A text message from another user in the live room was received.
    let onTextMessageReceived = function(event) {
      event.data.forEach(function(message) {
        // Use the nickname if any. Otherwise, use the UserID.
        console.log('demo ' + (message.nick || message.from) + ' says: ', message.payload.text);
      });
    }
    tweblive.on(TWebLive.EVENT.TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
    
    // A custom message (such as a gift or like message) from another user in the live room was received.
    let onCustomMessageReceived = function(event) {
      event.data.forEach(function(message) {
        console.log('demo ' + 'data:' + message.payload.data + ' description:' + message.payload.description + ' extension:' + message.payload.extension);
      });
    }
    tweblive.on(TWebLive.EVENT.CUSTOM_MESSAGE_RECEIVED, onCustomMessageReceived);
    
    // A notification of a user joining the live room was received.
    let onRemoteUserJoin = function(event) {
      event.data.forEach(function(message) {
        // Use the nickname if any. Otherwise, use the userID.
        console.log('demo ' + (message.nick || message.payload.userIDList[0]) + ' joined the group');
      });
    }
    tweblive.on(TWebLive.EVENT.REMOTE_USER_JOIN, onRemoteUserJoin);
    
    // For more events, see EVENT.
    
    // Anonymously join a live room when not logged in. In this case, you can only receive messages and cannot send messages.
    tweblive.enterRoom(""); // Enter the ID of the live room to join. It corresponds to the groupID of the AVChatRoom group in IM.
    

    Step 3: Provide the live streaming source

    We recommend that you use the relayed push service of TRTC.
    For compatibility with both computers and mobile devices, we recommend that you provide your live streaming source in both flv and hls formats.

    • On browsers that support MSEs, the component will prefer flv sources as they enable lower latency and better performance.
    • On browsers that do not support MSEs, the component will prefer hls sources as they work better with mobile devices, even though they increase latency somewhat.

    For LVB push on Windows or Mac platforms, we strongly recommend that you use TRTC Electron. Relayed push generates both flv and hls streams and integrates with IM to provide stable, reliable, and comprehensive services.
    For instructions on how to quickly enable LVB and relayed push, see Electron.

    Step 4: Perform secondary development based on the Web ILVB component

    You can further develop other business logic and features based on the Web ILVB component.

    FAQs

    1. How can I display the nickname (nick) instead of userID in the notification and chat messages after joining a live room?

    To display the nickname in a live room, set the nickname (skip this step if it is already set) and then join the live room.

    // Only logged-in users can change their nicknames.
    tweblive.setMyProfile({ nick: "Indiana Jones" }).then(() => {
      tweblive.enterRoom(""); // Enter the ID of the live room to join. It corresponds to the groupID of the AVChatRoom group in IM.
    });

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help