Capture Webcam

https://stackoverflow.com/q/69362269/5980430

HTML

<form id="form" action="" method="POST" enctype="multipart/form-data">
  <video id="player" controls autoplay style="float:right"></video>
  <button type="button" id="capture" title="When the preview show a cicle, click">ClickMe</button>
  <input type="text" id="radius" value="20" size="3" title="Actual radius of the circle in cm">cm&nbsp;Radius<br>
  <span id="message">Please allow the page to access your camera, and then run again. </span><br>
  input:<br><canvas id="canvas" width=320 height=240></canvas>
</form>
output:<br><canvas id="canvasOutput" width=320 height=240></canvas>
<script async src="https://cdn.rawgit.com/ssmxgo/opencv.js/ff19899a/build/asm.js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

CSS

//form *{max-width:20vw;}
//img{display:inline-block;}
//canvas{display:none;}

JavaScript

const cal_dist = 10 //this is the calibration factor we don't know.
/*
we need to find it's correct value by measuring the actual distance,
the real diameter of the circle (which we can quickly change in the 
form) and doing a quick calculation. 
*/
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
const message = document.getElementById('message')
var cv

function out(msg, replace=true) {//add or replace message span
	if (replace) message.innerHTML = ""
  message.innerHTML = msg+"<br>"+message.innerHTML
}

const constraints = { video: {width: {exact: 320}, height: {exact: 240} } }
navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => { 
  	out((!cv)?"Waiting on OpenCV":"Ready. Show me a black dot on a white background, then clickme") 
  	player.srcObject = stream;
    })
  .catch((err) => {
  	out(err+". Simulating Capture. For live results, allow webcam access (click left of URL) then rerun")
    })
  
function onOpenCvReady() { console.log("OpenCV up")
  out("Ready. Show me a black dot on a white background, then clickme") 
  // https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html
  if (null === player.srcObject) { //if we don't have the cam, put in a fake image
    out("Simulating Capture. For live results, allow webcam access (click left of URL) then rerun")
    context.fillStyle = "white"; //default is transparent black
    context.fillRect(0,0,context.canvas.width,context.canvas.height)
    context.fillStyle = "blue";
    context.arc(100, 75, 10, 0, 2 * Math.PI);
    //context.arc(50, 75, 10, 0, 2 * Math.PI);
    context.fill()
  }
}

captureButton.addEventListener('click', (e) => { console.log("click")
	if (null !== player.srcObject) {context.drawImage(player, 0, 0)}
	let dp = 1, min_dist = 45, high_thresh = 75, accum_thresh = 40
  let min_radius =...