updates

package.json

@@ -22,7 +22,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "rsync -ar build/* 10.10.0.45:/home/jens/Docker/commandcenter/www"
+    "deploy": "rsync -ar build/* 10.10.0.47:/Users/jens/Docker/commandcenter/www"
   },
   "eslintConfig": {
     "extends": [

src/App.tsx

@@ -9,11 +9,9 @@ function App() {
   const [focusedIndex, setFocusedIndex] = useState<number>(-1)
 
   useEffect(() => {
-    start()
+    start().then((streams) => {
-      .then((streams) => Promise.all(streams))
+      setMediaStreams(streams)
-      .then((streams) => {
+    })
-        setMediaStreams(streams)
-      })
   }, [])
 
   const handleClick = (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

src/config.json

@@ -1,3 +1,3 @@
 {
-  "baseUrl": "http://10.10.0.45:1984/"
+  "baseUrl": "https://streams.lan.neuber.dev/"
 }

src/lib/connect.ts

@@ -53,11 +53,9 @@ export async function getMediaTracks(media: string, constraints?: MediaStreamCon
 export async function connect(url: string, media: string) {
   const { pc, localTracks } = await PeerConnection(media)
 
-  // document.getElementById(videoId).srcObject = new MediaStream(localTracks)
+  let ws = new WebSocket('ws' + url.toString().substring(4))
 
-  const ws = new WebSocket('ws' + url.toString().substring(4))
+  ws.onopen = function () {
-
-  ws.addEventListener('open', () => {
     pc.addEventListener('icecandidate', (ev) => {
       if (!ev.candidate) return
       const msg = { type: 'webrtc/candidate', value: ev.candidate.candidate }
@@ -70,16 +68,31 @@ export async function connect(url: string, media: string) {
         const msg = { type: 'webrtc/offer', value: pc.localDescription?.sdp }
         ws.send(JSON.stringify(msg))
       })
-  })
+  }
 
-  ws.addEventListener('message', (ev) => {
+  ws.onmessage = function (ev) {
     const msg = JSON.parse(ev.data)
     if (msg.type === 'webrtc/candidate') {
       pc.addIceCandidate({ candidate: msg.value, sdpMid: '0' })
     } else if (msg.type === 'webrtc/answer') {
       pc.setRemoteDescription({ type: 'answer', sdp: msg.value })
     }
-  })
+  }
+
+  ws.onerror = function (ev) {
+    console.log({ ev })
+  }
+
+  ws.onclose = function () {
+    setTimeout(function () {
+      var ws2 = new WebSocket(ws.url)
+      ws2.onopen = ws.onopen
+      ws2.onmessage = ws.onmessage
+      ws2.onclose = ws.onclose
+      ws2.onerror = ws.onerror
+      ws = ws2
+    }, 2000)
+  }
 
   return new MediaStream(localTracks)
 }

src/lib/start.ts

@@ -12,5 +12,5 @@ export const start = async () => {
     return connect(url, 'video+audio')
   })
 
-  return mediaStreams
+  return Promise.all(mediaStreams)
 }