<span class="error"></span>
<br>
<label for="interval">Time between images in seconds: </label>
<input id="interval" type="text" value="1" min="1" pattern="\d+">
<br>
<button id="start">Start</button>
<br>
<label for="hideVid">Hide video element: </label>
<input id="hideVid" type="checkbox">
<video autoplay muted playsinline></video>
<p>
  Images captured: <span id="image_count">0</span>
</p>
<br>
<button id="stop" disabled>Stop & Show Images</button>
<div id="images"></div>

// show an error if not supported
if (typeof MediaStreamTrackProcessor === "undefined") {
  const supportError =
    "MediaStreamTrackProcessor is not supported by your browser";
  const errorSpan = document.querySelector("span.error");
  errorSpan.style = "color:red;font-size:larger;font-weight:bold";
  errorSpan.innerText = supportError;
  console.error(supportError);
}

const startBtn = document.querySelector("button#start");
const stopBtn = document.querySelector("button#stop");
const hideVid = document.querySelector("input#hideVid");
const intervalSec = document.querySelector("input#interval");
const videoElem = document.querySelector("video");
const imageCountSpan = document.querySelector("span#image_count");
const imagesDiv = document.querySelector("div#images");
const storage = []; // Use this array as our database
let stream, captureInterval;

hideVid.onclick = () => (videoElem.hidden = hideVid.checked);
startBtn.onclick = async () => {
  startBtn.disabled = true;

  stream = await navigator.mediaDevices.getUserMedia({ video: true });
  videoElem.onplaying = () =>
    console.log("video playing stream:", videoElem.srcObject);
  videoElem.srcObject = stream;

  const [track] = stream.getVideoTracks();
  const processor = new MediaStreamTrackProcessor(track);
  const reader = await processor.readable.getReader();

  async function readFrame() {
    const { value: frame, done } = await reader.read();
    // value = frame
    if (frame) {
      const bitmap = await createImageBitmap(frame);
      console.log(bitmap);
      storage.push(bitmap);
      imageCountSpan.innerText++;
      // frame.close();
    }
    if (done) clearInterval(captureInterval);
  }

  stopBtn.disabled = false;
  const interval =
    (parseInt(intervalSec.value) >= 1 ? intervalSec.value * 1 : 1) * 1000;
  captureInterval = setInterval(async () => await readFrame(), interval);
};

stopBtn.onclick = () => {
  // close the camera
  stream.getTracks().forEach((track) => track.stop());

  // Display each image
  async function showImages() {
    const bitmap = storage.shift();
    const width = bitmap.width;
    const height = bitmap.height;

    console.log(bitmap);
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("bitmaprenderer");
    ctx.transferFromImageBitmap(bitmap);
    imagesDiv.appendChild(canvas);

    if (storage.length > 0) await showImages();
  }

  console.log("stored images");
  showImages();
};