Stream setup (#46)

* set up stream

* clean up

src/App.tsx

@@ -22,6 +22,7 @@ import { RenderViewerArtifacts } from './components/RenderViewerArtifacts'
 import { PanelHeader } from './components/PanelHeader'
 import { MemoryPanel } from './components/MemoryPanel'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
+import { Stream } from './components/Stream'
 
 const OrrthographicCamera = OrthographicCamera as any
 
@@ -164,52 +165,55 @@ function App() {
           <MemoryPanel />
           <Logs />
         </Allotment>
-        <div className="h-full">
-          <PanelHeader title="Drafting Board" />
-          <Toolbar />
-          <div className="border h-full border-gray-300 relative">
-            <div className="absolute inset-0">
-              <Canvas>
-                <OrbitControls
-                  enableDamping={false}
-                  enablePan
-                  enableRotate={
-                    !(
-                      guiMode.mode === 'canEditSketch' ||
-                      guiMode.mode === 'sketch'
-                    )
-                  }
-                  enableZoom
-                  reverseOrbit={false}
-                />
-                <OrrthographicCamera
-                  ref={cam}
-                  makeDefault
-                  position={[0, 0, 1000]}
-                  zoom={100}
-                  rotation={[0, 0, 0]}
-                  far={2000}
-                />
-                <ambientLight />
-                <pointLight position={[10, 10, 10]} />
-                <RenderViewerArtifacts artifacts={geoArray} />
-                <BasePlanes />
-                <SketchPlane />
-                <AxisIndicator />
-              </Canvas>
-            </div>
-            {errorState.isError && (
-              <div className="absolute inset-0 bg-gray-700/20">
-                <pre>
-                  {'last first: \n\n' +
-                    JSON.stringify(lastGuiMode, null, 2) +
-                    '\n\n' +
-                    JSON.stringify(guiMode)}
-                </pre>
+        <Allotment vertical defaultSizes={[4, 1]} minSize={20}>
+          <div className="h-full">
+            <PanelHeader title="Drafting Board" />
+            <Toolbar />
+            <div className="border h-full border-gray-300 relative">
+              <div className="absolute inset-0">
+                <Canvas>
+                  <OrbitControls
+                    enableDamping={false}
+                    enablePan
+                    enableRotate={
+                      !(
+                        guiMode.mode === 'canEditSketch' ||
+                        guiMode.mode === 'sketch'
+                      )
+                    }
+                    enableZoom
+                    reverseOrbit={false}
+                  />
+                  <OrrthographicCamera
+                    ref={cam}
+                    makeDefault
+                    position={[0, 0, 1000]}
+                    zoom={100}
+                    rotation={[0, 0, 0]}
+                    far={2000}
+                  />
+                  <ambientLight />
+                  <pointLight position={[10, 10, 10]} />
+                  <RenderViewerArtifacts artifacts={geoArray} />
+                  <BasePlanes />
+                  <SketchPlane />
+                  <AxisIndicator />
+                </Canvas>
               </div>
-            )}
+              {errorState.isError && (
+                <div className="absolute inset-0 bg-gray-700/20">
+                  <pre>
+                    {'last first: \n\n' +
+                      JSON.stringify(lastGuiMode, null, 2) +
+                      '\n\n' +
+                      JSON.stringify(guiMode)}
+                  </pre>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+          <Stream />
+        </Allotment>
       </Allotment>
     </div>
   )

src/Auth.tsx

@@ -4,7 +4,7 @@ import withBaseUrl from './lib/withBaseURL'
 import App from './App'
 
 export const Auth = () => {
-  const { data: user, error } = useSWR(withBaseUrl('/user'), fetcher) as any
+  const { data: user } = useSWR(withBaseUrl('/user'), fetcher) as any
   const isLocalHost =
     typeof window !== 'undefined' && window.location.hostname === 'localhost'
 

src/components/Stream.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react'
+import { PanelHeader } from '../components/PanelHeader'
+
+export const Stream = () => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    const url = 'wss://dev.api.kittycad.io/ws/channel'
+    const [pc, socket] = [new RTCPeerConnection(), new WebSocket(url)]
+    // Connection opened
+    socket.addEventListener('open', (event) => {
+      console.log('Connected to websocket, waiting for ICE servers')
+    })
+
+    socket.addEventListener('close', (event) => {
+      console.log('websocket connection closed')
+    })
+
+    socket.addEventListener('error', (event) => {
+      console.log('websocket connection error')
+    })
+
+    // Listen for messages
+    socket.addEventListener('message', (event) => {
+      //console.log('Message from server ', event.data);
+      if (event.data instanceof Blob) {
+        const reader = new FileReader()
+
+        reader.onload = () => {
+          //console.log("Result: " + reader.result);
+        }
+
+        reader.readAsText(event.data)
+      } else {
+        const message = JSON.parse(event.data)
+        if (message.type === 'SDPAnswer') {
+          pc.setRemoteDescription(new RTCSessionDescription(message.answer))
+        } else if (message.type === 'IceServerInfo') {
+          console.log('received IceServerInfo')
+          pc.setConfiguration({
+            iceServers: message.ice_servers,
+          })
+          pc.ontrack = function (event) {
+            const el = document.createElement(
+              event.track.kind
+            ) as HTMLVideoElement
+
+            if (videoRef.current) {
+              videoRef.current.srcObject = event.streams[0]
+              videoRef.current.autoplay = true
+              videoRef.current.controls = true
+            }
+          }
+          pc.oniceconnectionstatechange = (e) =>
+            console.log(pc.iceConnectionState)
+          pc.onicecandidate = (event) => {
+            if (event.candidate === null) {
+              console.log('sent SDPOffer')
+              socket.send(
+                JSON.stringify({
+                  type: 'SDPOffer',
+                  offer: pc.localDescription,
+                })
+              )
+            }
+          }
+
+          // Offer to receive 1 video track
+          pc.addTransceiver('video', {
+            direction: 'sendrecv',
+          })
+          pc.createOffer()
+            .then((d) => pc.setLocalDescription(d))
+            .catch(console.log)
+        }
+      }
+    })
+
+    return () => {
+      socket.close()
+      pc.close()
+    }
+  }, [])
+
+  return (
+    <div>
+      <PanelHeader title="Stream" />
+      <video ref={videoRef} />
+    </div>
+  )
+}