feat: 视频聊天的连接测试

Author: xgChange

client/packages/rtc-web/src/config/constant.ts

@@ -34,14 +34,14 @@ export const VideoControlMenuAction: MenuActionType[] = [
     btn: true,
     disabled: false,
   },
-  {
-    name: 'mirror-image',
-    tip: '开启镜像',
-    color: '#707070',
-    tipDir: 'tooltip-top',
-    btn: true,
-    disabled: false,
-  },
+  // {
+  //   name: 'mirror-image',
+  //   tip: '开启镜像',
+  //   color: '#707070',
+  //   tipDir: 'tooltip-top',
+  //   btn: true,
+  //   disabled: false,
+  // },
   {
     name: 'hang-up',
     tip: '结束通话',

client/packages/rtc-web/src/hooks/useRoom.ts

@@ -40,6 +40,16 @@ export type OwnerInfo = {
   owner: boolean;
 };
 
+export type ConnectOption = {
+  roomJoined?: (...args: any[]) => Promise<void>;
+  roomCreated?: (data: any) => Promise<void>;
+  onAddRtcPeer?: (id: string, pc: any) => Promise<void>;
+  onConnectComplete?: (...args: any[]) => void;
+  onBeforeCreateOffer?: (...args: any[]) => Promise<void>;
+  onBeforeCreateAnswer?: (...args: any[]) => Promise<void>;
+  onTrack?: (...args: any[]) => void;
+};
+
 export const useRoom = (value: MaybeRef<string> | CommonFnType) => {
   const realValue = resolveRef(value);
   const roomIdReg = /^[a-zA-Z0-9]{4,32}$/;
@@ -101,13 +111,15 @@ export const useCreateRoom = (type: 'password' | 'video' = 'password') => {
   };
 };
 
-export const useRoomConnect = () => {
+export const useRoomConnect = (option: ConnectOption = {}) => {
   const roomInfo = useGetRoomInfo();
 
   const { members, selfInfo } = roomInfo;
   const rtcConnects = new Map<string, RTCPeerConnection>();
+  const dataChanelMap = new Map<string, RTCDataChannel>();
   const initData = inject(InitDataKey)!;
   const socketRef = shallowRef();
+  const completed = ref(false);
 
   watchArray(
     () => members.value,
@@ -116,41 +128,90 @@ export const useRoomConnect = () => {
 
       // 处理 exit
       if (removed.length) {
-        removed.forEach((peer) => {
+        removed.forEach(async (peer) => {
           if (peer.id) {
+            const rtcConnect = await getRtcConnect(peer.id);
+            rtcConnect.close();
             rtcConnects.delete(peer.id);
           }
         });
       }
     }
   );
 
-  const createRtcConnect = (id: string) => {
-    const pc = new RTCPeerConnection(initData.value.config);
+  const createRtcConnect = async (id: string) => {
+    // const pc = new RTCPeerConnection(initData.value.config);
+    const pc = new RTCPeerConnection();
+    pc.onicecandidate = (event) => {
+      if (event.candidate != null) {
+        const message = {
+          from: selfInfo.value.socketId,
+          to: id,
+          room: selfInfo.value.roomId,
+          sdpMid: event.candidate.sdpMid,
+          sdpMLineIndex: event.candidate.sdpMLineIndex,
+          sdp: event.candidate.candidate,
+        };
+        socketRef.value.emit('candidate', message);
+      }
+    };
+
+    const dataChanel = pc.createDataChannel('datachanel');
+    dataChanelMap.set(id, dataChanel);
+
+    dataChanel.onopen = () => {
+      // dataChanel.send('aaa');
+    };
+
+    pc.ondatachannel = (e) => {
+      const chanel = e.channel;
+      if (chanel.label === 'datachanel') {
+        chanel.onmessage = (e: any) => {
+          // console.log('接受', e.data);
+        };
+      }
+    };
+
+    pc.onconnectionstatechange = (e) => {
+      if (pc.connectionState === 'connected') {
+        // console.log('完成');
+        completed.value = true;
+      }
+    };
 
-    pc.onicecandidate = () => {
-      // console.log('on candidate', e);
+    pc.ontrack = (e) => {
+      option?.onTrack?.(e, id);
     };
 
     rtcConnects.set(id, pc);
+    await option.onAddRtcPeer?.(id, pc);
 
     return pc;
   };
 
-  const getRtcConnect = (id: string) => {
-    return rtcConnects.get(id) || createRtcConnect(id);
+  const getRtcConnect = async (id: string) => {
+    return rtcConnects.get(id) || (await createRtcConnect(id));
+  };
+
+  const roomCreated = async (data: any) => {
+    await option?.roomCreated?.(data);
   };
 
   const roomJoined = async (data: any) => {
-    createOffer(getRtcConnect(data.id), data);
+    const peer = await getRtcConnect(data.id);
+
+    await option?.roomJoined?.(data.id, peer);
+    createOffer(peer, data);
   };
 
   /**
    * @description 这里的 createOffer
    */
   const createOffer = async (pc: RTCPeerConnection, peer: any) => {
+    await option?.onBeforeCreateOffer?.(peer.id, pc);
     const offer = await pc.createOffer(initData.value.options);
     await pc.setLocalDescription(offer);
+    console.log('create offer - send');
     socketRef.value.emit(SocketEventName.RoomOffer, {
       from: selfInfo.value.socketId,
       to: peer.id,
@@ -163,13 +224,14 @@ export const useRoomConnect = () => {
    * @description offer 监听事件
    */
   const roomOffer = async (data: any) => {
-    const pc = getRtcConnect(data.from);
+    const pc = await getRtcConnect(data.from);
     await pc.setRemoteDescription(
       new RTCSessionDescription({ type: 'offer', sdp: data.sdp })
     );
+    await option?.onBeforeCreateAnswer?.(data.from, pc);
     const answer = await pc.createAnswer(initData.value.options);
     await pc.setLocalDescription(answer);
-
+    console.log('receive offer - send answer');
     socketRef.value.emit(SocketEventName.RoomAnswer, {
       from: selfInfo.value.socketId,
       to: data.from,
@@ -182,25 +244,37 @@ export const useRoomConnect = () => {
    * @description answer 监听事件
    */
   const roomAnswer = async (data: any) => {
-    const pc = getRtcConnect(data.from);
+    const pc = await getRtcConnect(data.from);
+    console.log('receive answer');
     await pc.setRemoteDescription(
       new RTCSessionDescription({ type: 'answer', sdp: data.sdp })
     );
   };
-  const roomCandidate = () => {
-    //
+  const roomCandidate = async (data: any) => {
+    const pc = await getRtcConnect(data.from);
+    const rtcIceCandidate = new RTCIceCandidate({
+      candidate: data.sdp,
+      sdpMid: data.sdpMid,
+      sdpMLineIndex: data.sdpMLineIndex,
+    });
+    await pc.addIceCandidate(rtcIceCandidate);
   };
 
   const handleRoomConnect = (socket: any) => {
     socketRef.value = socket;
-    socket.on(SocketEventName.RoomJoin, roomJoined);
-    socket.on(SocketEventName.RoomOffer, roomOffer);
-    socket.on(SocketEventName.RoomAnswer, roomAnswer);
-    socket.on(SocketEventName.RoomCandidate, roomCandidate);
+    startConnect();
+  };
+
+  const startConnect = () => {
+    socketRef.value.on(SocketEventName.RoomCreated, roomCreated);
+    socketRef.value.on(SocketEventName.RoomJoin, roomJoined);
+    socketRef.value.on(SocketEventName.RoomOffer, roomOffer);
+    socketRef.value.on(SocketEventName.RoomAnswer, roomAnswer);
+    socketRef.value.on(SocketEventName.RoomCandidate, roomCandidate);
   };
   useSocket(handleRoomConnect);
 
-  return { ...roomInfo };
+  return { ...roomInfo, rtcConnects, dataChanelMap, completed, startConnect };
 };
 
 // 获取房间的一些信息，例如 peer 等信息

client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts

@@ -1,3 +1,4 @@
+import { useRoomConnect } from '@/hooks';
 import { useUserMedia, useDevicesList } from '@vueuse/core';
 import {
   Ref,
@@ -10,11 +11,14 @@ import {
 } from 'vue';
 
 export type VideoShareOption = {
+  immeately?: boolean;
   audio?: Ref<MediaDeviceInfo | undefined>;
   speaker?: Ref<string>;
 };
 
-export const useVideoShare = (option: VideoShareOption = {}) => {
+export const useMediaSetting = (
+  option: VideoShareOption = { immeately: true }
+) => {
   const currentCamera = ref<string>();
   const currentAudioInput = ref<string>();
   const currentAudioOutput = ref<string>();
@@ -107,15 +111,15 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     };
   });
 
-  const { stream, enabled, stop, restart } = useUserMedia({
+  const { stream, stop, restart, start } = useUserMedia({
     constraints,
   });
 
   const audioTracks = ref<MediaStreamTrack[]>([]);
   const videoTracks = ref<MediaStreamTrack[]>([]);
 
-  const audioEnabled = ref(false);
-  const videoEnabled = ref(false);
+  const audioEnabled = ref(true);
+  const videoEnabled = ref(true);
 
   // 切换 video、audio 渲染
   const switchTrackEnable = (type: 'video' | 'audio', flag: boolean) => {
@@ -151,33 +155,44 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
           videoTracks.value = stream.value.getVideoTracks();
         }
         if (!videoEnabled.value) {
-          switchTrackEnable('video', false);
+          // switchTrackEnable('video', false);
         }
         if (!audioEnabled.value) {
-          switchTrackEnable('audio', false);
+          // switchTrackEnable('audio', false);
         }
         mediaLoaded.value = true;
       }
     }
   });
 
   // 进入页面先连接
-  const watchEnableStop = watchEffect(() => {
-    if (
-      currentAudioInput.value &&
-      currentCamera.value &&
-      currentAudioOutput.value
-    ) {
-      enabled.value = true;
-      watchEnableStop();
-    }
-  });
+  const startGetMedia = () => {
+    return new Promise<MediaStream | undefined>((resolve) => {
+      const watchEnableStop = watchEffect(async () => {
+        if (
+          currentAudioInput.value &&
+          currentCamera.value &&
+          currentAudioOutput.value
+        ) {
+          const stream = await start();
+          watchEnableStop();
+          resolve(stream);
+        }
+      });
+    });
+  };
+
+  if (option.immeately) {
+    startGetMedia();
+  }
 
   onBeforeUnmount(() => {
     stop();
   });
 
   return {
+    startGetMedia,
+    stream,
     video,
     setSinkId,
     switchTrackEnable,
@@ -190,3 +205,51 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     currentAudioOutput,
   };
 };
+
+export const useMediaConnect = (
+  connect: { onTrack?: (track: MediaStreamTrack, id: string) => void } = {},
+  ...args: Parameters<typeof useMediaSetting>
+) => {
+  const { startGetMedia, ...mediaResult } = useMediaSetting(...args);
+
+  let stream: MediaStream | undefined = undefined;
+  useRoomConnect({
+    async roomCreated() {
+      console.log('ccccreated');
+      stream = await startGetMedia();
+    },
+    roomJoined: async (_, pc) => {
+      let innerStream = stream;
+      stream = undefined;
+      if (!innerStream) {
+        innerStream = await startGetMedia();
+        console.log('jjjjjjoined');
+      }
+      if (pc && innerStream) {
+        innerStream.getTracks().forEach((track) => {
+          pc.addTrack(track, innerStream);
+        });
+      }
+    },
+    onBeforeCreateAnswer: async (_, pc) => {
+      let innerStream = stream;
+      stream = undefined;
+      if (!innerStream) {
+        innerStream = await startGetMedia();
+      }
+      if (pc && innerStream) {
+        innerStream.getTracks().forEach((track) => {
+          pc.addTrack(track, innerStream);
+        });
+      }
+    },
+    onTrack(e: any, id: string) {
+      console.log(e);
+      if (e.track.kind === 'video') {
+        connect.onTrack?.(e.streams[0], id);
+      }
+    },
+  });
+
+  return { ...mediaResult };
+};