return html`

      <video id="video"></video>

      <div id="stack">

        <img src="zebra.png" />

        <canvas id="canvas"></canvas>

      </div>

      <div id="controls">

        <p>saturated pixels: ${saturatedCountDisplay}</p>

        <light9-camera-settings-table .cam=${this} .videoSettings=${this.videoSettings}></light9-camera-settings-table>

      </div>

    `;

  }

  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {

    this.videoEl = this.shadowRoot!.getElementById("video") as HTMLVideoElement;

    this.canvas = this.shadowRoot!.getElementById("canvas") as HTMLCanvasElement;

    this.ctx = this.canvas.getContext("2d", { willReadFrequently: true })!;

    const constraints: MediaStreamConstraints = {

      video: {

        facingMode: { ideal: "environment" },

        frameRate: { max: 10 },

      },

    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    const t = stream.getVideoTracks()[0];

    await t.applyConstraints({

      brightness: 0,

      contrast: 32,

      colorTemperature: 6600,

      exposureMode: "manual",

      exposureTime: 250,

      whiteBalanceMode: "manual",

      focusMode: "manual",

      focusDistance: 235,

    } as MediaTrackConstraints);

    this.vtrack = t;

    this.videoEl.srcObject = stream;

    this.videoEl.play();

    this.videoSettings = this.vtrack.getSettings();

    this.redrawLoop();

  }

  redrawLoop() {