实时音视频服务 FunctionCode | SER-B003

LkUiVideoCall 结合即时通信、实时音视频能力，为您提供含 UI 的低代码组件，您只需要编写几行代码就可以为您的应用添加音视频通话功能

组件介绍(WEB端)

PC-房间未进入成员前 / PC-成员进入房间后

H5-房间未进入成员前 / H5-成员进入房间后

组件功能

功能	功能描述
1v1实时音视频通话	一对一进行视频聊天
群组实时视频通话	多人同时进行视频通话

组件属性

名称	描述	类型	必填
token	授权码	string	是
roomId	房间号	string	是
userId	用户id	string	是
width	组件宽度	string	是
height	组件高度	string	是

注意

如果 token 字段为空时不要初始化组件, 当获取到 token 后在进行初始化

组件事件

名称	描述	类型	参数
join	本地流推送成功，进房成功回调	EventHandle	空
leave	离开房间（挂断）事件	EventHandle	空
handleLocaleMute	本地用户静音事件回调	EventHandle	空
error	错误事件	EventHandle	ErrorOptions

ErrorOptions

名称	描述	类型
code	错误码	VIDEO_ERROR_CODE
error	错误信息	object
result	错误信息	object
name	错误具体原因（code为INITIALIZE_LOCALE_STREAM_FAILD时才有值）	string

错误码

const enum VIDEO_ERROR_CODE {
  // 不支持TRTC
  UNSUPPORTED = 500,
  // 初始化本地流失败
  INITIALIZE_LOCALE_STREAM_FAILD = 501,
  // 推流失败
  PUBLISH_FAILD = 502,
  // 进房失败
  JOIN_ROOM_FAILED = 503
}

注意

如果 ErrorOptions 中ErrorOptions.code字段为空时，可以通过ErrorOptions.error 或者 ErrorOptions.result 来判断具体原因

安装

npm install @lkcloud/video-call-ui

使用

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { LkUIVideoCall } from '@lkcloud/video-call-ui'

const token = ref('')
const userId = ref('')
const roomId = ref('')

onMounted(async () => {
  // 此处对接自己的后端服务获取token
  await getToken()
  token.value = "XXXXXXXXXXXX"
  useId.value = "XXXXXXXXXXXX"
  roomId.value = "XXXXXXXXXXXX"
})
const join = () => {
  console.log('加入房间成功')
}
const error = (e: any) => {
  console.log('error', e)
}
const leave = () => {
  console.log('离开房间')
}
</script>

<template>
  <div>
    <LkUIVideoCall
      v-if="token"
      width="700px"
      height="700px"
      :userId="userId"
      :roomId="roomId"
      :token="token"
      @join="join"
      @error="error"
      @leave="leave"
    />
  </div>
</template>

常见问题

描述	解决方案
没有画面或者声音	请检查设备摄像头和麦克风是否可用，根据 @error 事件回调错误详情，排查具体问题