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";

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
    const camera = new CameraClient(machine, "camera-1");

    // Get the sensor
    const sensor = new SensorClient(machine, "sensor-1");

    // Get image from camera
    const image = await camera.getImage();

    // Convert Uint8Array to base64
    const base64Image = btoa(
      Array.from(image)
        .map((byte) => String.fromCharCode(byte))
        .join(""),
    );

    // Convert image to base64 and display it
    const imageElement = document.createElement("img");
    imageElement.src = `data:image/jpeg;base64,${base64Image}`;
    const imageContainer = document.getElementById("insert-image");
    if (imageContainer) {
      imageContainer.innerHTML = "";
      imageContainer.appendChild(imageElement);
    }

    // Get readings from sensor
    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 = main;
    }
  } 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-image");
    if (imageContainer) {
      imageContainer.innerHTML = errorMessage;
    }

    const readingsContainer = document.getElementById("insert-readings");
    if (readingsContainer) {
      readingsContainer.innerHTML = errorMessage;
    }
  } finally {
    // Close the connection
    await machine.disconnect();
  }
};

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