Create a web app

main.ts connects to the machine and accesses the camera and sensor:

// This code must be run in a browser environment.
import * as VIAM from "@viamrobotics/sdk";
import { CameraClient, SensorClient } from "@viamrobotics/sdk";

let isStreaming = false;
let camera: CameraClient;
let stream: StreamClient;
let animationFrameId: number;
let machine: VIAM.RobotClient;

const main = async () => {
  const host = "demo-main.abcdefg1234.viam.cloud";

  const machine = await VIAM.createRobotClient({
    host,
    credentials: {
      type: "api-key",
      /* Replace "<API-KEY>" (including brackets) with your machine's API key */
      payload: "<API-KEY>",
      /* Replace "<API-KEY-ID>" (including brackets) with your machine's API key ID */
      authEntity: "<API-KEY-ID>",
    },
    signalingAddress: "https://app.viam.com:443",
  });

  try {
    // Get the camera and stream clients
    camera = new CameraClient(machine, "camera-1");

    // Start the camera stream
    startStream();

    // Get readings from sensor
    const sensor = new SensorClient(machine, "sensor-1");
    const readings = await sensor.getReadings();

    // Create HTML to display sensor readings
    const readingsHtml = document.createElement("div");
    for (const [key, value] of Object.entries(readings)) {
      const reading = document.createElement("p");
      reading.textContent = `${key}: ${value}`;
      readingsHtml.appendChild(reading);
    }

    // Display the readings
    const readingsContainer = document.getElementById("insert-readings");
    if (readingsContainer) {
      readingsContainer.innerHTML = "";
      readingsContainer.appendChild(readingsHtml);
    }

    // Add refresh button functionality
    const refreshButton = document.getElementById("refresh-button");
    if (refreshButton) {
      refreshButton.onclick = async () => {
        try {
          const newReadings = await sensor.getReadings();
          const readingsHtml = document.createElement("div");
          for (const [key, value] of Object.entries(newReadings)) {
            const reading = document.createElement("p");
            reading.textContent = `${key}: ${value}`;
            readingsHtml.appendChild(reading);
          }

          if (readingsContainer) {
            readingsContainer.innerHTML = "";
            readingsContainer.appendChild(readingsHtml);
          }
        } catch (error) {
          console.error("Error refreshing sensor data:", error);
        }
      };
    }
  } catch (error) {
    console.error("Error:", error);
    const errorMessage = `<p>Error: ${error instanceof Error ? error.message : "Failed to get data"}</p>`;

    const imageContainer = document.getElementById("insert-stream");
    if (imageContainer) {
      imageContainer.innerHTML = errorMessage;
    }

    const readingsContainer = document.getElementById("insert-readings");
    if (readingsContainer) {
      readingsContainer.innerHTML = errorMessage;
    }
  }

  // Add cleanup on page unload
  window.addEventListener("beforeunload", () => {
    stopStream();
    machine.disconnect();
  });
};

const updateCameraStream = async () => {
  if (!isStreaming) return;

  try {
    const imageContainer = document.getElementById("insert-stream");
    if (imageContainer) {
      // Create or update video element
      let videoElement = imageContainer.querySelector("video");
      if (!videoElement) {
        videoElement = document.createElement("video");
        videoElement.autoplay = true;
        videoElement.muted = true;
        imageContainer.innerHTML = "";
        imageContainer.appendChild(videoElement);
      }

      // Get and set the stream every frame
      const mediaStream = await stream.getStream("camera-1");
      videoElement.srcObject = mediaStream;

      // Ensure video plays
      try {
        await videoElement.play();
      } catch (playError) {
        console.error("Error playing video:", playError);
      }
    }

    // Request next frame
    animationFrameId = requestAnimationFrame(() => updateCameraStream());
  } catch (error) {
    console.error("Stream error:", error);
    stopStream();
  }
};

const startStream = () => {
  // Initialize stream client
  stream = new StreamClient(machine);
  isStreaming = true;
  updateCameraStream();
};

const stopStream = () => {
  isStreaming = false;
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }
};

main().catch((error: unknown) => {
  console.error("encountered an error:", error);
});