实时音视频高级定制能力

TUICallKit 采用模块化架构设计，核心功能标准化，交互界面定制化，深度解耦音视频通话核心能力与界面呈现层。开发者可基于标准接口保留基础通话功能，同时通过灵活的UI组件替换机制，快速适配各业务场景的差异化界面需求。本文主要介绍，在保留核心通话能力的基础上，如何快速实现功能模块的自定义。
应用场景
若您的业务场景仅需显示用户的视频流，并依赖内部通话状态与设备状态管理，而无需集成其他功能按钮，则此方案尤为适用，能够帮助您实现高度定制化的界面效果。
音频通话加载简单按钮
视频通话加载复杂布局
﻿
﻿
﻿
﻿
实现自定义 UI
新增自定义 UI 页面
1. 在 uni_modules/TencentCloud-Call 目录下新建 index.nvue 页面：
注意：
使用原生能力，需要是 nvue 页面，vue 页面无法正常使用。
﻿
2. 在 page.json 文件中新增页面配置：
﻿
引入 callView 组件
说明：
<call-view/> 是管理显示用户的视频流，内部通话状态与设备状态的原生组件。
在新建的 index.nvue 页面中引入 callView 组件：
<template>
  <view>
    <call-view :style="callViewStyle" />
  </view>
</template>
<script setup lang="ts">
const callViewStyle = computed(() => {
  return {
    width: uni.getWindowInfo().windowWidth + 'px',
    height: uni.getWindowInfo().windowHeight + 'px',
  }
})
</script>
添加简单按钮
<template>
  <view>
    <call-view :style="callViewStyle" />
    <button :style="{position: 'absolute',bottom: '10px' }"></button>
  </view>
</template>
<script setup lang="ts">
const callViewStyle = computed(() => {
  return {
    width: uni.getWindowInfo().windowWidth + 'px',
    height: uni.getWindowInfo().windowHeight + 'px',
  }
})
</script>
添加复杂 UI 也是和上面一致，自实现 UI 引入到这个文件中来进行渲染。
使用基本通话功能
<template>
  <view>
    <call-view :style="callViewStyle" />
    <button :style="{position: 'absolute',bottom: '10px' }" @tap="handleStartCall"></button>
  </view>
</template>
<script setup lang="ts">
import { onMounted, onUnMounted, ref } from "vue";
import { CallEngine } from "@/uni_modules/TencentCloud-Call";
const callEngine = new CallEngine();
const callViewStyle = computed(() => {
  return {
    width: uni.getWindowInfo().windowWidth + 'px',
    height: uni.getWindowInfo().windowHeight + 'px',
  }
})
﻿
// 可以根据不同的 CallStatus 来进行不同的按钮状态展示，CallStatus 有 IDLE、CALLING、CONNECTED 三种状态
const callStatus = ref('IDLE')
onMounted(() => {
  callEngine.login({
    SDKAppID: 0,
    userID: '12345',
    userSig: '',
  })
  callEngine.on("onCallBegin", (res) => {
    callStatus.value = 'CONNECTED'
  })
  callEngine.on("onCallEnd", (res) => {
    callStatus.value = 'IDLE'
  })
});
﻿
onUnMounted(() => {
  callEngine.off("onCallBegin", (res) => {
    console.log(res)
  })
  callEngine.off("onCallEnd", (res) => {
    console.log(res)
  })
});
﻿
﻿
const handleStartCall = () => {
  callEngine.calls({
    userIDList: ['456'],
    mediaType: 1, // 1 为语音通话，2为视频通话
  })
  callStatus.value = 'CALLING'
}
</script>
﻿
﻿
更多接口使用请参见 call-engine。
﻿
音频通话加载简单按钮	视频通话加载复杂布局
高级定制能力

本页目录：

应用场景

实现自定义 UI

新增自定义 UI 页面

引入 callView 组件

添加简单按钮

使用基本通话功能
