Completely replace Flash push stream: Tencent cloud this live SDK has what advantages?

Introduction:

Tencent Cloud Web live interactive component — TWebLive is a new SDK launched by Tencent cloud terminal RESEARCH and development team. Developers can quickly realize Web push/pull flow, real-time interaction and other functions with simple access. This article will reveal the mystery of this SDK and hope to communicate with you.

I. Introduction to TWebLive

TWebLive, Tencent Cloud Web live interactive component, is a new SDK launched by Tencent Cloud terminal RESEARCH and development team, integrating Tencent Cloud real-time audio and video TRTC, Tencent cloud instant messaging TIM, Tencent cloud super player TCPlayer, It covers common functions of Web live interactive scenes (push stream, turn on/off mic, turn on/off camera, wechat share and watch, chat like, etc.), and encapsulates easy-to-use API. After access, it can quickly realize Web side push stream, pull stream and real-time chat interaction functions.

TWebLive architecture design is shown in the figure below:

Second, TWebLive advantages

Developers accessing this SDK can completely replace flash streaming scheme and greatly reduce the implementation complexity and time cost of Web streaming, Web low-latency viewing, CDN viewing and real-time chat interaction (or bullet screen). Here we illustrate with examples.

1. The flow

When a push stream is needed, create a Pusher (push stream) object. The simplest push stream takes only 3 steps:

<div id="pusherView" style="width:100%; height:auto;"></div>
<script>
// create a Pusher object
let pusher = TWebLive.createPusher({ userID: 'your userID' });

// set the rendering interface and collect audio from microphone and video from camera (default 720p)
pusher.setRenderView({
  elementID: 'pusherView'.audio: true.video: true
}).then(() = > {
  // 3. Fill in sdkappId, RoomID and other information to push the stream
  // Url must start with 'room://'
  let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}&livedomainname=${liveDomainName}&streamid=${streamID}`;
  pusher.startPush(url).then(() = > {
    console.log('pusher | startPush | ok');
  });
}).catch(error= > {
  console.error('pusher | setRenderView | failed', error);
});
</script>
Copy the code

2. Pull flow

Create a Player object when a pull stream is required. The simplest pull stream takes only 3 steps:

<div id="playerView" style="width:100%; height:auto;"></div>
<script>
// create a Player object
let player = TWebLive.createPlayer();

// set the rendering interface
player.setRenderView({ elementID: 'playerView' });

// 3. Enter the FLV HLS address and play the CDN stream. The URL must start with 'https://'
// Or fill in information such as sdkappId and RoomID to play WebRTC low-delay stream. In this case, the URL must start with 'room://'
let url = 'https://'
  + 'flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv' + '&' // Replace it with the actual playable address
  + 'hls=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8' // Replace it with the actual playable address

// let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;
player.startPlay(url).then(() = > {
  console.log('player | startPlay | ok');
}).catch((error) = > {
  console.error('player | startPlay | failed', error);
});
</script>
Copy the code

3. Live interaction

When the host and the audience need to chat and interact, create an IM (instant messaging) object, the simplest message to send and receive only 3 steps:

Create an IM object and listen for events
let im = TWebLive.createIM({
  SDKAppID: 0 // Replace 0 with the SDKAppID of your cloud communication application
});
// Listen for events such as IM_READY IM_TEXT_MESSAGE_RECEIVED
let onIMReady = function(event) {
  im.sendTextMessage({ roomID: 'your roomID'.text: 'hello from TWebLive' });
};
let onTextMessageReceived = function(event) {
  event.data.forEach(function(message) {
    console.log((message.from || message.nick) + ':', message.payload.text);
  });
};
// The access side listens for this event and can then call the SDK to send messages, etc
im.on(TWebLive.EVENT.IM_READY, onIMReady);
// Displays the screen after receiving the text message
im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);

// 2
im.login({userID: 'your userID'.userSig: 'your userSig'}).then((imResponse) = > {
  console.log(imResponse.data); // Login succeeded
  if (imResponse.data.repeatLogin === true) {
    // Indicates that the account has been logged in. This login operation is repeated
    console.log(imResponse.data.errorInfo);
  }
}).catch((imError) = > {
  console.warn('im | login | failed', imError); // Information about the login failure
});

// 3. Join the studio
im.enterRoom('your roomID').then((imResponse) = > {
  switch (imResponse.data.status) {
    case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // Join the studio successfully
      break;
    case TWebLive.TYPES.ALREADY_IN_ROOM: // It is already in the studio
      break;
    default:
      break;
  }
}).catch((imError) = > {
  console.warn('im | enterRoom | failed', imError); // Add information about studio failures
});
</script>
Copy the code

In order to further reduce the development and labor costs of developers, we provide Demo adapted to PC and mobile browsers on the basis of TWebLive SDK, and open source to Github. Fork&clone is a local project for developers. With a few modifications, the Demo can run or be integrated into their own projects.

Access and use

inTencent Cloud real-time audio and video TRTC consoleTo create a real-time audio and video application (One is automatically createdSDKAppIDSame IM application),SDKAPPID. Then, choose Application Management > Function Configuration > Enable Automatic bypass stream pushing. After bypass streaming function is enabled, each screen in the TRTC room is equipped with a corresponding playing address (If you do not need CDN to watch live, you can skip the step of enabling bypass stream pushing). 在 Tencent Cloud live broadcast consoleConfigure the play domain name and CNAME. For details, seeCDN Live Watch(If you do not need CDN to watch live, you can skip this step). Download TWebLive via NPM

npm i tweblive --save
Copy the code

Iv. Platform support

WebRTC technology is used for Web push streaming and Web low latency viewing. Currently, Chrome on the desktop, Safari on the desktop, and Safari on the mobile are fully supported. Other platforms (such as Android) are poorly supported. Details are as follows:

It is recommended to use small program solutions on mobile terminals. Wechat and MOBILE QQ small programs are supported, which are realized by Native technologies of various platforms, with better audio and video performance and directional adaptation for mainstream mobile phone brands. If your application scenario is mainly educational, you are advised to use the Electron solution with better stability, large and small dual-channel screen, more flexible screen sharing scheme, and stronger weak network recovery capability.

Five, matters needing attention

First, real-time audio and video applications must have the same SDKAppID as IM applications to reuse accounts and authentication.

Second, the IM app provides the basic version of the security attack capability for text messages. If you want to use the custom offensive words feature, you can click on the Upgrade or purchase the security Attack pro service on the Purchase page.

Third, the local calculation of UserSig is only used for local development and debugging, do not directly publish online, once SECRETKEY is leaked, attackers can embezzle your Tencent cloud traffic. The correct way to issue UserSig is to integrate the calculation code of UserSig into your server and provide an INTERFACE oriented to App. When a UserSig is needed, your App will initiate a request to the business server to obtain a dynamic UserSig. See Server Generation of UserSig [12] for more details.

Fourth, huawei Chrome and Chrome WebView based browsers do not support the normal running of the TRTC desktop browser SDK due to copyright restrictions on H.264.

Six, the concluding

This paper introduces Tencent Cloud’s new Web live interactive component — TWebLive. By accessing this SDK, developers can quickly and easily achieve Web streaming, Web low-latency viewing, CDN viewing and real-time chat interaction (or bullet screen) and other functions, which can well replace the traditional Flash streaming scheme.

At the same time, provide a detailed access plan and online Demo, welcome to come to experience. At present, TWebLive also has good support on mainstream desktop browsers, and supports small program solutions on mobile terminals.

In the future, we will continue to deepen the research and provide more comprehensive live streaming function services, such as screen sharing, picture message interaction, multi-line viewer (WebRTC low-delay line and CDN line), interaction between anchor and audience with mic and other functions, please look forward to it.

References:

• TWebLive Interface manual