前端通用文档 - 阿里web SDK 直播接入流程（vue ts vite） - 《前端技术分享》

H5页面创建直播相关需求，此处为vue3的相关代码。vue2的只需要修改对应的生命周期和去除ts相关代码即可

创建文件liveSdkInit.ts
初始化直播sdk,后续才能获取直播，聊天等信息

第一步：创建直播初始化代码

import { getLiveAuthToken } from'@/api/live-managemant'
// tokn值
interfaceAuthToken {
  accessToken: string
  refreshToken: string
  accessTokenExpiredTime: number
}
export default async function liveWebInit() {
  const userInfo = localStorage.getItem('userInfo') && JSON.parse(localStorage.getItem('userInfo') as any)
  const { RoomEngine } = window.RoomPaasSdk
  // 获取RoomEngine实例
  const roomEngineInstance = RoomEngine.getInstance()
  // 获取设备号deviceId，唯一标识当前设备
  // 在web端，不同的tab页代表不同设备
  const deviceId = roomEngineInstance.getDeviceId()
  const authData = authTokenCallback()
  await authData
    .then((res) => {
      const config = {
        appKey:appKey, // 创建应用时分配的appKey
        appID:appID, // 创建应用时分配的appId
        deviceId, // 设备号
        authTokenCallback: () =>authCallback(res) // 获取登录token的回调函数，需要返回Promise
      }
      // 传入配置
      console.log(config, 'config=====liveWebInit---初始化直播SDK')
      roomEngineInstance.init(config)
      // ${userInfo.uid}'_web' web端授权uid标识
      roomEngineInstance.auth({ uid:`${userInfo.uid}'_web'` })
    })
    .catch(() => {
      return
    })
}
// 获取token
function authTokenCallback() {
  const { RoomEngine, EventNameEnum } = window.RoomPaasSdk
  // 获取RoomEngine实例
  const roomEngineInstance = RoomEngine.getInstance()
  const deviceId = roomEngineInstance.getDeviceId()
  return getLiveAuthToken({
    deviceId:deviceId
  }).then((res) => {
    constdata = res.data
    if (data.code === 0) {
      // 需要保证数据结构符合AuthToken，其定义在下面
      const authToken: AuthToken = data.data// 这里需要根据客户服务端返回的数据结构来决定返回什么属性
      returnauthToken
    }
  })
}
// token回调
function authCallback(data: any) {
  return newPromise((resolve) => {
    resolve(data)
  })
}

第二步：在进入直播前进行sdk初始化
可以在beforeEach中做拦截处理，如果sdk已经初始化过，就不需要重新初始化：config中有直播初始化
// 直播SDK授权

const { RoomEngine, EventNameEnum } = window.RoomPaasSdk
// 获取RoomEngine实例
const roomEngineInstance = RoomEngine.getInstance()
   if (to.fullPath === '/live-management/live-control' && !roomEngineInstance.config) {
      await liveWebInit()
   }

第三步：在直播相关页面创建相关业务处理，创建直播房间后才可以进行弹幕，视频等操作，具体操作可以参考阿里web sdk具体说明

// 初始化直播
const initLiveSdk = () => {
  // 按需解构赋值
  const { RoomEngine } = window.RoomPaasSdk
  // 获取RoomEngine实例
  const roomEngineInstance = RoomEngine.getInstance()
  console.log(roomEngineInstance, 'initLiveSdk===初始化直播')
  if (!initData.info.roomId) {
    return
  }
  // liveInitNum：防止重复挂载事件，重复挂载会造成弹幕重复问题
  if (initData.liveInitNum > 0) {
    return
  }
 // 创建直播房间通道
  const roomChannel = roomEngineInstance.getRoomChannel(initData.info.roomId || '')
  initData.roomChannel = roomChannel
  const nick = '直播小助手'
  initData.liveInitNum++
  // 进入直播房间
  roomChannel.enterRoom(nick).then((res: any) => {
    console.log(res, 'enterRoom===直播间信息')
    // 弹幕组件
      setTimeout(() => {
        chatInfo()
      }, 100)
    // // 直播组件
    // liveInfo()
  })
  .catch(() => {
    initData.liveInitNum = 0
  })
}
// 弹幕组件
const chatInfo = () => {
  const roomChannel = initData.roomChannel
  // 按需解构赋值
  const { EventNameEnum } = window.RoomPaasSdk
  // 获取Chat插件实例
  const chatServiceInstance = roomChannel.getPluginService('chat')
  // 绑定Chat事件，PaaSChatReciveComment函数,监听用户弹幕消息
  chatServiceInstance.on(EventNameEnum.PaaSChatReciveComment, PaaSChatReciveComment)
  // 绑定Chat事件，PaaSChatMuteUser函数,监听禁言某一个用户
  chatServiceInstance.on(EventNameEnum.PaaSChatMuteUser, PaaSChatMuteUser)
  // 绑定Chat事件，PaaSChatMuteAll函数,监听全体禁言
  chatServiceInstance.on(EventNameEnum.PaaSChatMuteAll, PaaSChatMuteAll)
  // PaaSRoomKickUser,监听将用户踢出直播间
  roomChannel.on(EventNameEnum.PaaSRoomKickUser, PaaSRoomKickUser)
  // 获取房间弹幕
  getLiveList()
}

注意点：
1.刷新页面或者热更新会导致web sdk异常，需要再次初始化。所以需要在进入相关页面前做好初始化相关流程
2.在切换界面要销毁相关的功能，例如销毁直播间，视频组件和监听事件。
直播间不能重复创建，每次离开都需要销毁，防止出现异常情况

onBeforeUnmount(() => {
  if (!initData.info.liveId) {
    return
  }
  const roomChannel = initData.roomChannel
  // 按需解构赋值
  const { EventNameEnum } = window.RoomPaasSdk
  // 获取Chat插件实例
  const chatServiceInstance = roomChannel.getPluginService('chat')
  chatServiceInstance.remove(EventNameEnum.PaaSChatReciveComment)
  // 获取Live插件实例
  const liveServiceInstance = roomChannel.getPluginService('live')
  // 销毁播放器
  liveServiceInstance.stopPlay()
  // 离开直播间
  roomChannel && roomChannel.leaveRoom()
})

3.在退出登录时需要登出web sdk。防止数据异常

const { RoomEngine, EventNameEnum } = window.RoomPaasSdk
// 获取RoomEngine实例
const roomEngineInstance = RoomEngine.getInstance()
// 退出直播
roomEngineInstance.logout()

参考文档：后台直播间sdk接入文档：https://help.aliyun.com/document_detail/314284.html