声网直播功能

一、功能流程

channel_name和token调用声网API加入直播频道 → 声网API订阅视频流 → 页面显示视频画面 → 调用声网API退出直播

二、直播组件封装

注：多直播需要复用直播组件，所以针对直播组件进行封装
官网文档：声网极速直播web开发文档
参考文档：上云API开发文档V04

1. 创建端口
   引入声网SDK,通过createClient()传递配置参数生成端口

let client= AgoraRTc.createclient({ mode:"live',codec:'h264"})

2. 加入频道
   通过join({channel_name,token,uid})加入频道

client.join({channel name,token,uid})

3. 订阅视频流，绑定DOM节点播放

通过 on(‘用户对象‘,callback) 获取订阅流媒体的信息
client.on('user-published', async (user, mediaType) => {}）
订阅流
client.subscribe(user, mediaType)
获取用户流媒体轨道
let remoteVideoTrack = user.videoTrack
获取DOM节点
let remotePlayerContainer = document.getElementById('DOM节点')
让流媒体轨道在节点播放
remoteVideoTrack.play(remotePlayerContainer)

4. 离开直播

client.leave()

5. 封装代码
   由于要实现多直播，故使用ES6的Class封装，将声网的几个功能作为Class的函数功能集成到该Class。下方为封装示例

import AgoraRTc from 'agora-rtc-sdk-ng
import config from '@/configs/config
const appid = config.agoraAPPID
export default class Rtcclient {
client = nul1
createclient(data){
this.client =AgoraRTc.createclient(data)
return this.client
}
on(idName){
this.client.on('user-published', async(user, mediaType)=>{
this.user = user
if(mediaType==='video'){
await this.client.subscribe(user, mediaType)
console.log('订阅直播成功”)
const remoteVideoTrack =user.videoTrack
const remoteplayercontainer = document.getElementById(idName)
remotevideoTrack.play(remotePlayerContainer)
else {
console.log('未获取到直播视频流’)
}
})
}
join(data){
this.client
.join(
appid,
data.channel,
data.token,
data.uid
.then((res)=>{
return res
})
setclientRole(data){
this.client.setclientRole(data)
}
async leave(){
console.10g('退出直播间”)
await this.client.leave()
}
}

6. 使用示例

import Rtcclient from "Rtcclien.js
let client = new Rtcclient()
client = new RTC()
client.createclient({ mode:'live'
，codec:'h264'})
client.setclientRole('audience')
client.join({ uid,token,channel_name })
client.on('#rtcDom')
client.leave()