|
@@ -20,21 +20,21 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
connectionState: "disconnected",
|
|
connectionState: "disconnected",
|
|
|
|
|
|
// 媒体流
|
|
// 媒体流
|
|
- localStream: null, // 本地媒体流
|
|
|
|
|
|
+ localStream: null, // 本地媒体流
|
|
remoteStream: null, // 远端媒体流
|
|
remoteStream: null, // 远端媒体流
|
|
|
|
|
|
stream: "audio",
|
|
stream: "audio",
|
|
|
|
|
|
- // 视频元素引用
|
|
|
|
|
|
+ // 视频元素引用
|
|
localVideoElement: null,
|
|
localVideoElement: null,
|
|
remoteVideoElement: null,
|
|
remoteVideoElement: null,
|
|
-
|
|
|
|
|
|
+
|
|
// 媒体控制状态
|
|
// 媒体控制状态
|
|
isVideoEnabled: true,
|
|
isVideoEnabled: true,
|
|
isAudioEnabled: true,
|
|
isAudioEnabled: true,
|
|
-
|
|
|
|
- // 通话类型
|
|
|
|
- callType: 'audio', // 'audio' 或 'video'
|
|
|
|
|
|
+
|
|
|
|
+ // 通话类型
|
|
|
|
+ callType: "audio", // 'audio' 或 'video'
|
|
|
|
|
|
// 是否是发起方
|
|
// 是否是发起方
|
|
isCaller: false,
|
|
isCaller: false,
|
|
@@ -47,14 +47,14 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
],
|
|
],
|
|
},
|
|
},
|
|
|
|
|
|
- imSate:{
|
|
|
|
|
|
+ imSate: {
|
|
videoCallModal: false, // 视频通话模态框
|
|
videoCallModal: false, // 视频通话模态框
|
|
callName: "", // 通话对象名称
|
|
callName: "", // 通话对象名称
|
|
fromUserUuid: "", // 通话对象 uuid
|
|
fromUserUuid: "", // 通话对象 uuid
|
|
- }
|
|
|
|
|
|
+ },
|
|
}),
|
|
}),
|
|
actions: {
|
|
actions: {
|
|
- //
|
|
|
|
|
|
+ //
|
|
bindRemoteAudioOrVideo() {
|
|
bindRemoteAudioOrVideo() {
|
|
// video && audio
|
|
// video && audio
|
|
// 如果已经存在 audio 元素,先移除旧的
|
|
// 如果已经存在 audio 元素,先移除旧的
|
|
@@ -67,7 +67,7 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
const audioElement = document.createElement(this.stream);
|
|
const audioElement = document.createElement(this.stream);
|
|
audioElement.id = `remote-${this.stream}`;
|
|
audioElement.id = `remote-${this.stream}`;
|
|
audioElement.autoplay = true; // 自动播放
|
|
audioElement.autoplay = true; // 自动播放
|
|
- audioElement.muted = false; // 取消静音
|
|
|
|
|
|
+ audioElement.muted = false; // 取消静音
|
|
audioElement.controls = true; // 显示控制条(可选)
|
|
audioElement.controls = true; // 显示控制条(可选)
|
|
audioElement.srcObject = this.remoteStream;
|
|
audioElement.srcObject = this.remoteStream;
|
|
|
|
|
|
@@ -77,24 +77,11 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
console.log("✅ 远程音频已绑定到 <audio> 元素");
|
|
console.log("✅ 远程音频已绑定到 <audio> 元素");
|
|
},
|
|
},
|
|
|
|
|
|
- initVideoElements(localVideoId, remoteVideoId) {
|
|
|
|
- this.localVideoElement = document.getElementById(localVideoId);
|
|
|
|
- this.remoteVideoElement = document.getElementById(remoteVideoId);
|
|
|
|
-
|
|
|
|
- if (this.localVideoElement && this.localStream) {
|
|
|
|
- this.localVideoElement.srcObject = this.localStream;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (this.remoteVideoElement && this.remoteStream) {
|
|
|
|
- this.remoteVideoElement.srcObject = this.remoteStream;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
// 初始化 WebRTC 连接
|
|
// 初始化 WebRTC 连接
|
|
initConnection(isCaller) {
|
|
initConnection(isCaller) {
|
|
this.cleanup();
|
|
this.cleanup();
|
|
this.isCaller = isCaller;
|
|
this.isCaller = isCaller;
|
|
-
|
|
|
|
|
|
+
|
|
const wsStore = useWebSocketStore();
|
|
const wsStore = useWebSocketStore();
|
|
try {
|
|
try {
|
|
this.peerConnection = new RTCPeerConnection();
|
|
this.peerConnection = new RTCPeerConnection();
|
|
@@ -129,7 +116,7 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
this.remoteStream.addTrack(track);
|
|
this.remoteStream.addTrack(track);
|
|
});
|
|
});
|
|
// 绑定音频
|
|
// 绑定音频
|
|
- this.bindRemoteAudioOrVideo()
|
|
|
|
|
|
+ this.bindRemoteAudioOrVideo();
|
|
};
|
|
};
|
|
|
|
|
|
// 监听 ICE 连接状态(关键修复!)
|
|
// 监听 ICE 连接状态(关键修复!)
|
|
@@ -261,5 +248,3 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
-
|
|
|
|
-
|
|
|