RSDK-1019 use ts wrapper for streaming

web/frontend/package.json

@@ -8,7 +8,7 @@
     "@mdi/js": "^6.9.96",
     "@viamrobotics/prime": "^0.0.100",
     "@viamrobotics/rpc": "^0.1.32",
-    "@viamrobotics/sdk": "^0.0.9",
+    "@viamrobotics/sdk": "^0.0.10",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vueuse/core": "^9.3.1",
     "eslint-import-resolver-custom-alias": "^1.3.0",

web/frontend/src/components/audio-input.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
 import { ref } from 'vue';
+import { StreamClient } from '@viamrobotics/sdk';
 import type { Client, ServiceError } from '@viamrobotics/sdk';
 import { displayError } from '../lib/error';
-import { addStream, removeStream } from '../lib/stream';
 
 interface Props {
   name: string
@@ -19,17 +19,18 @@ const toggleExpand = async () => {
 
   const isOn = audioInput.value;
 
+  const streams = new StreamClient(props.client);
   if (isOn) {
     try {
-      await addStream(props.client, props.name);
+      await streams.add(props.name);
     } catch (error) {
       displayError(error as ServiceError);
     }
     return;
   }
 
   try {
-    await removeStream(props.client, props.name);
+    await streams.remove(props.name);
   } catch (error) {
     displayError(error as ServiceError);
   }

web/frontend/src/components/base.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 
 import { ref, onMounted, onUnmounted } from 'vue';
-import { Client, type ServiceError, BaseClient, commonApi } from '@viamrobotics/sdk';
+import { Client, BaseClient, commonApi, StreamClient } from '@viamrobotics/sdk';
+import type { ServiceError } from '@viamrobotics/sdk';
 import { filterResources } from '../lib/resource';
 import { displayError } from '../lib/error';
 import KeyboardInput, { type Keys } from './keyboard-input.vue';
-import { addStream, removeStream } from '../lib/stream';
 import { cameraStreamStates, baseStreamStates } from '../lib/camera-state';
 
 interface Props {
@@ -192,12 +192,13 @@ const baseRun = async () => {
 };
 
 const viewPreviewCamera = (values: string) => {
+  const streams = new StreamClient(props.client);
   for (const [key] of baseStreamStates) {
     if (values.split(',').includes(key)) {
       try {
         // Only add stream if other components have not already
         if (!cameraStreamStates.get(key) && !baseStreamStates.get(key)) {
-          addStream(props.client, key);
+          streams.add(key);
         }
       } catch (error) {
         displayError(error as ServiceError);
@@ -207,7 +208,7 @@ const viewPreviewCamera = (values: string) => {
       try {
         // Only remove stream if other components are not using the stream
         if (!cameraStreamStates.get(key)) {
-          removeStream(props.client, key);
+          streams.remove(key);
         }
       } catch (error) {
         displayError(error as ServiceError);

web/frontend/src/components/camera.vue

@@ -2,11 +2,10 @@
 
 import { ref, onMounted } from 'vue';
 import { displayError } from '../lib/error';
-import { CameraClient, Camera, Client, commonApi, ServiceError } from '@viamrobotics/sdk';
+import { StreamClient, CameraClient, Camera, Client, commonApi, ServiceError } from '@viamrobotics/sdk';
 import { toast } from '../lib/toast';
 import InfoButton from './info-button.vue';
 import PCD from './pcd.vue';
-import { addStream, removeStream } from '../lib/stream';
 import { cameraStreamStates, baseStreamStates } from '../lib/camera-state';
 
 interface Props {
@@ -36,11 +35,12 @@ const initStreamState = () => {
 };
 
 const viewCamera = async (isOn: boolean) => {
+  const streams = new StreamClient(props.client);
   if (isOn) {
     try {
       // only add stream if not already active
       if (!baseStreamStates.get(props.cameraName) && !cameraStreamStates.get(props.cameraName)) {
-        await addStream(props.client, props.cameraName);
+        await streams.add(props.cameraName);
       }
     } catch (error) {
       displayError(error as ServiceError);
@@ -50,7 +50,7 @@ const viewCamera = async (isOn: boolean) => {
     try {
       // only remove camera stream if active and base stream is not active
       if (!baseStreamStates.get(props.cameraName) && cameraStreamStates.get(props.cameraName)) {
-        await removeStream(props.client, props.cameraName);
+        await streams.remove(props.cameraName);
       }
     } catch (error) {
       displayError(error as ServiceError);