11

src/common/constant/Constant.js

@@ -2,8 +2,10 @@ export const AUDIO_ONLINE = 6; // 语音聊天
 export const VIDEO_ONLINE = 7; // 视频聊天
 
 export const DIAL_MEDIA_START = 10; // 拨打媒体开始占位符
+
 export const DIAL_AUDIO_ONLINE = 11; // 语音聊天拨号
 export const ACCEPT_AUDIO_ONLINE = 12; // 语音聊天接听
+
 export const CANCELL_AUDIO_ONLINE = 13; // 语音聊天取消
 export const REJECT_AUDIO_ONLINE = 14; // 语音聊天拒接
 

src/stores/modules/webrtcStore.js

@@ -33,6 +33,12 @@ export const useWebRTCStore = defineStore("webrtc", {
         // 可以添加更多 STUN/TURN 服务器
       ],
     },
+
+    imSate:{
+      videoCallModal: false, // 视频通话模态框
+      callName: "", // 通话对象名称
+      fromUserUuid: "", // 通话对象 uuid
+    }
   }),
   actions: {
     bindRemoteAudio() {

src/views/im/hook/messagesHook.js

@@ -70,6 +70,45 @@ export const handleMessageHook = (message, state) => {
       toUsername: message.to,
     });
   }
+  // 音频在线：拨号
+  if (
+    message.contentType === Constant.DIAL_AUDIO_ONLINE ||
+    message.contentType === Constant.DIAL_VIDEO_ONLINE
+  ) {
+    const rtcStore = useWebRTCStore();
+    rtcStore.imSate = {
+      videoCallModal: true,
+      callName: message.fromUsername,
+      fromUserUuid: message.from,
+    };
+  }
+  // 音频在线：取消
+  if (
+    message.contentType === Constant.CANCELL_AUDIO_ONLINE ||
+    message.contentType === Constant.CANCELL_VIDEO_ONLINE
+  ) {
+    const rtcStore = useWebRTCStore();
+    rtcStore.videoCallModal = false;
+    return;
+  }
+  // 音频在线：拒接
+  if (
+    message.contentType === Constant.REJECT_AUDIO_ONLINE ||
+    message.contentType === Constant.REJECT_VIDEO_ONLINE
+  ) {
+    const rtcStore = useWebRTCStore();
+    rtcStore.videoCallModal = false;
+    return;
+  }
+  // 音频在线：接听
+  if (
+    message.contentType === Constant.ACCEPT_VIDEO_ONLINE ||
+    message.contentType === Constant.ACCEPT_AUDIO_ONLINE
+  ) {
+    const video = message.contentType == ACCEPT_AUDIO_ONLINE
+    startAudioOnline(video);
+    return;
+  }
   // 音频通话
   if (message.type === Constant.MESSAGE_TRANS_TYPE) {
     if (
@@ -87,25 +126,24 @@ export const handleMessageHook = (message, state) => {
       const answerSdp = new RTCSessionDescription({ type, sdp });
       rtcStore.setRemoteDescription(answerSdp);
     }
-   // 处理 ICE 候选（统一处理offer_ice和answer_ice）
+    // 处理 ICE 候选（统一处理offer_ice和answer_ice）
     if (type.endsWith("_ice")) {
       const candidate = new RTCIceCandidate(iceCandidate);
-      rtcStore.addIceCandidate(candidate)
-        .catch(error => console.error("添加ICE候选失败:", error));
+      rtcStore
+        .addIceCandidate(candidate)
+        .catch((error) => console.error("添加ICE候选失败:", error));
       return;
     }
 
-
     // 响应对端offer
     if (type === "offer") {
       // 检查媒体权限是否开启
       // let preview = null;
 
-       if (!rtcStore.peerConnection) {
+      if (!rtcStore.peerConnection) {
         rtcStore.initConnection(false); // false表示是Answer方
       }
 
-      
       let video = false;
       if (message.contentType === Constant.VIDEO_ONLINE) {
         // preview = document.getElementById("localVideoReceiver");
@@ -117,7 +155,6 @@ export const handleMessageHook = (message, state) => {
         // preview = document.getElementById("audioPhone");
         // 音频电话
       }
-      
 
       navigator.mediaDevices
         .getUserMedia({ audio: true, video: video })
@@ -158,3 +195,28 @@ export const handleMessageHook = (message, state) => {
     }
   }
 };
+
+// 创建呼叫:开启语音电话
+const startAudioOnline = (video) => {
+  showVoiceCall.value = true;
+  // 初始化webrtc连接
+  rtcStore.initConnection(true);
+
+  navigator.mediaDevices
+    .getUserMedia({ audio: true, video: video })
+    .then((stream) => {
+      rtcStore.addLocalStream(stream);
+      return rtcStore.createOffer();
+    })
+    .then((offer) => {
+      // 发送offer
+      wsStore.sendMessage({
+        contentType: Constant.AUDIO_ONLINE, // 消息内容类型
+        content: JSON.stringify(offer),
+        type: Constant.MESSAGE_TRANS_TYPE,
+      });
+    })
+    .catch((error) => {
+      console.error("发起呼叫失败:", error);
+    });
+};