|
@@ -20,9 +20,22 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
connectionState: "disconnected",
|
|
connectionState: "disconnected",
|
|
|
|
|
|
// 媒体流
|
|
// 媒体流
|
|
- localStream: null, // 本地媒体流
|
|
|
|
|
|
+ localStream: null, // 本地媒体流
|
|
remoteStream: null, // 远端媒体流
|
|
remoteStream: null, // 远端媒体流
|
|
|
|
|
|
|
|
+ streamType: "video", //"audio",
|
|
|
|
+
|
|
|
|
+ // 视频元素引用
|
|
|
|
+ localVideoElement: null,
|
|
|
|
+ remoteVideoElement: null,
|
|
|
|
+
|
|
|
|
+ // 媒体控制状态
|
|
|
|
+ isVideoEnabled: true,
|
|
|
|
+ isAudioEnabled: true,
|
|
|
|
+
|
|
|
|
+ // 通话类型
|
|
|
|
+ callType: "audio", // 'audio' 或 'video'
|
|
|
|
+
|
|
// 是否是发起方
|
|
// 是否是发起方
|
|
isCaller: false,
|
|
isCaller: false,
|
|
|
|
|
|
@@ -34,38 +47,41 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
],
|
|
],
|
|
},
|
|
},
|
|
|
|
|
|
- imSate:{
|
|
|
|
|
|
+ imSate: {
|
|
videoCallModal: false, // 视频通话模态框
|
|
videoCallModal: false, // 视频通话模态框
|
|
callName: "", // 通话对象名称
|
|
callName: "", // 通话对象名称
|
|
fromUserUuid: "", // 通话对象 uuid
|
|
fromUserUuid: "", // 通话对象 uuid
|
|
- }
|
|
|
|
|
|
+ },
|
|
}),
|
|
}),
|
|
actions: {
|
|
actions: {
|
|
- bindRemoteAudio() {
|
|
|
|
- // 如果已经存在 audio 元素,先移除旧的
|
|
|
|
- const oldAudio = document.getElementById("remote-audio");
|
|
|
|
- if (oldAudio) {
|
|
|
|
- oldAudio.remove();
|
|
|
|
- }
|
|
|
|
|
|
+ //
|
|
|
|
+ // bindRemoteAudio() {
|
|
|
|
+ // // video && audio
|
|
|
|
+ // // 如果已经存在 audio 元素,先移除旧的
|
|
|
|
+ // const oldAudio = document.getElementById(`remote-audio`);
|
|
|
|
+ // if (oldAudio) {
|
|
|
|
+ // oldAudio.remove();
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // // 创建新的 <audio> 元素
|
|
|
|
+ // const audioElement = document.createElement("audio");
|
|
|
|
+ // audioElement.id = `remote-audio`;
|
|
|
|
+ // audioElement.autoplay = true; // 自动播放
|
|
|
|
+ // audioElement.muted = false; // 取消静音
|
|
|
|
+ // audioElement.controls = true; // 显示控制条(可选)
|
|
|
|
+ // audioElement.srcObject = this.remoteStream;
|
|
|
|
+
|
|
|
|
+ // // 添加到 DOM(可以放在任意位置,比如 body)
|
|
|
|
+ // document.body.appendChild(audioElement);
|
|
|
|
+
|
|
|
|
+ // console.log("✅ 远程音频已绑定到 <audio> 元素");
|
|
|
|
+ // },
|
|
|
|
|
|
- // 创建新的 <audio> 元素
|
|
|
|
- const audioElement = document.createElement("audio");
|
|
|
|
- audioElement.id = "remote-audio";
|
|
|
|
- audioElement.autoplay = true; // 自动播放
|
|
|
|
- audioElement.muted = false; // 取消静音
|
|
|
|
- audioElement.controls = true; // 显示控制条(可选)
|
|
|
|
- audioElement.srcObject = this.remoteStream;
|
|
|
|
-
|
|
|
|
- // 添加到 DOM(可以放在任意位置,比如 body)
|
|
|
|
- document.body.appendChild(audioElement);
|
|
|
|
-
|
|
|
|
- console.log("✅ 远程音频已绑定到 <audio> 元素");
|
|
|
|
- },
|
|
|
|
// 初始化 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();
|
|
@@ -100,7 +116,7 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
this.remoteStream.addTrack(track);
|
|
this.remoteStream.addTrack(track);
|
|
});
|
|
});
|
|
// 绑定音频
|
|
// 绑定音频
|
|
- this.bindRemoteAudio()
|
|
|
|
|
|
+ // this.bindRemoteAudio();
|
|
};
|
|
};
|
|
|
|
|
|
// 监听 ICE 连接状态(关键修复!)
|
|
// 监听 ICE 连接状态(关键修复!)
|
|
@@ -232,5 +248,3 @@ export const useWebRTCStore = defineStore("webrtc", {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
-
|
|
|
|
-
|
|
|