Skip to content

S
standalone-anyremote
Commit 0cd1cbbc by qlintonger xeno
Options

添加内容+10

parent c17988d2
Showing with 77 additions and 38 deletions
anyremote/functionals/callMsg.js
......@@ -14,22 +14,25 @@ export function handleCommonCall(msgData) {
}
}
function convertTypeLocally(item) {
if (item === 'ChatTxt')
function convertTypeLocally(data) {
if (data.msgType === 'ChatTxt')
return 'txt'
if (['ChatImage', 'StoreScreenShareMark', 'ArchiveImage'].includes(item)) {
if (['ChatImage', 'StoreScreenShareMark', 'ArchiveImage'].includes(data.msgType)) {
return 'image'
}
if (item === 'ChatVideo')
if (data.msgType === 'ChatVideo')
return 'video'
if (item === 'ChatAudio')
if (data.msgType === 'ChatAudio')
return 'audio'
if (data.msgType.endsWith('.pdf')) {
return 'pdf'
}
return 'file'
}
export function addMessageItemInMeeting(data) {
const toBeMerged = {
type: convertTypeLocally(data.msgType),
type: convertTypeLocally(data),
title: data.msgData.tip,
from_name: data.fromName ? decodeURIComponent(data.fromName)
: data.msgData.fromName ? decodeURIComponent(data.msgData.fromName)
......
src/views/remote/contacts/multiCallModel.vue
......@@ -21,8 +21,10 @@ import contactsListChoose from './contactsListChoose.vue'
import { cloneDeep } from 'lodash'
import { videoGroup } from '@/constants/common/user'
import useUserStore from '@/store/user'
import {useAnyR} from "AnyR/index";
const userStore = useUserStore()
const anyR = useAnyR();
//选中的联系人数组id
const chooseUserIds = ref([])
const showModel = ref(false)
......@@ -50,7 +52,9 @@ const getUserListGroup = computed(() => {
})
//多人呼叫
const multiCall = () => {
console.log(chooseUserIds.value)
console.log(chooseUserIds.value);
anyR?.agora.sendCallRequest(chooseUserIds.value.join(','));
showModel.value = false;
}
defineExpose({
open
......
src/views/remote/videoCall/chatDetails.vue
......@@ -9,7 +9,7 @@
<p class="text-theme-text3">{{ data.sendTime || '' }}</p>
</div>
<!-- 聊天信息 -->
<template v-if="type == 'text'">
<template v-if="type == 'txt'">
<div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="p-4 rounded leading-[22px] text-theme-text1">{{ data.message || '' }}</div>
</template>
<template v-else-if="type == 'image'">
......@@ -19,7 +19,7 @@
<div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="py-[10px] px-3 rounded flex-center justify-between leading-[22px] text-theme-text1 w-full">
<div class="flex-center">
<global-icon icon="file"></global-icon>
<span class="ml-3">{{ (data.fileName || '') + '.pdf' }}</span>
<span class="ml-3">{{ (data.fileName || '') }}</span>
</div>
<global-icon icon="download" class="cursor-pointer"></global-icon>
</div>
......@@ -34,12 +34,12 @@
<script setup lang="ts">
interface Props {
isSelf?: boolean
type?: 'text' | 'image' | 'pdf' | 'video'
type?: 'txt' | 'image' | 'pdf' | 'video'
data?: any
}
const ps = withDefaults(defineProps<Props>(), {
isSelf: false,
type: 'text',
type: 'txt',
data: {}
})
</script>
......
src/views/remote/videoCall/videoChat.vue
<template>
<div class="g-block ml-4 pb-0">
<div class="px-4 h-[300px]">
<video-item :is-self="true" :id="''"></video-item>
<video-item :id="''" :is-self="true"></video-item>
</div>
<a-row class="mt-2 px-4">
<a-col :span="12">
<div class="flex items-center p-1.5 leading-7">
<global-icon icon="wifi" :size="16"></global-icon>
<global-icon :size="16" icon="wifi"></global-icon>
<span class="text-xs ml-1 text-theme-text2">网络状态{{ NetworkQualityLevel.label }}</span>
</div>
</a-col>
<a-col :span="12">
<div class="flex items-center p-1.5 leading-7">
<global-icon icon="user-group" :size="16"></global-icon>
<span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length }} 人</span>
<global-icon :size="16" icon="user-group"></global-icon>
<span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length
}} 人</span>
</div>
</a-col>
<a-col :span="12">
<div class="flex items-center p-1.5 leading-7">
<global-icon icon="mic" :size="16"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启' }}</span>
<global-icon :size="16" icon="mic"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{
webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启'
}}</span>
</div>
</a-col>
<a-col :span="12">
<div class="flex items-center p-1.5 leading-7">
<global-icon icon="camera" :size="16"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启' }}</span>
<global-icon :size="16" icon="camera"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{
webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启'
}}</span>
</div>
</a-col>
</a-row>
<div class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0">
<chat-details></chat-details>
<chat-details isSelf type="image"></chat-details>
<chat-details type="pdf"></chat-details>
<chat-details isSelf></chat-details>
<chat-details type="image"></chat-details>
<chat-details isSelf type="pdf"></chat-details>
<chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf"
:type="q.type"></chat-details>
</div>
<div class="px-4 py-2">
<a-space size="medium">
<a-upload :show-file-list="false" accept="image/*" :custom-request="uploadMuFile">
<a-upload :custom-request="uploadMuFile" :show-file-list="false" accept="image/*">
<template #upload-button>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
<global-icon icon="image" :size="15"></global-icon>
<global-icon :size="15" icon="image"></global-icon>
</div>
</template>
</a-upload>
<a-upload :show-file-list="false" accept=".pdf" :custom-request="uploadMuFile">
<a-upload :custom-request="uploadMuFile" :show-file-list="false" accept=".pdf">
<template #upload-button>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
<global-icon icon="pdf" :size="15"></global-icon>
<global-icon :size="15" icon="pdf"></global-icon>
</div>
</template>
</a-upload>
<a-upload :show-file-list="false" accept="video/*" :custom-request="uploadMuFile">
<a-upload :custom-request="uploadMuFile" :show-file-list="false" accept="video/*">
<template #upload-button>
<div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
<global-icon icon="video" :size="15"></global-icon>
<global-icon :size="15" icon="video"></global-icon>
</div>
</template>
</a-upload>
</a-space>
<a-textarea class="h-16 mt-2" placeholder="请输入" allow-clear />
<a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入"
@keydown.enter="sendMessageText" />
</div>
</div>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import VideoItem from './videoItem.vue'
import ChatDetails from './chatDetails.vue'
import { webrtcStates } from 'AnyR/states/webrtcStates'
import { NetworkQualityLevel, webrtcStates } from 'AnyR/states/webrtcStates'
import { chatChannelState } from 'AnyR/states/chatChannelStates'
import { NetworkQualityLevel } from 'AnyR/states/webrtcStates'
import { alova } from '@/api/alova-instance'
import { Message } from '@arco-design/web-vue'
import { userStates } from 'AnyR/states/wsStates'
import { computed, ref } from 'vue'
import { useAnyR } from 'AnyR/index'
const textMessage = ref('')
const AnyR = useAnyR()
function sendMessageText() {
if (textMessage.value.length) {
AnyR?.agora.sendTextInChatRoom(textMessage.value)
textMessage.value = ''
} else {
Message.warning('不能发送空消息！')
}
}
const uploadMuFile = (option: any) => {
const { onError, onSuccess, fileItem } = option
const { onError, fileItem } = option
const params = {
apiPwd: 'Ifar$2_0160_525_Mocp',
file: fileItem.file,
......@@ -87,7 +103,7 @@ const uploadMuFile = (option: any) => {
.Post<any>('/admin/uploadMuFile', params, { meta: { isUpload: true } })
.then((res) => {
if (res.code == 200) {
onSuccess(res)
console.log('发送内容', res)
Message.success('发送成功')
} else {
onError(new Error('Upload failed'))
......@@ -97,7 +113,23 @@ const uploadMuFile = (option: any) => {
.catch((error) => {
onError(error)
}) as any
};
}
const mapChatMessageQueue = computed(function() {
return chatChannelState.value.messageQueue.map(function(a: any) {
return {
isSelf: a.uid === userStates.value.currentUserId,
type: a.type,
record_id: a.record_id,
data: {
fromName: a.fromName,
sendTime: a.happened_time,
message: a.title,
src: a.url,
fileName: a.title
}
}
})
})
</script>
<style lang="less" scoped>
.chat-list {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment