音视频通话开发

TUIKit/components/TUIChat/index.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="chat" :style="{ marginBottom: keywordHight + 'px' }">
-    <!-- #ifdef H5 -->
-    <!-- <TUICallKit></TUICallKit> -->
-    <!-- #endif -->
     <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
       <div
         v-if="!currentConversationID"
@@ -105,9 +102,6 @@
     TUIConstants,
     ExtensionInfo
   } from '@tencentcloud/tui-core-lite'
-  //  #ifdef H5
-  // import { TUICallKit } from '@trtc/calls-uikit-vue'
-  // #endif
   import ChatHeader from './chat-header/index.vue'
   import MessageList from './message-list/index.vue'
   import MessageInput from './message-input/index.vue'

TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+  import custom from '../../../../assets/icon/telephone-icon.svg'
+  import videoIcon from '../../../../assets/icon/video-icon.svg'
+  import { isUniFrameWork } from '../../../../utils/env'
+  import { computed } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      /** 通话状态： 0 语音 1 视频 */
+      type?: '0' | '1'
+    }>(),
+    {
+      type: '0'
+    }
+  )
+
+  /** 语音通话状态 */
+  const isType = computed(() => props.type === '0')
+
+  const evaluateIcon = isType.value ? custom : videoIcon
+
+  const emits = defineEmits(['onDialogPopupShowOrHide'])
+
+  const onDialogShow = () => {
+    console.log('弹出窗口')
+    emits('onDialogPopupShowOrHide', true)
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+    emits('onDialogPopupShowOrHide', false)
+  }
+</script>
+
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
+    :iconFile="evaluateIcon"
+    :iconWidth="isUniFrameWork ? '34px' : '20px'"
+    :iconHeight="isUniFrameWork ? '34px' : '20px'"
+    :title="isType ? '语音通话' : '视频通话'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    测试通话
+  </ToolbarItemContainer>
+</template>
+
+<style scoped lang="scss" src="./style/index.scss"></style>

TUIKit/components/TUIChat/message-input-toolbar/index.vue

@@ -65,9 +65,14 @@
           /> -->
           <!-- 红包 -->
           <RedEnvelope @onDialogPopupShowOrHide="handleSwiperDotShow" />
-
+          <!-- 语音通话 -->
+          <CallView @onDialogPopupShowOrHide="handleSwiperDotShow" />
+          <!-- 视频通话 -->
+          <CallView
+            type="1"
+            @onDialogPopupShowOrHide="handleSwiperDotShow"
+          />
           <!-- 直播按钮 -->
-
           <!-- #ifdef APP-PLUS -->
           <LiveStream
             v-if="
@@ -147,6 +152,7 @@
   import CameraUpload from './camera-upload/index.vue'
   import Evaluate from './evaluate/index.vue'
   import RedEnvelope from './red-envelope/index.vue'
+  import CallView from './call-view/index.vue'
   import LiveStream from './live-stream/index.vue'
   import Words from './words/index.vue'
   import ToolbarItemContainer from './toolbar-item-container/index.vue'