From efa3bc7ac6ff964a0ad0b6d7f241a27f747b105d Mon Sep 17 00:00:00 2001
From: Adam Sunderland <adam@kittycad.io>
Date: Tue, 20 Jun 2023 16:51:12 -0400
Subject: [PATCH] Use trickle ICE (#136)

* Try trickle ice setup

* Fix typo

* Append auth to api.dev too
---
 src/components/Stream.tsx | 24 ++++++++++++++++++++++--
 src/lib/withBaseURL.ts    |  2 +-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Stream.tsx b/src/components/Stream.tsx
index 934beaa73..c91bfd2e1 100644
--- a/src/components/Stream.tsx
+++ b/src/components/Stream.tsx
@@ -10,7 +10,7 @@ export const Stream = () => {
       typeof RTCPeerConnection === 'undefined'
     )
       return
-    const url = 'wss://dev.api.kittycad.io/ws/modeling/commands'
+    const url = 'wss://api.dev.kittycad.io/ws/modeling/commands'
     const [pc, socket] = [new RTCPeerConnection(), new WebSocket(url)]
     // Connection opened
     socket.addEventListener('open', (event) => {
@@ -40,16 +40,20 @@ export const Stream = () => {
         const message = JSON.parse(event.data)
         if (message.type === 'SDPAnswer') {
           pc.setRemoteDescription(new RTCSessionDescription(message.answer))
+        } else if (message.type === 'TrickleIce') {
+          console.log("got remote trickle ice");
+          pc.addIceCandidate(message.candidate);
         } else if (message.type === 'IceServerInfo') {
           console.log('received IceServerInfo')
           pc.setConfiguration({
             iceServers: message.ice_servers,
+            iceTransportPolicy: "relay",
           })
           pc.ontrack = function (event) {
             if (videoRef.current) {
               videoRef.current.srcObject = event.streams[0]
-              videoRef.current.autoplay = true
               videoRef.current.muted = true
+              videoRef.current.autoplay = true
               videoRef.current.controls = false
             }
           }
@@ -64,6 +68,15 @@ export const Stream = () => {
                   offer: pc.localDescription,
                 })
               )
+            } else {
+              console.log("sending trickle ice candidate");
+              const {
+                candidate
+              } = event;
+              socket.send(JSON.stringify({
+                type: "TrickleIce",
+                candidate: candidate.toJSON(),
+              }));
             }
           }
 
@@ -73,6 +86,13 @@ export const Stream = () => {
           })
           pc.createOffer()
             .then((d) => pc.setLocalDescription(d))
+            .then(() => {
+              console.log("sent SDPOffer begin");
+              socket.send(JSON.stringify({
+                type: "SDPOffer",
+                offer: pc.localDescription,
+              }));
+            })
             .catch(console.log)
         }
       }
diff --git a/src/lib/withBaseURL.ts b/src/lib/withBaseURL.ts
index cd0774181..a80b97349 100644
--- a/src/lib/withBaseURL.ts
+++ b/src/lib/withBaseURL.ts
@@ -1,4 +1,4 @@
 export default function withBaseUrl(path: string): string {
-  const baseUrl = 'https://dev.api.kittycad.io'
+  const baseUrl = 'https://api.dev.kittycad.io'
   return baseUrl + path
 }