音视频通话开发
This commit is contained in:
cbb
1
TUIKit/assets/icon/telephone-icon.svg
Normal file
1
TUIKit/assets/icon/telephone-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770198199625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11080" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M704.745199 914.322101c-53.991434 0-123.694545-35.966707-172.661656-66.147556-65.577374-40.409212-136.22303-96.314182-198.930101-157.408969l-0.226263-0.226263-19.909818-19.913697c-61.098667-62.700606-116.997172-133.351434-157.411556-198.928808-30.175677-48.967111-66.147556-118.670222-66.147555-172.661656 0-57.775838 41.315556-119.099475 59.079111-142.782061 13.858909-18.482424 62.285576-78.785939 103.429172-78.785939 16.896 0 35.091394 11.058424 59.004121 35.858101 21.149737 21.928081 41.446141 49.184323 54.745212 68.190383 17.864404 25.51596 34.382869 52.230465 46.520889 75.229091 19.655111 37.235071 21.928081 53.202747 21.928081 61.97398 0 17.702788-9.24703 33.057616-27.478627 45.635232-12.006141 8.279919-26.417131 14.514424-40.352323 20.54594-9.399596 4.06497-24.409212 10.554182-30.134303 15.119515 1.998869 8.458343 10.728727 28.887919 34.320808 63.525495 21.98497 32.274101 50.411313 67.250424 76.094061 93.624889 26.369293 25.678869 61.341737 54.109091 93.624889 76.09406 34.627232 23.58303 55.055515 32.318061 63.520323 34.315637 4.560162-5.723798 11.054545-20.730828 15.119515-30.129132 6.026343-13.937778 12.260848-28.348768 20.545939-40.356202 12.577616-18.231596 27.933737-27.473455 45.635233-27.473454 8.772525 0 24.736323 2.27297 61.979151 21.922909 22.994747 12.139313 49.713131 28.657778 75.226505 46.520889 19.003475 13.304242 46.26101 33.599354 68.194263 54.745212 24.794505 23.912727 35.852929 42.106828 35.852929 59.004121 0 41.143596-60.299636 89.570263-78.780767 103.430465-23.687758 17.763556-85.011394 59.077818-142.787233 59.077818M367.752229 655.485414z m316.783192-35.745616" fill="#707070" p-id="11081"></path><path d="M661.823825 478.178263c-8.622545 0-16.262465-6.181495-17.811393-14.96695-4.430869-25.13196-18.984081-46.968242-40.976809-61.482667-22.305616-14.722586-49.568323-20.190384-76.775434-15.393616-9.853414 1.73899-19.241374-4.839434-20.976485-14.687676-1.736404-9.849535 4.839434-19.241374 14.687677-20.979071 36.364929-6.411636 72.947071 0.987798 103.014141 20.83297 30.382545 20.053333 50.517333 50.389333 56.693657 85.421252 1.735111 9.848242-4.840727 19.241374-14.690263 20.976485-1.062788 0.188768-2.121697 0.279273-3.165091 0.279273zM770.839745 431.416889c-8.623838 0-16.263758-6.181495-17.812687-14.968243-8.599273-48.770586-36.77996-91.10497-79.349657-119.202909-42.885172-28.304808-95.238465-38.826667-147.415919-29.627474-9.852121 1.736404-19.241374-4.839434-20.976485-14.687677-1.736404-9.848242 4.838141-19.241374 14.687677-20.976485 61.336566-10.816646 123.008 1.636848 173.655919 35.065535 50.959515 33.635556 84.723071 84.470949 95.067798 143.141495 1.736404 9.848242-4.840727 19.241374-14.68897 20.977778-1.066667 0.186182-2.124283 0.27798-3.167676 0.27798z" fill="#707070" p-id="11082"></path><path d="M916.389967 417.914828c-8.623838 0-16.263758-6.181495-17.812687-14.968242-14.673455-83.229737-62.722586-155.446303-135.292121-203.344162-72.88501-48.10602-161.812687-65.99499-250.395152-50.376404-9.850828 1.737697-19.241374-4.839434-20.976485-14.687677-1.736404-9.849535 4.839434-19.241374 14.687677-20.97907 97.742869-17.232162 195.987394 2.587152 276.633859 55.815757 80.959354 53.435475 134.588768 134.151758 151.008969 227.282748 1.735111 9.848242-4.840727 19.240081-14.690262 20.976485-1.061495 0.190061-2.120404 0.280566-3.163798 0.280565z" fill="#707070" p-id="11083"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
1
TUIKit/assets/icon/video-icon.svg
Normal file
1
TUIKit/assets/icon/video-icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770198302954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14190" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M938.667 368.213L813.653 440.32v221.013l125.014 72.107a42.667 42.667 0 0 0 64.853-37.547V405.76a42.667 42.667 0 0 0-64.853-37.547zM650.24 206.933H147.2a128 128 0 0 0-125.867 125.44v405.334a128 128 0 0 0 128 125.866H650.24a128 128 0 0 0 128-125.866V332.373a128 128 0 0 0-128-125.44zM199.68 426.667a47.36 47.36 0 1 1 46.933-46.934 47.36 47.36 0 0 1-46.933 46.934z" p-id="14191" fill="#707070"></path></svg>
|
||||
|
After Width: | Height: | Size: 736 B |
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user