このドキュメントでは主にWeb版グループライブストリーミングの基本的な機能と実現プロセスを紹介し、TWebLiveの用途とTWebLiveをプロジェクトに統合する方法について説明します。
WEBグループライブストリーミングの機能はWeChatグループライブストリーミングと同様、専用のライブストリーミングAPPをダウンロードせずにライブストリーミングできます。
Webインスタントメッセージツールにグループライブストリーミング機能を統合すると、グループ内のすべての参加者がライブストリーミングを開始できます。また複数の参加者が同時にライブストリーミングを開始でき、他の参加者はグループ内のライブストリーミング開始メッセージを介してお気に入りのライブストリーミングルームに入ることができます。
ライブストリーミングルームでは、通常のテキストメッセージを送信できるだけでなく、カスタムメッセージを介して弾幕、ギフト、抽選などの多様なインタラクティブメッセージを実現できます。
このようなグループライブストリーミング製品の機能は、TencentMeeting製品部通信端末研究開発センターWEBグループが開発したWEBライブストリーミングインタラクティブSDK-TWebLive [1]を統合することで実現することが可能です。
一、Web版グループライブストリーミングの効果
二、Web版グループライブストリーミング実現フレームワーク
三、Web版グループライブストリーミングの基本機能の紹介
3.1、Tencent Cloud IM Demo[2]では、2種類の形式でグループライブストリーミング機能を体験できます。
（１）、グローバルグループライブストリーミングポータルからログインします。この時点ではグループライブストリーミングの開始/停止メッセージ通知はいずれのグループにも送信されません。
（2）、DemoでPublic、Work、Meetingのいずれか一つのグループのタイプ（AVChatRoomではグループライブストリーミングの開始はサポートされていません）を作成し、セッションウィンドウを開き、グループライブストリーミングボタンをクリックし、グループライブストリーミングを開きます。
3.2、グループライブストリーミングインターフェースに入ると、グループライブストリーミング名を入力することができます。操作エリアには、グループライブストリーミング開始/グループライブストリーミング終了、カメラ、マイク切り替えボタンが配置されています。
3.3、ライブストリーミングが開始されると、グループの参加者全員にプッシュ通知されます。グループの参加者は、メッセージカードをクリックしてライブストリーミングルームにログインし、ライブストリーミングを視聴することができます。
3.4、ライブストリーミング中にキャスター側でキャスターの個人情報、ライブストリーミング視聴者数、ライブストリーミング時間を確認することができます。また通常のテキストメッセージを送信し、相互にコミュニケーションをとることも可能です。
3.5、視聴者はライブストリーミングルームにログインすると、通常のテキストやギフトメッセージを送信することができます。視聴を一時停止しても、キャスターとのメッセージのやり取りには影響しません。
3.6、キャスターがライブストリーミングを終了すると、ライブストリーミングの終了がグループ内にプッシュ通知されます。ライブストリーミングが終了した後、カードをクリックすると、ライブストリーミングの終了が表示され、ライブストリーミングルームに入ることができなくなります。
3.7、Web版グループライブストリーミングTelecommunication IMAPPグループライブストリーミング間のインタラクティブ体験
四、グループライブストリーミングのコアテクノロジーを実現-TWebLive
Web版グループライブストリーミング機能の実現はTWebLive SDKに依存します。TWebLiveは、Tencent Real-Time Communication （TRTC） [3]、Tencent Cloud Instant Messaging （IM） [4]、TencentCloud Super Player （TcPlayer） [5]を統合することで、インタラクティブなWeb版ライブストリーミングの一般的な機能をカバーし、シンプルで使用しやすいAPI [6]をカプセル化しました。
TWebLiveは主に、キャスター側のストリーミング、視聴者側の視聴、インタラクティブなライブストリーミングの3つのコア機能を提供します。キャスター側のプッシュはTRTCを元に実現され、視聴者側のCDNはTcPlayerを元に実現されます。またインタラクティブなライブストリーミングはIMを元に実現されます。
五、TWebLiveを利用してグループグループライブストリーミングを実現する方法
5.1、TWebLiveにアクセス
TWebLiveにはTRTCアプリケーションまたはIMアプリケーションのいずれからでもアクセスできます。ここでは、主にIMアプリケーションでTWebliveにアクセスする手順を紹介します。アクセスする前に、IMコンソールで作成されたIMアプリケーションでTencent Real-Time Communication Serviceをアクティブ化する必要があります。さらにVideo Serviceをアクティブ化した後、Tencent Cloud LVBコンソールでライブストリーミングのドメイン名を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
外部チェーンのスクリプトタグを介してインポートする必要がある場合は、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').childNodes
el[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_main
const 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、インタラクティブなグループライブストリーミング機能の実現
Tencent Cloud IM Demo[2]にIMアプリケーションがすでに統合されている場合は、インタラクティブなライブストリーミングの一部機能はIM SDK API[7]を介して実現されます。
// 创建直播互动群
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.status
if (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プロジェクトにコピーすることで、Web版グループライブストリーミング機能をスピーディーに構築できます。
六、TWebLive SDKボリュームの最適化
TWebLive SDK 1.0.0がパッケージ化されている場合、IM SDK、TRTC SDK、TcPlayerが統合されて出力されるため、出力するパッケージのボリュームが非常に大きく（約1M）なります。既存のIMまたはTRTCアプリケーションでTWebLiveにアクセスする場合は、参照が繰り返されるという問題が存在します。アクセスエクスペリエンスを向上させるため、TWebLiveバージョン1.1.0がすでにリリースされています。主に、1.0.0を元にSDKのパッケージ化方式を最適化し、IMSDKとTRTCSDKを外部依存関係としてパッケージ化し、SDKのボリュームを78%削減しています。TWebliveにアクセスする場合は、IMSDKとTRTCSDKを手動でインストールしてください。
七、注意事項
第一に、TWebLiveにアクセスする場合は、バージョンの互換性の問題を回避するため、最新版のtim-js-sdk、trtc-js-sdk、twebliveをインストールする必要があります。
第二に、PusherとPlayerに使用するSDKAppIDはIMアプリケーションのSDKAppIDと一致させる必要があります。
第三に、H.264 版の権限の制限によって、Huaweiシステムの Chrome ブラウザおよび Chrome WebView をコアとするブラウザでは、 TRTC デスクトップブラウザ SDK の正常動作をサポートしていません。