1

src/stores/modules/webrtcStore.js

@@ -23,6 +23,19 @@ export const useWebRTCStore = defineStore("webrtc", {
     localStream: null,  // 本地媒体流
     remoteStream: null, // 远端媒体流
 
+    stream: "audio",
+
+     // 视频元素引用
+    localVideoElement: null,
+    remoteVideoElement: null,
+    
+    // 媒体控制状态
+    isVideoEnabled: true,
+    isAudioEnabled: true,
+  
+  // 通话类型
+  callType: 'audio', // 'audio' 或 'video'
+
     // 是否是发起方
     isCaller: false,
 
@@ -41,16 +54,18 @@ export const useWebRTCStore = defineStore("webrtc", {
     }
   }),
   actions: {
-    bindRemoteAudio() {
+    // 
+    bindRemoteAudioOrVideo() {
+      // video  && audio
       // 如果已经存在 audio 元素，先移除旧的
-      const oldAudio = document.getElementById("remote-audio");
+      const oldAudio = document.getElementById(`remote-${this.stream}`);
       if (oldAudio) {
         oldAudio.remove();
       }
 
       // 创建新的 <audio> 元素
-      const audioElement = document.createElement("audio");
-      audioElement.id = "remote-audio";
+      const audioElement = document.createElement(this.stream);
+      audioElement.id = `remote-${this.stream}`;
       audioElement.autoplay = true; // 自动播放
       audioElement.muted = false;  // 取消静音
       audioElement.controls = true; // 显示控制条（可选）
@@ -61,6 +76,20 @@ export const useWebRTCStore = defineStore("webrtc", {
 
       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 连接
     initConnection(isCaller) {
       this.cleanup();
@@ -100,7 +129,7 @@ export const useWebRTCStore = defineStore("webrtc", {
             this.remoteStream.addTrack(track);
           });
           // 绑定音频
-          this.bindRemoteAudio()
+          this.bindRemoteAudioOrVideo()
         };
 
         // 监听 ICE 连接状态（关键修复！）