fix(webapp): whip and whep error reconnected

binbat · Jan 10, 2024 · d25a9bc · d25a9bc
1 parent 3863442
commit d25a9bc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/webapp/components/player/whep-player.tsx b/webapp/components/player/whep-player.tsx
@@ -11,6 +11,7 @@ import SvgProgress from '../svg/progress'
 
 export default function WhepPlayer(props: { streamId: string, status: UserStatus, width: string }) {
   const refEnabled = useRef(false)
+  const refTimer = useRef<ReturnType<typeof setInterval> | null>(null)
   const refPC = useRef<RTCPeerConnection | null>(null)
   const [loading, setLoading] = useState(true)
   const [connectionState, setConnectionState] = useState("unknown")
@@ -19,6 +20,8 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
     name: props.streamId,
   })
   const [presentationStream, setPresentationStream] = useAtom(presentationStreamAtom)
+  const refUserStatus = useRef(props.status)
+  refUserStatus.current = props.status
 
   const newPeerConnection = () => {
     const pc = new RTCPeerConnection()
@@ -35,6 +38,8 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
     refPC.current = pc
   }
 
+  const run = () => refUserStatus.current.state !== "connected" ? restart(props.streamId) : null
+
   const start = async (resource: string) => {
     setLoading(false)
     if (refPC.current) {
@@ -57,6 +62,7 @@ export default function WhepPlayer(props: { streamId: string, status: UserStatus
   useEffect(() => {
     if (!refEnabled.current && props.status.state === "connected") {
       refEnabled.current = true
+      refTimer.current = setInterval(run, 5000)
       newPeerConnection()
       start(props.streamId)
     }

diff --git a/webapp/components/player/whip-player.tsx b/webapp/components/player/whip-player.tsx
@@ -15,17 +15,20 @@ import SvgProgress from '../svg/progress'
 
 export default function WhipPlayer(props: { streamId: string, width: string }) {
   const refEnabled = useRef(false)
+  const refTimer = useRef<ReturnType<typeof setInterval> | null>(null)
   const refPC = useRef<RTCPeerConnection | null>(null)
   const refClient = useRef<WHIPClient | null>(null)
   const [localStream] = useAtom(localStreamAtom)
   const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom)
+  const refUserStatus = useRef(localUserStatus)
 
   const [loading, setLoading] = useState(true)
 
   const [currentDeviceAudio] = useAtom(currentDeviceAudioAtom)
   const [currentDeviceVideo] = useAtom(currentDeviceVideoAtom)
 
   const [presentationStream, setPresentationStream] = useAtom(presentationStreamAtom)
+  refUserStatus.current = localUserStatus
 
   const newPeerConnection = () => {
     const stream = localStream.stream
@@ -85,10 +88,13 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
     start(resource)
   }
 
+  const run = () => refUserStatus.current.state !== "connected" ? restart(props.streamId) : null
+
   const init = () => {
     if (!!localStream.stream.getTracks().length) {
       if (!refEnabled.current) {
         refEnabled.current = true
+        refTimer.current = setInterval(run, 5000)
         newPeerConnection()
         start(props.streamId)
       }
@@ -104,6 +110,8 @@ export default function WhipPlayer(props: { streamId: string, width: string }) {
     init()
     return () => {
       if (refEnabled.current && refClient.current) {
+        clearInterval(refTimer.current!)
+        refTimer.current = null
         refClient.current.stop()
         refClient.current = null
         refEnabled.current = false