Merge pull request #3 from viamrobotics/stream-client

Add createStreamClient hook

Author: micheal-parks

.changeset/shiny-pens-begin.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': patch
+---
+
+Add createStreamClient hook

README.md

@@ -123,6 +123,52 @@ Is moving: {isMoving.current.data ?? false}
 <button onclick={() => moveStraight.current.mutate([100, 10])}> Move </button>
 ```
 
+### createStreamClient
+
+A hook for more easily dealing with StreamClient.
+
+```svelte
+<script lang="ts">
+import { createStreamClient } from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+  name: string;
+}
+
+let { partID, name }: Props = $props();
+
+let element: HTMLVideoElement;
+
+const client = createStreamClient(
+  () => partID,
+  () => name
+);
+
+$effect(() => {
+  element.srcObject = client.mediaStream;
+});
+
+$effect(() => {
+  const [firstResolution] = client.resolutions ?? [];
+
+  console.log(firstResolution);
+
+  if (firstResolution) {
+    client.setResolution(firstResolution);
+  }
+});
+</script>
+
+<video
+  muted
+  autoplay
+  controls={false}
+  playsinline
+  bind:this={element}
+></video>
+```
+
 ### useResourceNames
 
 Wraps `client.resourceNames()` in a reactive query. Supports optional filtering by resource subtype.

src/lib/hooks/create-stream-client.svelte.ts

@@ -0,0 +1,98 @@
+import { untrack } from 'svelte';
+import { streamApi, StreamClient } from '@viamrobotics/sdk';
+import { useRobotClient } from './robot-clients.svelte';
+import {
+  createMutation,
+  createQuery,
+  queryOptions as createQueryOptions,
+} from '@tanstack/svelte-query';
+import { fromStore, toStore } from 'svelte/store';
+
+export const createStreamClient = (
+  partID: () => string,
+  resourceName: () => string
+) => {
+  let mediaStream = $state.raw<MediaStream | null>(null);
+
+  const client = useRobotClient(partID);
+  const streamClient = $derived(
+    client.current ? new StreamClient(client.current) : undefined
+  );
+
+  const handleTrack = (event: unknown) => {
+    const [stream] = (event as { streams: MediaStream[] }).streams;
+
+    if (!stream || stream.id !== resourceName()) {
+      return;
+    }
+
+    mediaStream = stream;
+  };
+
+  $effect(() => {
+    streamClient?.on('track', handleTrack);
+    return () => streamClient?.off('track', handleTrack);
+  });
+
+  $effect(() => {
+    streamClient?.getStream(resourceName());
+    return () => streamClient?.remove(resourceName());
+  });
+
+  const queryOptions = $derived(
+    createQueryOptions({
+      queryKey: [
+        'partID',
+        partID(),
+        'resource',
+        resourceName(),
+        'stream',
+        'getOptions',
+      ],
+      enabled: streamClient !== undefined,
+      queryFn: async () => {
+        return streamClient?.getOptions(resourceName());
+      },
+    })
+  );
+  const query = fromStore(createQuery(toStore(() => queryOptions)));
+  const resolutions = $derived(query.current.data);
+
+  const mutationOptions = $derived({
+    mutationKey: [
+      'partID',
+      partID(),
+      'resource',
+      resourceName(),
+      'stream',
+      'setOptions',
+    ],
+    mutationFn: async (resolution?: streamApi.Resolution) => {
+      if (resolution) {
+        return streamClient?.setOptions(
+          resourceName(),
+          resolution.width,
+          resolution.height
+        );
+      }
+
+      return streamClient?.resetOptions(resourceName());
+    },
+  });
+  const mutation = fromStore(createMutation(toStore(() => mutationOptions)));
+
+  return {
+    get current() {
+      return streamClient;
+    },
+    get mediaStream() {
+      return mediaStream;
+    },
+    get resolutions() {
+      return resolutions;
+    },
+    setResolution(resolution?: streamApi.Resolution) {
+      return untrack(() => mutation.current).mutate(resolution);
+    },
+  };
+};

src/lib/index.ts

@@ -10,5 +10,6 @@ export { createRobotMutation } from './hooks/create-robot-mutation.svelte';
 export { createResourceClient } from './hooks/create-resource-client.svelte';
 export { createResourceQuery } from './hooks/create-resource-query.svelte';
 export { createResourceMutation } from './hooks/create-resource-mutation.svelte';
+export { createStreamClient } from './hooks/create-stream-client.svelte';
 
 export { useResourceNames } from './hooks/resource-names.svelte';

src/routes/components/parts.svelte

@@ -3,6 +3,7 @@ import { useConnectionStatus, useResourceNames } from '$lib';
 import { dialConfigs } from '../configs';
 import Base from './base.svelte';
 import Camera from './camera.svelte';
+import Stream from './stream.svelte';
 import Version from './version.svelte';
 
 const partIDs = Object.keys(dialConfigs);
@@ -13,6 +14,8 @@ const status = useConnectionStatus(() => partID);
 const resources = useResourceNames(() => partID);
 const cameras = useResourceNames(() => partID, 'camera');
 const bases = useResourceNames(() => partID, 'base');
+
+let streaming = true;
 </script>
 
 <section class="p-4">
@@ -53,9 +56,16 @@ const bases = useResourceNames(() => partID, 'base');
   {/each}
 
   {#each cameras.current as { name } (name)}
-    <Camera
-      {name}
-      {partID}
-    />
+    {#if streaming}
+      <Stream
+        {name}
+        {partID}
+      />
+    {:else}
+      <Camera
+        {name}
+        {partID}
+      />
+    {/if}
   {/each}
 </section>

src/routes/components/stream.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { createStreamClient } from '$lib';
+
+interface Props {
+  partID: string;
+  name: string;
+}
+
+let { partID, name }: Props = $props();
+
+let element: HTMLVideoElement;
+
+const client = createStreamClient(
+  () => partID,
+  () => name
+);
+
+$effect(() => {
+  element.srcObject = client.mediaStream;
+});
+
+$effect(() => {
+  const [firstResolution] = client.resolutions ?? [];
+
+  console.log(firstResolution);
+
+  if (firstResolution) {
+    client.setResolution(firstResolution);
+  }
+});
+</script>
+
+<video
+  muted
+  autoplay
+  controls={false}
+  playsinline
+  bind:this={element}
+></video>