Skip to content

S
standalone-anyremote
Commit 426baedd by qlintonger xeno
Options

眼镜端修复+4

parent ec8a84da
Showing with 66 additions and 39 deletions
src/utils/convertURL.ts 0 → 100644
export function convertURL(string: string) {
return string.replace(/^http:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}/, 'https://ifar.test.com:440')
}
\ No newline at end of file
src/views/remote/videoCall/videoChat.vue
......@@ -13,29 +13,36 @@
<a-col :span="12">
<div class="flex items-center p-1.5 leading-7">
<global-icon :size="16" icon="user-group"></global-icon>
<span class="text-xs ml-1 text-theme-text2">房间已有 {{ chatChannelState.currentChatters.length }} 人</span>
<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 :size="16" icon="mic"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isMicroAttached ? '麦克风已开启' : '麦克风未开启' }}</span>
<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 :size="16" icon="camera"></global-icon>
<span class="text-xs ml-1 text-theme-text2">{{ webrtcStates.isCameraAttached ? '摄像头已开启' : '摄像头未开启' }}</span>
<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" ref="scrollContainer">
<chat-details v-for="q in mapChatMessageQueue" :key="q.record_id" :data="q.data" :is-self="q.isSelf" :type="q.type"></chat-details>
<div ref="scrollContainer" class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0">
<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-tooltip content="发送图片">
<a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
<a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :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 :size="15" icon="image"></global-icon>
......@@ -44,7 +51,8 @@
</a-upload>
</a-tooltip>
<a-tooltip content="发送pdf">
<a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false" accept=".pdf">
<a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :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 :size="15" icon="pdf"></global-icon>
......@@ -53,7 +61,8 @@
</a-upload>
</a-tooltip>
<a-tooltip content="发送视频">
<a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
<a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :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 :size="15" icon="video"></global-icon>
......@@ -62,7 +71,8 @@
</a-upload>
</a-tooltip>
</a-space>
<a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter.prevent="sendMessageText" />
<a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入"
@keydown.enter.prevent="sendMessageText" />
</div>
</div>
</template>
......@@ -77,6 +87,7 @@ import { Message } from '@arco-design/web-vue'
import { userStates } from 'AnyR/states/wsStates'
import { computed, ref } from 'vue'
import { useAnyR } from 'AnyR/index'
import { convertURL } from '@/utils/convertURL.ts'
const textMessage = ref('')
const AnyR = useAnyR()
......@@ -131,13 +142,9 @@ const uploadMuFile = (option: any, type: string) => {
)
}
function convertURL(string: string) {
return string.replace(/^http:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}/, 'https://ifar.test.com:440')
}
const mapChatMessageQueue = computed(function () {
const mapChatMessageQueue = computed(function() {
console.log('mq here', chatChannelState.value.messageQueue)
return chatChannelState.value.messageQueue.map(function (a: any) {
return chatChannelState.value.messageQueue.map(function(a: any) {
return {
isSelf: a.uid === userStates.value.currentUserId,
type: a.type,
......@@ -146,7 +153,7 @@ const mapChatMessageQueue = computed(function () {
fromName: a.fromName,
sendTime: a.happened_time,
message: a.title,
src: convertURL(a.title?.fileUrl as string),
src: convertURL(a.title?.fileUrl || '' as string),
fileName: a.title?.fileName
}
}
......
src/views/remote/videoCall/videoItem.vue
......@@ -101,7 +101,4 @@ onUnmounted(() => {
})
</script>
<style lang="less" scoped>
:deep([data-self='vc'] video), :deep(.agora_video_player) {
transform: none !important;
}
</style>
src/views/remote/videoCall/videoTools.vue
<template>
<div>
<div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto bg-fill-bg1" data-self="remote-main" @mousedown.capture="handleBlinkingStart" ref="remoteVideoRef">
<div :id="`RemoteVideo${ps.id}`" ref="remoteVideoRef" class="relative mb-4 flex-auto bg-fill-bg1"
data-self="remote-main" @mousedown.capture="handleBlinkingStart">
<n-message-provider>
<image-editor
:before-cancel="beforeEndMarkHandle"
......@@ -9,7 +10,7 @@
:show-quit="isScreenShotByCurrentUser"
:start="chatChannelState.displayImageEditor"
:target="firstVideoToBeAttached"
:url-image="chatChannelState.screenshotURL"
:url-image="convertURL(chatChannelState.screenshotURL)"
@cancel="reallyEndMarkHandle"
@first-paint-done="initialPaintDone"
@canvas-saved="paintSaved"
......@@ -28,19 +29,22 @@
></div>
<template v-if="isVideoVisible">
<div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
<div v-if="userDataForThis.userCallGroup == 1" class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
<div v-if="userDataForThis.userCallGroup == 1"
class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
{{ userDataForThis.name }}
</div>
<div v-else class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
<div v-else class="text-xs px-2 rounded-sm leading-5"
style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
{{ userDataForThis.name }}
</div>
<div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
<global-icon v-if="!isCenterUserMuted" :size="12" color="rgb(var(--success-6))" :icon="'mic'"></global-icon>
<global-icon v-else :size="12" :icon="'mic-off'"></global-icon>
<global-icon v-if="!isCenterUserMuted" :icon="'mic'" :size="12"
color="rgb(var(--success-6))"></global-icon>
<global-icon v-else :icon="'mic-off'" :size="12"></global-icon>
</div>
</div>
</template>
<div class="absolute w-full h-full flex-center" v-else>
<div v-else class="absolute w-full h-full flex-center">
<video-loader></video-loader>
</div>
</div>
......@@ -54,7 +58,7 @@
<span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
</div>
<div class="w-[120px] h-[72px] item" @click="toggleMute">
<global-icon :size="21" :icon="isCurrentUserMuted ? 'mic-off' : 'mic'"></global-icon>
<global-icon :icon="isCurrentUserMuted ? 'mic-off' : 'mic'" :size="21"></global-icon>
<span class="mt-1 color-text-2">{{ isCurrentUserMuted ? '取消静音' : '静音' }}</span>
</div>
<div class="w-[120px] h-[72px] item" @click="toggleVoiceChatOnly">
......@@ -68,12 +72,16 @@
<div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
<global-icon :size="21" icon="shared-screen"></global-icon>
<span class="mt-1 color-text-2">
{{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享' }}
{{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享'
}}
</span>
</div>
<div class="w-[120px] h-[72px] item" @click="toggleRecording">
<global-icon :size="21" :icon="!chatChannelState.recordingData.id ? 'record' : 'record-stop'"></global-icon>
<span class="mt-1 color-text-2">{{ !chatChannelState.recordingData.id ? '开始录制' : chatChannelState.recordingData.id === userStates.currentUserId ? '结束录制' : '他人正在录制' }}</span>
<global-icon :icon="!chatChannelState.recordingData.id ? 'record' : 'record-stop'"
:size="21"></global-icon>
<span
class="mt-1 color-text-2">{{ !chatChannelState.recordingData.id ? '开始录制' : chatChannelState.recordingData.id === userStates.currentUserId ? '结束录制' : '他人正在录制'
}}</span>
</div>
<div v-if="isUserHost" class="w-[120px] h-[72px] item" @click="allMute">
<global-icon :size="21" icon="mic-off"></global-icon>
......@@ -90,13 +98,22 @@
<script lang="ts" setup>
import { useAnyR } from 'AnyR/index'
import { NMessageProvider } from 'naive-ui'
import { allOtherChattersIdSet, chatChannelState, isCurrentUserMuted, isScreenShotByCurrentUser, isUserHost, screenShareMetaData, screenshotRecord } from 'AnyR/states/chatChannelStates'
import {
allOtherChattersIdSet,
chatChannelState,
isCurrentUserMuted,
isScreenShotByCurrentUser,
isUserHost,
screenShareMetaData,
screenshotRecord
} from 'AnyR/states/chatChannelStates'
import { onMounted, onUpdated, ref } from 'vue'
import { userStates } from 'AnyR/states/wsStates'
import ImageEditor from 'AnyR/widgets/ImageEditor/imageEditor.vue'
import { Message, Modal } from '@arco-design/web-vue'
import { alova } from '@/api/alova-instance.ts'
import VideoLoader from './videoLoader.vue'
import { convertURL } from '@/utils/convertURL.ts'
const ps = defineProps<{
id: any
......@@ -123,12 +140,12 @@ async function toggleRecording() {
}
}
const isCenterUserMuted = computed(function () {
const isCenterUserMuted = computed(function() {
return chatChannelState.value.mutedUserIdSet.includes(ps.id)
})
const firstVideoToBeAttached = ref('[data-self="remote-main"] video')
const recordListener = function (records: any) {
const recordListener = function(records: any) {
AnyR?.agora.continueMark(records)
}
......@@ -183,7 +200,7 @@ function paintSaved(blob: any) {
async function beforeEndMarkHandle() {
if (isScreenShotByCurrentUser.value) {
return new Promise(function (resolve) {
return new Promise(function(resolve) {
Modal.warning({
title: '退出确认',
content: '你是截图发起者，退出后将会要求其他用户一同退出，确认？',
......@@ -233,7 +250,7 @@ function handleBlinkingStart($e: PointerEvent) {
})
}
const userDataForThis = computed(function () {
const userDataForThis = computed(function() {
const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
return {
name: userNow?.fromName || '--',
......@@ -249,12 +266,12 @@ const checkVideoExists = () => {
isVideoVisible.value = video ? true : false
}
const observer = new MutationObserver(checkVideoExists)
onMounted(function () {
onMounted(function() {
AnyR?.agora.forceReplay(ps.id)
observer.observe(remoteVideoRef.value, { childList: true, subtree: true })
})
onUpdated(function () {
onUpdated(function() {
AnyR?.agora.forceReplay(ps.id)
})
......@@ -276,7 +293,8 @@ function toggleScreenShare() {
AnyR?.agora.screenShareHandle()
}
AnyR?.agora.screenShareHandle()
AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {})
AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {
})
}
function allMute() {
......@@ -298,7 +316,7 @@ function hangupCall() {
</script>
<style lang="less" scoped>
.item {
@apply flex-center flex-col rounded cursor-pointer;
@apply flex-center flex-col rounded cursor-pointer;
&:hover {
background-color: var(--color-fill-2);
......@@ -324,6 +342,7 @@ function hangupCall() {
opacity: 1;
}
}
:deep([data-self='remote-main'] video) {
transform: none !important;
}
......
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