完善了通话与桌面预览功能
This commit is contained in:
kura
parent
cb40ea89a7
commit
19b9621dee
@ -21,11 +21,21 @@
|
||||
</div>
|
||||
|
||||
<div class="connect-section">
|
||||
<div v-if="isConnected" class="connect-section">
|
||||
<div class="connect-item" @click="requestDesktop">
|
||||
<div class="connect-actions">
|
||||
<div
|
||||
class="connect-item"
|
||||
:class="{ disabled: !isConnected, active: isDesktopActive }"
|
||||
title="桌面预览"
|
||||
@click="requestDesktop"
|
||||
>
|
||||
<img src="/static/desktop.png" alt="桌面" />
|
||||
</div>
|
||||
<div class="connect-item" @click="requestCall">
|
||||
<div
|
||||
class="connect-item"
|
||||
:class="{ disabled: !isConnected, active: isCallActive }"
|
||||
title="语音通话"
|
||||
@click="requestCall"
|
||||
>
|
||||
<img src="/static/phone.png" alt="通话" />
|
||||
</div>
|
||||
</div>
|
||||
@ -103,6 +113,8 @@ const receiveLoading = ref(false);
|
||||
const myId = ref("");
|
||||
const targetId = ref("");
|
||||
const isConnected = ref(false);
|
||||
const isDesktopActive = ref(false);
|
||||
const isCallActive = ref(false);
|
||||
// 文件系统相关
|
||||
const selectedLocalFiles = ref<string[]>([]);
|
||||
const selectedRemoteFiles = ref<string[]>([]);
|
||||
@ -112,9 +124,19 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const requestDesktop = () => {
|
||||
if (!isConnected.value) return;
|
||||
if (isDesktopActive.value) {
|
||||
peer.endMedia(sign2peerid(targetId.value), "desktop");
|
||||
return;
|
||||
}
|
||||
peer.requestDesktop(targetId.value);
|
||||
};
|
||||
const requestCall = () => {
|
||||
if (!isConnected.value) return;
|
||||
if (isCallActive.value) {
|
||||
peer.endMedia(sign2peerid(targetId.value), "call");
|
||||
return;
|
||||
}
|
||||
peer.requestCall(targetId.value);
|
||||
};
|
||||
const shareUrl = async () => {
|
||||
@ -233,6 +255,8 @@ onMounted(() => {
|
||||
|
||||
peer.on("peer-disconnected", ((event: CustomEvent) => {
|
||||
isConnected.value = peer.remoteConnection?.open;
|
||||
isDesktopActive.value = false;
|
||||
isCallActive.value = false;
|
||||
notification.error({
|
||||
message: event.detail.peer + "连接已断开",
|
||||
});
|
||||
@ -244,6 +268,36 @@ onMounted(() => {
|
||||
});
|
||||
console.error("连接错误:", event.detail);
|
||||
}) as EventListener);
|
||||
|
||||
peer.on("stream", ((event: CustomEvent) => {
|
||||
if (event.detail.peerId !== sign2peerid(targetId.value)) return;
|
||||
if (event.detail.type === "desktop") {
|
||||
isDesktopActive.value = true;
|
||||
} else if (event.detail.type === "call") {
|
||||
isCallActive.value = true;
|
||||
}
|
||||
}) as EventListener);
|
||||
|
||||
peer.on("desktop-started", ((event: CustomEvent) => {
|
||||
if (event.detail.peerId === sign2peerid(targetId.value)) {
|
||||
isDesktopActive.value = true;
|
||||
}
|
||||
}) as EventListener);
|
||||
|
||||
peer.on("call-started", ((event: CustomEvent) => {
|
||||
if (event.detail.peerId === sign2peerid(targetId.value)) {
|
||||
isCallActive.value = true;
|
||||
}
|
||||
}) as EventListener);
|
||||
|
||||
peer.on("media-ended", ((event: CustomEvent) => {
|
||||
if (event.detail.peerId !== sign2peerid(targetId.value)) return;
|
||||
if (event.detail.type === "desktop") {
|
||||
isDesktopActive.value = false;
|
||||
} else if (event.detail.type === "call") {
|
||||
isCallActive.value = false;
|
||||
}
|
||||
}) as EventListener);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -284,11 +338,31 @@ onMounted(() => {
|
||||
.connect-item:hover {
|
||||
background: #cae5f9;
|
||||
}
|
||||
.connect-item.active {
|
||||
background: #b7eb8f;
|
||||
border-color: #52c41a;
|
||||
}
|
||||
.connect-item.active:hover {
|
||||
background: #95de64;
|
||||
}
|
||||
.connect-item.disabled {
|
||||
background: #f0f0f0;
|
||||
border-color: #d9d9d9;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.connect-item.disabled:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.connect-item.disabled img {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.connect-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.connect-actions,
|
||||
.connect-section {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="desktop-view-wrapper"
|
||||
:class="{ 'is-collapsed': isCollapsed, 'has-stream': !!stream }"
|
||||
:class="{
|
||||
'is-collapsed': isCollapsed,
|
||||
'has-stream': hasMedia,
|
||||
'has-call-only': !!callStream && !desktopStream,
|
||||
}"
|
||||
>
|
||||
<div class="collapse-header" v-if="stream" @click="toggleCollapse">
|
||||
<span>远程桌面{{ isCollapsed ? "(已收起)" : "" }}</span>
|
||||
<div class="collapse-header" v-if="hasMedia" @click="toggleCollapse">
|
||||
<span>{{ headerTitle }}{{ isCollapsed ? "(已收起)" : "" }}</span>
|
||||
<a-button type="link">
|
||||
<template #icon>
|
||||
<UpOutlined v-if="!isCollapsed" />
|
||||
@ -12,32 +16,46 @@
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="desktop-view" :class="{ 'is-fullscreen': isFullscreen }">
|
||||
<div
|
||||
v-if="desktopStream"
|
||||
class="desktop-view"
|
||||
:class="{ 'is-fullscreen': isFullscreen }"
|
||||
>
|
||||
<div class="video-container" ref="videoContainer">
|
||||
<video ref="videoRef" autoplay playsinline></video>
|
||||
<div class="controls" v-if="stream">
|
||||
<div class="controls">
|
||||
<a-button
|
||||
type="primary"
|
||||
ghost
|
||||
:icon="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
{{ isFullscreen ? "退出全屏" : "全屏" }}
|
||||
</a-button>
|
||||
<a-button danger ghost @click="endDesktop">结束桌面</a-button>
|
||||
</div>
|
||||
<div v-if="!stream" class="no-signal">
|
||||
<a-empty description="等待远程桌面共享..." />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="callStream" class="call-view">
|
||||
<audio ref="audioRef" autoplay playsinline></audio>
|
||||
<div class="call-info">
|
||||
<PhoneOutlined />
|
||||
<span>语音通话中</span>
|
||||
</div>
|
||||
<div class="call-controls">
|
||||
<a-button ghost @click="toggleCallMuted">
|
||||
{{ isCallMuted ? "取消静音" : "静音" }}
|
||||
</a-button>
|
||||
<a-button danger ghost @click="endCall">结束通话</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { computed, nextTick, ref, onMounted, onUnmounted } from "vue";
|
||||
import { peer } from "../utils/peer";
|
||||
import { message } from "ant-design-vue";
|
||||
import { UpOutlined, DownOutlined } from "@ant-design/icons-vue";
|
||||
import { UpOutlined, DownOutlined, PhoneOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
const props = defineProps<{
|
||||
peerId: string;
|
||||
@ -59,10 +77,20 @@ interface MediaEndedEvent extends CustomEvent {
|
||||
}
|
||||
|
||||
const videoRef = ref<HTMLVideoElement | null>(null);
|
||||
const audioRef = ref<HTMLAudioElement | null>(null);
|
||||
const videoContainer = ref<HTMLElement | null>(null);
|
||||
const stream = ref<MediaStream | null>(null);
|
||||
const desktopStream = ref<MediaStream | null>(null);
|
||||
const callStream = ref<MediaStream | null>(null);
|
||||
const isFullscreen = ref(false);
|
||||
const isCollapsed = ref(false);
|
||||
const isCallMuted = ref(false);
|
||||
|
||||
const hasMedia = computed(() => !!desktopStream.value || !!callStream.value);
|
||||
const headerTitle = computed(() => {
|
||||
if (desktopStream.value && callStream.value) return "远程桌面与通话";
|
||||
if (desktopStream.value) return "远程桌面";
|
||||
return "语音通话";
|
||||
});
|
||||
|
||||
// 切换收起/展开状态
|
||||
const toggleCollapse = () => {
|
||||
@ -70,13 +98,27 @@ const toggleCollapse = () => {
|
||||
};
|
||||
|
||||
// 处理远程流
|
||||
const handleStream = (event: StreamEvent) => {
|
||||
const handleStream = async (event: StreamEvent) => {
|
||||
const { stream: remoteStream, type } = event.detail;
|
||||
if (props.peerId !== event.detail.peerId) return;
|
||||
if (type === "desktop" && videoRef.value) {
|
||||
stream.value = remoteStream;
|
||||
videoRef.value.srcObject = remoteStream;
|
||||
if (type === "desktop") {
|
||||
desktopStream.value = remoteStream;
|
||||
isCollapsed.value = false; // 收到流时自动展开
|
||||
await nextTick();
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = remoteStream;
|
||||
}
|
||||
} else if (type === "call") {
|
||||
callStream.value = remoteStream;
|
||||
isCollapsed.value = false;
|
||||
await nextTick();
|
||||
if (audioRef.value) {
|
||||
audioRef.value.srcObject = remoteStream;
|
||||
audioRef.value.muted = isCallMuted.value;
|
||||
audioRef.value.play().catch(() => {
|
||||
message.warning("浏览器阻止了自动播放，请点击通话区域恢复声音");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -85,11 +127,32 @@ const handleMediaEnded = (event: MediaEndedEvent) => {
|
||||
const { type } = event.detail;
|
||||
if (props.peerId !== event.detail.peerId) return;
|
||||
if (type === "desktop") {
|
||||
stream.value = null;
|
||||
desktopStream.value = null;
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = null;
|
||||
}
|
||||
message.info("远程桌面共享已结束");
|
||||
} else if (type === "call") {
|
||||
callStream.value = null;
|
||||
if (audioRef.value) {
|
||||
audioRef.value.srcObject = null;
|
||||
}
|
||||
message.info("语音通话已结束");
|
||||
}
|
||||
};
|
||||
|
||||
const endDesktop = () => {
|
||||
peer.endMedia(props.peerId, "desktop");
|
||||
};
|
||||
|
||||
const endCall = () => {
|
||||
peer.endMedia(props.peerId, "call");
|
||||
};
|
||||
|
||||
const toggleCallMuted = () => {
|
||||
isCallMuted.value = !isCallMuted.value;
|
||||
if (audioRef.value) {
|
||||
audioRef.value.muted = isCallMuted.value;
|
||||
}
|
||||
};
|
||||
|
||||
@ -117,21 +180,27 @@ const handleFullscreenChange = () => {
|
||||
isFullscreen.value = !!document.fullscreenElement;
|
||||
};
|
||||
|
||||
const streamListener: EventListener = (event) => {
|
||||
handleStream(event as StreamEvent);
|
||||
};
|
||||
const mediaEndedListener: EventListener = (event) => {
|
||||
handleMediaEnded(event as MediaEndedEvent);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
peer.on("stream", handleStream as EventListener);
|
||||
peer.on("media-ended", handleMediaEnded as EventListener);
|
||||
peer.on("stream", streamListener);
|
||||
peer.on("media-ended", mediaEndedListener);
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
peer.off("stream", handleStream as EventListener);
|
||||
peer.off("media-ended", handleMediaEnded as EventListener);
|
||||
peer.off("stream", streamListener);
|
||||
peer.off("media-ended", mediaEndedListener);
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
|
||||
// 清理视频流
|
||||
if (stream.value) {
|
||||
stream.value.getTracks().forEach((track) => track.stop());
|
||||
}
|
||||
desktopStream.value?.getTracks().forEach((track) => track.stop());
|
||||
callStream.value?.getTracks().forEach((track) => track.stop());
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -152,6 +221,10 @@ onUnmounted(() => {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.desktop-view-wrapper.has-call-only {
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.desktop-view-wrapper.is-collapsed {
|
||||
height: 40px !important;
|
||||
}
|
||||
@ -199,20 +272,14 @@ video {
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.video-container:hover .controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.no-signal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -222,6 +289,24 @@ video {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.call-view {
|
||||
height: 64px;
|
||||
padding: 0 16px;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.call-info,
|
||||
.call-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
:deep(.ant-empty-description) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
confirmWin,
|
||||
} from "./common";
|
||||
|
||||
type MediaType = "desktop" | "call";
|
||||
// 发送超时时间（毫秒）
|
||||
const SEND_TIMEOUT = 30000;
|
||||
|
||||
@ -33,8 +34,9 @@ class Peer extends EventTarget {
|
||||
string,
|
||||
{
|
||||
connection: MediaConnection;
|
||||
stream: MediaStream;
|
||||
type: "desktop" | "call";
|
||||
remoteStream: MediaStream | null;
|
||||
localStream: MediaStream | null;
|
||||
type: MediaType;
|
||||
}
|
||||
> = new Map();
|
||||
constructor(sign: string) {
|
||||
@ -102,7 +104,7 @@ class Peer extends EventTarget {
|
||||
}
|
||||
|
||||
call.answer(stream);
|
||||
self.setupMediaConnection(call, type);
|
||||
self.setupMediaConnection(call, type, stream);
|
||||
|
||||
self.dispatchEvent(
|
||||
new CustomEvent(
|
||||
@ -208,7 +210,7 @@ class Peer extends EventTarget {
|
||||
metadata: { type: "desktop" },
|
||||
});
|
||||
|
||||
this.setupMediaConnection(call, "desktop");
|
||||
this.setupMediaConnection(call, "desktop", emptyStream);
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("desktop-started", {
|
||||
@ -243,7 +245,7 @@ class Peer extends EventTarget {
|
||||
metadata: { type: "call" },
|
||||
});
|
||||
|
||||
this.setupMediaConnection(call, "call");
|
||||
this.setupMediaConnection(call, "call", stream);
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("call-started", {
|
||||
@ -261,26 +263,73 @@ class Peer extends EventTarget {
|
||||
}
|
||||
|
||||
// 结束媒体连接
|
||||
endMedia(peerId?: string) {
|
||||
endMedia(peerId?: string, type?: MediaType) {
|
||||
if (peerId) {
|
||||
this.endMediaConnection(peerId);
|
||||
const mediaTypes: MediaType[] = type ? [type] : ["desktop", "call"];
|
||||
mediaTypes.forEach((mediaType) => {
|
||||
this.endMediaConnection(peerId, mediaType);
|
||||
if (this.remoteConnection) {
|
||||
this.send(
|
||||
{
|
||||
type: MessageType.end_call,
|
||||
type:
|
||||
mediaType === "desktop"
|
||||
? MessageType.end_desktop
|
||||
: MessageType.end_call,
|
||||
data: {
|
||||
peerId,
|
||||
},
|
||||
},
|
||||
this.remoteConnection,
|
||||
);
|
||||
).catch((error) => {
|
||||
console.warn("send end media message error:", error);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 如果没有指定 peerId，结束所有连接
|
||||
this.endAllMediaConnections();
|
||||
}
|
||||
}
|
||||
|
||||
private getMediaKey(peerId: string, type: MediaType) {
|
||||
return `${peerId}:${type}`;
|
||||
}
|
||||
|
||||
private getMediaConnection(peerId: string, type: MediaType) {
|
||||
return this.mediaConnections.get(this.getMediaKey(peerId, type));
|
||||
}
|
||||
|
||||
hasMedia(peerId: string, type: MediaType) {
|
||||
return !!this.getMediaConnection(peerId, type);
|
||||
}
|
||||
|
||||
private updateMediaConnection(
|
||||
peerId: string,
|
||||
type: MediaType,
|
||||
data: Partial<{
|
||||
connection: MediaConnection;
|
||||
remoteStream: MediaStream | null;
|
||||
localStream: MediaStream | null;
|
||||
}>,
|
||||
) {
|
||||
const key = this.getMediaKey(peerId, type);
|
||||
const current = this.mediaConnections.get(key);
|
||||
const connection = data.connection || current?.connection;
|
||||
if (!connection) return;
|
||||
this.mediaConnections.set(key, {
|
||||
connection,
|
||||
remoteStream:
|
||||
data.remoteStream !== undefined
|
||||
? data.remoteStream
|
||||
: current?.remoteStream || null,
|
||||
localStream:
|
||||
data.localStream !== undefined
|
||||
? data.localStream
|
||||
: current?.localStream || null,
|
||||
type,
|
||||
});
|
||||
}
|
||||
|
||||
private callbackMap: Map<string, (data: any) => void> = new Map();
|
||||
async send(
|
||||
data: Message,
|
||||
@ -384,9 +433,14 @@ class Peer extends EventTarget {
|
||||
|
||||
private setupMediaConnection(
|
||||
call: MediaConnection,
|
||||
type: "desktop" | "call",
|
||||
type: MediaType,
|
||||
localStream: MediaStream | null = null,
|
||||
) {
|
||||
const peerId = call.peer;
|
||||
this.updateMediaConnection(peerId, type, {
|
||||
connection: call,
|
||||
localStream,
|
||||
});
|
||||
|
||||
call.on("stream", (remoteStream: MediaStream) => {
|
||||
console.log("stream", remoteStream);
|
||||
@ -395,10 +449,9 @@ class Peer extends EventTarget {
|
||||
const hasAudio = remoteStream.getAudioTracks().length > 0;
|
||||
|
||||
if ((type === "desktop" && hasVideo) || (type === "call" && hasAudio)) {
|
||||
this.mediaConnections.set(peerId, {
|
||||
this.updateMediaConnection(peerId, type, {
|
||||
connection: call,
|
||||
stream: remoteStream,
|
||||
type,
|
||||
remoteStream,
|
||||
});
|
||||
|
||||
this.dispatchEvent(
|
||||
@ -414,16 +467,18 @@ class Peer extends EventTarget {
|
||||
});
|
||||
|
||||
call.on("close", () => {
|
||||
this.endMediaConnection(peerId);
|
||||
this.endMediaConnection(peerId, type);
|
||||
});
|
||||
}
|
||||
|
||||
private endMediaConnection(peerId: string) {
|
||||
const mediaConn = this.mediaConnections.get(peerId);
|
||||
private endMediaConnection(peerId: string, type: MediaType) {
|
||||
const key = this.getMediaKey(peerId, type);
|
||||
const mediaConn = this.mediaConnections.get(key);
|
||||
if (mediaConn) {
|
||||
this.mediaConnections.delete(key);
|
||||
mediaConn.connection.close();
|
||||
mediaConn.stream.getTracks().forEach((track) => track.stop());
|
||||
this.mediaConnections.delete(peerId);
|
||||
mediaConn.remoteStream?.getTracks().forEach((track) => track.stop());
|
||||
mediaConn.localStream?.getTracks().forEach((track) => track.stop());
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("media-ended", {
|
||||
@ -438,8 +493,8 @@ class Peer extends EventTarget {
|
||||
|
||||
// 结束所有媒体连接
|
||||
endAllMediaConnections() {
|
||||
for (const peerId of this.mediaConnections.keys()) {
|
||||
this.endMediaConnection(peerId);
|
||||
for (const mediaConn of Array.from(this.mediaConnections.values())) {
|
||||
this.endMediaConnection(mediaConn.connection.peer, mediaConn.type);
|
||||
}
|
||||
}
|
||||
|
||||
@ -629,9 +684,10 @@ class Peer extends EventTarget {
|
||||
break;
|
||||
case MessageType.end_call:
|
||||
case MessageType.end_desktop:
|
||||
if (remoteD?.peerId) {
|
||||
this.endMediaConnection(remoteD.peerId);
|
||||
}
|
||||
this.endMediaConnection(
|
||||
conn.peer,
|
||||
data.type === MessageType.end_desktop ? "desktop" : "call",
|
||||
);
|
||||
break;
|
||||
default:
|
||||
resData.type = MessageType.error;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user