Skip to content
Seyddocs

Quickstart: drive the demo

The demo robot seyd-demo is a real steerable camera on a real network, enrolled in the deployed cloud with a public grant. Anyone may observe and drive it without an account. This page puts it in a page of your own.

What you need

Section titled “What you need”
  • Chrome or Edge, on a desktop or an Android handset. The pilot uses WebTransport with a certificate fingerprint pinned per robot, and Apple’s browsers do not implement that, so Safari cannot connect and neither can any browser on an iPhone or iPad, since they are all WebKit.
  • Node and pnpm, to build the SDK from a checkout.
  • Nothing on the robot side. The demo robot is already running.

Step 0: drive it without writing anything

Section titled “Step 0: drive it without writing anything”

Open the deployed pilot page and take the wheel:

https://seyd-signal-flj7s44j4a-ew.a.run.app/pilot/?robot=seyd-demo

Press S to show the HUD: the path the session won, the round-trip time, the frame rate, the bitrate and the glass-to-glass estimate. If the page says the session is relayed, in amber, the direct race failed from your network; the guidance box says what it found.

Step 1: get @seyd/web

Section titled “Step 1: get @seyd/web”

The packages are not published to npm yet. @seyd/web and @seyd/core are workspace packages in the Seyd repository, so today you build them from a checkout:

Terminal window
git clone https://github.com/seyd-io/seyd.git
cd seyd
pnpm install
pnpm -r build

Then depend on the built package from your own project. Inside the workspace (a package under web/ or sdks/js/), the way the demo does it:

"@seyd/web": "workspace:*"

Outside the workspace, point at the built package directory:

"@seyd/web": "file:../seyd/sdks/js/web"

@seyd/web depends on @seyd/core from the same checkout, so both must be built before you install.

Step 2: the page

Section titled “Step 2: the page”

This is the smallest pilot page, the file in the repository that the SDK ships as its example. Serve it from a bundler that resolves @seyd/web (Vite, esbuild, webpack), or replace the import with the path to your built bundle.

sdks/js/web/examples/minimal.html
<!--
  Copyright 2026 Anton Gravestam
  SPDX-License-Identifier: Apache-2.0
-->
<!doctype html>
<!-- minimal.html — the smallest pilot page: one element, one robot.
     Serve it from a bundler that resolves @seyd/web (Vite, esbuild, webpack)
     or replace the import with the path to your built bundle. -->
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My robot</title>
  <style>
    body { margin: 0; background: #000; }
    seyd-video { display: block; width: 100vw; height: 100vh; }
    seyd-hud { position: fixed; top: 10px; left: 10px; }
    seyd-connect-error { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); }
  </style>
</head>
<body>
  <seyd-video id="video" robot-id="my-robot" signal-url="wss://signal.seyd.io/ws"></seyd-video>
  <seyd-hud id="hud"></seyd-hud>
  <seyd-connect-error id="err"></seyd-connect-error>
  <script type="module">
    import '@seyd/web';
    const video = document.getElementById('video');
    // The element creates a SeydSession and hands it out once; wire the HUD
    // and the guidance box to it, and send commands through it.
    video.addEventListener('seyd-session', (e) => {
      const session = e.detail;
      document.getElementById('hud').session = session;
      document.getElementById('err').session = session;
      session.on('sensor', ({ channel, data }) => console.log(channel.name, data));
      window.addEventListener('keydown', (k) => {
        if (k.key === 'ArrowUp') session.send('drive', { throttle: 1 });
      });
    });
  </script>
</body>
</html>

Two attributes to change for the demo:

  • robot-id="seyd-demo"
  • signal-url="wss://seyd-signal-flj7s44j4a-ew.a.run.app/ws"

Three elements do the work. <seyd-video> creates the session, connects and paints the feed. <seyd-hud> shows the numbers and toggles on S. <seyd-connect-error> is the guidance box: when the direct path fails it names what it found and the setting to change, and while a session is relayed it says so. The seyd-session event hands you the SeydSession once; use it to read sensors and send commands.

The demo robot’s command channel is named ptz and takes JSON like {"pan": 20, "tilt": 0, "zoom": 0}. The example sends on a channel named drive; rename it to ptz to move the camera from your page.

The signal URL

Section titled “The signal URL”

signal-url is the cloud your robot announced itself to. The deployed Seyd cloud is at wss://seyd-signal-flj7s44j4a-ew.a.run.app/ws, and that is where seyd-demo lives. A cloud you run yourself has its own URL, and a robot and a pilot must use the same one, because that is where the introduction happens. The signal socket carries a few kilobytes; the video goes directly from the robot to your browser.

What you should see

Section titled “What you should see”

The status line goes from connecting to the winning path, and the video appears. Press S for the HUD. If the direct race fails, the guidance box explains why and, if the robot allows a relay, the session continues through the cloud with an amber RELAY badge on the video for as long as it lasts. ?paths=none on the demo page forces the race to fail so you can see that path; ?relay=0 refuses the relay; <seyd-video relay="0"> does the same in your page.

Then run your own robot

Section titled “Then run your own robot”

The demo robot is public. Yours will not be: it enrols with a one-time token from the console, and pilots reach it with a session token minted for them.