完全替代flash推流：騰訊雲這套直播SDK有哪些優點？

1、TWebLive 簡介

TWebLive [1] 集成了騰訊雲實時音視頻 TRTC [2]、騰訊雲即時通訊 TIM [3]、騰訊雲超級播放器 TCPlayer [4]，覆蓋了 Web 直播互動場景常見的功能（推流、開/關麥，開/關攝像頭，微信分享觀看、聊天點贊等等），並封裝了簡單易用的 API [5]，接入後可快速實現 Web 端推流、拉流以及實時聊天互動功能。

效果展現

TWebLive 架構設計以下圖所示：

2、TWebLive 的優點

開發者接入此 SDK，可完全替代 flash 推流方案，大大下降 Web 推流、Web 低延時觀看、CDN 觀看以及實時聊天互動（或彈幕）的實現複雜度和時間成本，下面咱們經過舉例來進行說明。
1. 推流
當須要推流時，建立 Pusher（推流）對象，最簡單的推流僅需3步：

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

<div id="pusherView" style="width:100%; height:auto;"></div><script>// 一、建立 Pusher（推流）對象let pusher = TWebLive.createPusher({ userID: 'your userID' });
// 二、設置渲染界面，且從麥克風採集音頻，從攝像頭採集視頻（默認720p）pusher.setRenderView({  elementID: 'pusherView',  audio: true,  video: true}).then(() => {  // 三、填入 sdkappid roomid 等信息，推流  // url 必須以 `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>

2. 拉流
當須要拉流播放時，建立 Player（播放器）對象，最簡單的拉流僅需3步：

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

<div id="playerView" style="width:100%; height:auto;"></div><script>// 一、建立 Player（播放器）對象let player = TWebLive.createPlayer();
// 二、設置渲染界面player.setRenderView({ elementID: 'playerView' });
// 三、填入 flv hls 地址等信息，拉 CDN 流播放，此時 url 必須以 `https://` 開頭// 或 填入 sdkappid roomid 等信息，拉 WebRTC 低延時流播放，此時 url 必須以 `room://` 開頭let url = 'https://'  + 'flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv' + '&' // 請替換成實際可用的播放地址  + 'hls=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8' // 請替換成實際可用的播放地址
// 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>

3. 直播互動
當主播和觀衆須要聊天互動時，建立 IM（即時通訊）對象，最簡單的消息收發僅需3步：

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

// 一、建立 IM（即時通訊）對象並監聽事件let im = TWebLive.createIM({  SDKAppID: 0 // 接入時須要將0替換爲您的雲通訊應用的 SDKAppID});// 監聽 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);  });};// 接入側監聽此事件，而後可調用 SDK 發送消息等im.on(TWebLive.EVENT.IM_READY, onIMReady);// 收到文本消息，上屏im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
// 二、登陸im.login({userID: 'your userID', userSig: 'your userSig'}).then((imResponse) => {  console.log(imResponse.data); // 登陸成功  if (imResponse.data.repeatLogin === true) {    // 標識帳號已登陸，本次登陸操做爲重複登陸    console.log(imResponse.data.errorInfo);  }}).catch((imError) => {  console.warn('im | login | failed', imError); // 登陸失敗的相關信息});
// 三、加入直播間im.enterRoom('your roomID').then((imResponse) => {  switch (imResponse.data.status) {    case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // 加入直播間成功      break;    case TWebLive.TYPES.ALREADY_IN_ROOM: // 已經在直播間內      break;    default:      break;  }}).catch((imError) => {  console.warn('im | enterRoom | failed', imError); // 加入直播間失敗的相關信息});</script>

爲了進一步下降開發者的開發和人力成本，咱們在 TWebLive SDK 的基礎上，提供了同時適配 PC 和移動端瀏覽器的  Demo [6]，並開源到了 github 。開發者 fork&clone 項目到本地，稍做修改便可把 Demo 跑起來，或者集成到本身的項目部署上線。
一樣，文末也爲你們提供了在線 Demo [7] 和本地一分鐘跑通的介紹文檔 [8]， 歡迎查閱和運行體驗。

3、接入使用

接入前，須要在騰訊雲實時音視頻 TRTC 控制檯中建立一個實時音視頻應用（此時會自動建立一個 SDKAppID 相同的 IM 應用），取得 SDKAPPID。
而後點擊應用管理 -> 功能配置 -> 開啓自動旁路推流。開啓旁路推流功能後，TRTC 房間裏的每一路畫面都配備一路對應的播放地址（若是不須要 CDN 直播觀看，可略過開啓旁路推流的步驟）。

接着在騰訊雲直播控制檯配置播放域名並完成 CNAME 配置，詳細操做指引請參見 《CDN 直播觀看》 [9] （若是不須要 CDN 直播觀看，此步驟可略過）。
最後經過 npm 下載 TWebLive：

• 
  

npm i tweblive --save

4、平臺支持

Web 推流和 Web 低延時觀看用到了 WebRTC 技術。目前主要在桌面版 Chrome 瀏覽器、桌面版 Safari 瀏覽器以及移動版 Safari 瀏覽器上有較爲完整的支持，其餘平臺（例如 Android 平臺的瀏覽器）支持狀況均比較差，具體以下：

在移動端推薦使用 小程序解決方案 [10 ] ，微信和手機 QQ 小程序均已支持，都是由各平臺的 Native 技術實現，音視頻性能更好，且針對主流手機品牌進行了定向適配。
若是你的應用場景主要爲教育場景，那麼教師端推薦使用穩定性更好的 Electron 解決方案 [1 1] ，支持大小雙路畫面，更靈活的屏幕分享方案以及更強大的弱網絡恢復能力。

5、注意事項

第一，實時音視頻應用與 IM 應用的 SDKAppID 一致，才能複用帳號與鑑權。
第二，IM 應用針對文本消息，提供基礎版本的安全打擊能力，若是但願使用自定義不雅詞功能，能夠點擊升級或在購買頁購買安全打擊-專業版服務。
第三，本地計算 UserSig 的方式僅用於本地開發調試，請勿直接發佈到線上，一旦 SECRETKEY 泄露，***者就能夠盜用你的騰訊雲流量。正確的 UserSig 簽發方式是將 UserSig 的計算代碼集成到你的服務端，並提供面向 App 的接口，在須要 UserSig 時由你的 App 向業務服務器發起請求獲取動態 UserSig。更多詳情請參見 服務端生成 UserSig [12 ] 。
第四，因爲 H.264 版權限制，華爲系統的 Chrome 瀏覽器和以 Chrome WebView 爲內核的瀏覽器均不支持 TRTC 桌面瀏覽器端 SDK 的正常運行。

6、結語

本文爲你們介紹了騰訊雲新的 Web 直播互動組件——TWebLive，經過接入此 SDK，開發者能夠快速輕便地實現Web 推流、Web 低延時觀看、CDN 觀看以及實時聊天互動（或彈幕）等功能，可以很好替換傳統的 flash 推流方案。

同時，提供有詳細的接入方案和在線 Demo，歡迎你們前來體驗。目前 TWebLive 在主流的桌面瀏覽器上也有較好的支持，在移動端支持小程序的解決方案。

後續，咱們也會繼續深化研究，提供更全方位的直播功能服務，好比：推流端支持屏幕分享、圖片消息互動、觀衆端多線路觀看（WebRTC 低延時線路和 CDN 線路）、主播觀衆連麥互動等功能，敬請你們期待。