本文主要通過介紹網頁版群直播基礎功能和實現流程來告訴大家TWebLive 能用來做什么，如何把TWebLive集成到項目中 。

一、網頁版群直播效果

二、網頁版群直播實現框架

三、網頁版群直播基礎功能介紹

3.1、在騰訊云即時通信IM Demo[2]中可以通過2種方式體驗群直播功能。
（1）、通過全局群直播入口進入，此時不會向任何群組發送群直播開播/停播消息通知

（2）、在Demo中創建Public、Work、Meeting任意一個群組類型（不支持在AVChatRoom中開啟群直播），打開會話窗口，點擊群直播按鈕開啟群直播。

3.2、進入群直播界面后可以輸入直播名稱，底部操作區設置有開始直播/結束直播，攝像頭和麥克風開關按鈕。

3.3、開播時會給群組內所有成員推送開播通知，群組成員可以通過點擊消息卡片進入直播間觀看直播。

3.4、直播過程中主播端可以查看主播個人信息、直播在人數、直播時長，主播可以發送普通文本消息進行互動。

3.5、觀眾進入直播間可發送普通文本和禮物消息，暫停觀看不影響與主播進行消息互動。

3.6、主播結束直播時會給群組內推送結束直播通知，直播結束后再點擊卡片會提示直播已結束，不能再進入直播間。

3.7、網頁版群直播與云通信IM APP群直播互通體驗

四、實現群直播的核心技術—TWebLive

網頁版群直播功能的實現依賴TWebLive SDK。TWebLive集成了騰訊云實時音視頻TRTC[3]、騰訊云即時通信IM[4]、騰訊云超級播放器TcPlayer[5]，覆蓋了Web直播互動場景常見的功能，封裝了簡單易用的API[6]。

TWebLive主要提供了三大核心功能：主播端推流，觀眾端觀看，直播互動。主播端推流基于實時音視頻TRTC實現，觀眾端CDN觀看基于TcPlayer實現，直播互動基于即時通信IM實現。

五、如何利用TWebLive實現群直播功能

5.1、接入TWebLive

在TRTC應用或者IM應用中均可接入TWebLive。這里主要介紹在IM應用中接入TWeblive的流程。接入前，需要在騰訊云即時通信IM控制臺創建的IM應用中開通騰訊云實時音視頻服務,開通音視頻服務后，還需要在騰訊云直播控制臺配置直播域名且域名需要配置HTTPs。

在項目中通過npm安裝最新版本的tim-js-sdk、trtc-js-sdk、tweblive。如果項目已經集成有tim-js-sdk或trtc-js-sdk，直接將其升級到最新版本即可。

npm install tim-js-sdk --save npm install trtc-js-sdk --save npm install tweblive --save

在項目中引入tweblive

import TWebLive from 'tweblive' Vue.prototype.TWebLive = TWebLive

如果需要通過script標簽外鏈的方式引入，需要將tim-js.js、trtc.js、tweblive.js拷貝至項目中，按順序引入。

<script src="./trtc.js"></script> <script src="./tim-js.js"></script> <script src="./tweblive.js"></script>

5.2、群直播主播端主要功能實現如下

// 初始化pusher init() { this.pusher = this.TWebLive.createPusher({userID: this.user.userID }) this.setRenderView() this.pusher.on(this.TWebLive.EVENT.RTC_CONNECTION_STATE_CHANGED, this.onRTCConnectionStateChanged) this.pusher.on(this.TWebLive.EVENT.RTC_CLIENT_BANNED,this.onRTCClientBanned) this.pusher.on(this.TWebLive.EVENT.RTC_CLIENT_ERROR,this.onRTCError) }, // eslint-disable-next-line no-unused-vars onRTCConnectionStateChanged(event) {}, // eslint-disable-next-line no-unused-vars onRTCClientBanned(event) {}, // eslint-disable-next-line no-unused-vars onRTCError(event) {}, //開啟本地預覽 setRenderView() {this.pusher.setRenderView({elementID: 'video-container',audio: true,video: true}).then(() => {// 設置背景let el =document.getElementById('videocontainer').childNodesel[0].style.backgroundColor = 'rgba(0,0,0,0)'this.isStartCamera = false}).catch(() => {}) },// 打開攝像頭 startCamera() {this.pusher.startCamera().then(() => {this.isStartCamera = false}).catch(() => {}) }, // 關閉攝像頭 stopCamera() {this.pusher.stopCamera().then(() => {this.isStartCamera = true}).catch(() => {}) }, // 打開麥克風 startMicrophone() {this.pusher.startMicrophone().then(() => {this.isMute = false}).catch(() => {}) }, // 關閉麥克風 stopMicrophone() {this.pusher.stopMicrophone().then(() => {this.isMute = true}).catch(() => {}) }, // 通過業務服務器創建直播房間 async createRoom() {}, //開始推流 async startPushStream() {await this.createRoom()// streamID生成規則：sdkappid_roomid_userid_mainconst streamID = `${this.user.sdkAppID}_${this.roomID}_${this.user.userID}_main`// 對userSig進行encode,防止userSig中帶有+時被瀏覽器解析為空格，導致trtc ws連接失敗const url = `room://livedomainname=xxx.xxx.com&sdkappid=${this.user.sdkAppID}&roomid=${this.roomID}&userid=${this.user.userID}&usersig=${encodeURIComponent (this.user.userSig)}&streamid=${streamID}`this.pusher.startPush(url).then(() => { // 發送開播群通知 this.sendNoticeToGroup(1)}).catch(() => {}) }, // 停止推流 async stopPush() {await this.pusher.stopPush()// 發送直播結束群通知 this.sendNoticeToGroup(0) }, // 給群內發送開始直播、結束直播自定義消息 // roomStatus 1 開始直播 0 結束直播 sendNoticeToGroup(roomStatus) {if (!this.groupLiveInfo.groupID) { return }const { userID, nick, avatar } = this.user.currentUserProfile// 自定義消息結構體，根據實際需要修改，以下結構體僅為Demo使用const form = {roomId: this.roomID,roomName: this.roomName,roomCover: avatar,roomStatus: `${roomStatus}`,anchorName: nick,version: 4,roomType: 'liveRoom',anchorId: userID,businessID: 'group_live'}const message = this.tim.createCustomMessage({to: this.groupLiveInfo.groupID,conversationType: this.TIM.TYPES.CONV_GROUP,priority: this.TIM.TYPES.MSG_PRIORITY_NORMAL,payload: {data: JSON.stringify(form),description: '',extension: '',},})this.tim.sendMessage(message).then(() => {}).catch(() => {}) }

5.3、群直播觀眾端主要功能實現如下

// 初始化player init() {this.player = this.TWebLive.createPlayer()this.player.setCustomConfig({autoplay: true,poster: { style:'cover', src: poster },pausePosterEnabled: false,wording: {1:'您觀看的直播已結束哦~ ',2:'您觀看的直播已結束哦~ ',4:'您觀看的直播已結束哦~ ',13:'您觀看的直播已結束',2032: '請求視頻失敗，請檢查網絡',2048: '請求m3u8文件失敗，可能是網絡錯誤或者跨域問題'}})// 監聽播放事件 this.player.on(this.TWebLive.EVENT.PLAYER_PLAYING,this.onPlayerPlaying) // 監聽暫停事件 this.player.on(this.TWebLive.EVENT.PLAYER_PAUSE,this.onPlayerPause) // 監聽瀏覽器不允許自動播放事件 this.player.on(this.TWebLive.EVENT.PLAYER_AUTOPLAY_NOT_ALLOWED, this.onPlayerAutoPlayNotAllowed) // 監聽播放異常事件 this.player.on(this.TWebLive.EVENT.PLAYER_ERROR,this.onPlayerError) this.setRenderView() }, // eslint-disable-next-line no-unused-vars onPlayerPlaying(event) {}, // eslint-disable-next-line no-unused-vars onPlayerPause(event) {}, // eslint-disable-next-line no-unused-vars onPlayerAutoPlayNotAllowed(event) {this.$store.commit('showMessage', {message: '不能自動播放',type: 'info'}) }, //開始播放 startPlay() {const streamID = `${this.user.sdkAppID}_${this.roomID}_${this.anchorId}_main`const flv = `https://xxx.xx.com/live/${streamID}.flv`const hls = `https://xxx.xx.com/live/${streamID}.m3u8` const url = `https://flv=${encodeURIComponent(flv)}&hls=${encodeURIComponent(hls)}`this.player.startPlay(url).then(() => {this.isPlaying = true}).catch(() => {}) }, //暫停播放 pauseVideo() {this.player.pauseVideo().then(() => {this.isPlaying = false}).catch(() => {}) }, // 恢復播放 resumeVideo() {this.player.resumeVideo().then(() => {this.isPlaying = true}).catch(() => {}) }, // 調節播放器音量 setPlayoutVolume() {this.player.setPlayoutVolume(this.volumeValue) }, // 停止播放 stopPlay() {this.player.stopPlay()this.isPlaying = false }

5.4、群直播互動功能實現
由于騰訊云即時通信IM Demo[2]中已經集成了IM應用，直播互動部分的功能通過IM SDK API實現。

// 創建直播互動群 async createGroupLiveAvChatRoom() {await this.tim.createGroup({name: this.roomName,groupID: this.roomID,type: this.TIM.TYPES.GRP_AVCHATROOM,}) }, // 進入直播互動群 joinGroupLiveAvChatRoom() {this.tim.joinGroup({groupID: this.groupLiveInfo.roomID}).then((imResponse) => {const status = imResponse.data.statusif (status === this.TIM.TYPES.JOIN_STATUS_SUCCESS || status === this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP) {// 加群成功后才可以發消息this.sendAvailable = true}}).catch(() => {}) }, // 發送普通文本消息 sendTextMessge() {const message = this.tim.createTextMessage({to: this.groupLiveInfo.roomID,conversationType: this.TIM.TYPES.CONV_GROUP,payload: { text: this.messageContent }})this.tim.sendMessage(message).catch(error => {})this.messageContent = '' } // 發送禮物消息 sendGiftMessage() {// data為禮物消息結構體，根據實際需要自己定義const data = {}const message = this.tim.createCustomMessage({to: this.groupLiveInfo.roomID,conversationType: this.TIM.TYPES.CONV_GROUP,payload: {data: JSON.stringify(data),description: '',extension: ''}})this.tim.sendMessage(message).catch(error => {}) }

代碼片段是在Vue框架下實現，代碼中使用到的變量維護在Vuex 和組件data屬性中。可以復制以上代碼片段到Vue項目中，即可快速搭建一個網頁版群直播功能。

六、TWebLive SDK體積優化
TWebLive SDK 1.0.0打包時將IM SDK、TRTC SDK、TcPlayer 集成輸出，導致輸出的包體積很大(接近1M)，如果在已有IM或者TRTC應用中接入TWebLive時，存在重復引用的問題。為了提升接入體驗，已發布TWebLive 1.1.0版本，主要是在1.0.0的基礎上優化SDK的打包方式，把IM SDK和TRTC SDK作為外部依賴打包，SDK體積減少了78%。接入TWeblive時手動安裝IM SDK和TRTC SDK即可。

七、注意事項
第一、接入TWebLive時，需要安裝最新版本的tim-js-sdk、trtc-js-sdk，避免引起版本兼容性問題。
第二、Pusher和Player中使用到的SDKAppID必須與IM應用的SDKAppID保持一致。
第三、由于 H.264 版權限制，華為系統的 Chrome 瀏覽器和以 Chrome WebView 為內核的瀏覽器均不支持 TRTC 桌面瀏覽器端 SDK 的正常運行。

參考資料：

[1] TWebLive詳情

[2] 騰訊云即時通信IM在線 Demo

[3] 騰訊云實時音視頻 TRTC

[4] 騰訊云即時通信IM

[5] 騰訊云超級播放器 TCPlayer

[6] TWebLive接口手冊

[7] 騰訊云即時通信接口手冊

[8] TWebLive 使用

[9] 騰訊點播視頻DEMO

總結

以上是生活随笔為你收集整理的TWebLive基于TRTC和IM实现web群直播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。