feat: 杂七杂八忘记了

.env

@@ -1,2 +1,2 @@
 # VITE_REACT_APP_API='http://127.0.0.1:4523/m1/3434069-0-default'
-VITE_REACT_APP_API='http://127.0.0.1:1122'
+VITE_REACT_APP_API='http://192.168.1.120:1122'

src/components/Chat/index.tsx

@@ -8,6 +8,7 @@ import Message from './Message'
 import { Constraints, getLocalUserMedia } from '@/utils'
 import VideoPlayer from '../VideoPlayer'
 import { VideoCameraOutlined } from '@ant-design/icons'
+import { useStateStore } from '@/hooks/useStateStore'
 
 interface ChatProps {
  chat?: ChatType
@@ -19,6 +20,7 @@ function Chat({ chat }: ChatProps) {
  state.userInfo,
  state.contactList
  ])
+ const [setVideo] = useStateStore((state) => [state.setVideo])
  const friend = contactList.find((contact) => contact.username === chat?._id)
  const [messageList, setMessageList] = useState<MessageType[]>([])
  const messageBoxBottomRef = useRef<HTMLDivElement>(null)
@@ -82,12 +84,6 @@ function Chat({ chat }: ChatProps) {
  }
  }, [friend])
 
- // useEffect(() => {
- // if (user._id && friend?._id) {
- // initCallerInfo(user._id, friend?._id)
- // }
- // }, [user._id, friend?._id])
-
  useEffect(() => {
  socket.on('onCall', async (data) => {
  console.log('onCall', data)
@@ -101,10 +97,8 @@ function Chat({ chat }: ChatProps) {
  useEffect(() => {
  if (localRtcPc) {
  socket.on('onOffer', async (data) => {
- console.log('offer', data)
  // 保存对方发送过来的 offer 并设置为远程描述
  localRtcPc.setRemoteDescription(data.offer)
- console.log('✨ ~ socket.on ~ localRtcPc:', localRtcPc)
  // 创建 Answer
  const answer = await localRtcPc.createAnswer()
  // 设置 Answer 为本地描述
@@ -117,12 +111,10 @@ function Chat({ chat }: ChatProps) {
  })
  })
  socket.on('onAnswer', async (data) => {
- console.log('answer', data)
  // 保存对方发送过来的 Answer 并设置为远程描述
  await localRtcPc.setRemoteDescription(data.answer)
  })
  socket.on('onCandidate', async (data) => {
- console.log('candidate', data)
  await localRtcPc.addIceCandidate(data.candidate)
  })
 
@@ -141,6 +133,7 @@ function Chat({ chat }: ChatProps) {
  receiver: friend?._id
  })
  initCallerInfo(user._id, friend?._id)
+ setVideo(true)
  }
  }
 
@@ -202,13 +195,10 @@ function Chat({ chat }: ChatProps) {
  receiver: string
  ) => {
  if (!pc) return
- console.log('在监听啦')
 
- const channel = pc.createDataChannel('chat')
+ // const channel = pc.createDataChannel('chat')
  // setChannel(channel)
  pc.ontrack = (event) => {
- console.log('在接收啦')
-
  if (remoteStream) {
  setRemoteStream((stream) => {
  stream?.addTrack(event.track)
@@ -314,27 +304,33 @@ function Chat({ chat }: ChatProps) {
  </div>
  </Flex>
  <Divider type="vertical" style={{ height: '100%' }} />
- <Flex vertical style={{ flex: 1 }}>
- <div>
- {localStream && localRtcPc && (
- <VideoPlayer
- stream={localStream}
- // localUID={user._id}
- // remoteUID={friend._id}
- // peerConnection={localRtcPc}
- />
- )}
- </div>
- <div>
- {remoteStream && localRtcPc && (
- <VideoPlayer
- stream={remoteStream}
- // remoteUID={user._id}
- // localUID={friend._id}
- // peerConnection={localRtcPc}
- />
- )}
- </div>
+ <Flex vertical gap={24} style={{ flex: 1 }}>
+ <Flex vertical>
+ <Typography.Title level={5}>我</Typography.Title>
+ <div>
+ {localStream && localRtcPc && (
+ <VideoPlayer
+ stream={localStream}
+ // localUID={user._id}
+ // remoteUID={friend._id}
+ // peerConnection={localRtcPc}
+ />
+ )}
+ </div>
+ </Flex>
+ <Flex vertical>
+ <Typography.Title level={5}>{friend.username}</Typography.Title>
+ <div>
+ {remoteStream && localRtcPc && (
+ <VideoPlayer
+ stream={remoteStream}
+ // remoteUID={user._id}
+ // localUID={friend._id}
+ // peerConnection={localRtcPc}
+ />
+ )}
+ </div>
+ </Flex>
  </Flex>
  </Flex>
  </Flex>

src/components/VideoPlayer/index.tsx

@@ -32,7 +32,7 @@ const VideoPlayer = ({
  }
  }, [stream])
 
- return <video style={{ width: '100%' }} ref={ref} autoPlay />
+ return <video style={{ width: '100%' }} ref={ref} autoPlay controls />
 }
 
 export default VideoPlayer

src/hooks/useAppStore.ts

@@ -22,30 +22,35 @@ interface Actions {
 
 type Store = State & Actions
 
-export const useAppStore = create(persist(immer<Store>(set => ({
- theme: Theme.Light,
- primaryColor: '#5e7e1e',
- language: Language.Zh,
- userInfo: {} as UserPublic,
- contactList: [],
- contactMap: new Map(),
+export const useAppStore = create(
+ persist(
+ immer<Store>((set) => ({
+ theme: Theme.Light,
+ primaryColor: '#5e7e1e',
+ language: Language.Zh,
+ userInfo: {} as UserPublic,
+ contactList: [],
+ contactMap: new Map(),
 
- setTheme: theme => set({ theme }),
- setPrimaryColor: primaryColor => set({ primaryColor }),
- setUserInfo: userInfo => set({ userInfo }),
- setContactList: (contactList) => {
- const contactMap = new Map<string, Contact>()
- contactList.forEach(contact => contactMap.set(contact._id, contact))
- set({ contactList, contactMap })
- },
-})), {
- name: 'app-store',
- storage: createJSONStorage(() => localStorage),
- partialize(state) {
- return {
- theme: state.theme,
- primaryColor: state.primaryColor,
- language: state.language,
+ setTheme: (theme) => set({ theme }),
+ setPrimaryColor: (primaryColor) => set({ primaryColor }),
+ setUserInfo: (userInfo) => set({ userInfo }),
+ setContactList: (contactList) => {
+ const contactMap = new Map<string, Contact>()
+ contactList.forEach((contact) => contactMap.set(contact._id, contact))
+ set({ contactList, contactMap })
+ }
+ })),
+ {
+ name: 'app-store',
+ storage: createJSONStorage(() => localStorage),
+ partialize(state) {
+ return {
+ theme: state.theme,
+ primaryColor: state.primaryColor,
+ language: state.language
+ }
+ }
  }
- },
-}))
+ )
+)

src/hooks/useStateStore.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+interface State {
+ video: boolean
+}
+
+interface Actions {
+ setVideo: (video: boolean) => void
+}
+
+type Store = State & Actions
+
+export const useStateStore = create(
+ immer<Store>((set) => ({
+ video: false,
+
+ setVideo: (video) => set({ video })
+ }))
+)

src/hooks/useTheme.ts

@@ -7,7 +7,7 @@ export function useThemeToken() {
  const { token } = theme.useToken()
  const tokenRef = useRef<GlobalToken>(token)
  tokenRef.current = token
- const currentTheme = useAppStore(state => state.theme)
+ const currentTheme = useAppStore((state) => state.theme)
 
  return { token, tokenRef, theme: currentTheme }
 }