bwhsu/example2

1 2const video = document.getElementById("video");3const canvas = document.getElementById("processed");4const ctx = canvas.getContext("2d");5const resultEl = document.getElementById("result");6 7async function setupCamera() {8  const stream = await navigator.mediaDevices.getUserMedia({ video: true });9  video.srcObject = stream;10  await new Promise((resolve) => (video.onloadedmetadata = resolve));11}12 13function preprocessFrame() {14  const tmpCanvas = document.createElement("canvas");15  tmpCanvas.width = 28;16  tmpCanvas.height = 28;17  const tmpCtx = tmpCanvas.getContext("2d");18  tmpCtx.drawImage(video, 0, 0, 28, 28);19  const imageData = tmpCtx.getImageData(0, 0, 28, 28).data;20  const gray = [];21  for (let i = 0; i < imageData.length; i += 4) {22    gray.push(imageData[i] / 255); // normalize23  }24  ctx.putImageData(tmpCtx.getImageData(0, 0, 28, 28), 0, 0);25  return new ort.Tensor("float32", new Float32Array(gray), [1, 1, 28, 28]);26}27 28async function loadModel() {29  return await ort.InferenceSession.create("model.onnx");30}31 32async function run() {33  await setupCamera();34  const session = await loadModel();35  setInterval(async () => {36    const tensor = preprocessFrame();37    const output = await session.run({ input: tensor });38    const preds = output.output.data;39    const digit = preds.indexOf(Math.max(...preds));40    resultEl.innerText = digit;41  }, 1000);42}43run();44