如何获得开/关序列间隔之间的时间？

Question

I'm a bit of an amateur coder, so I'll explain my issue to the best of my ability:

I'm trying to create a Morse Code Light Decoder, with the input being a video of a flashing morse code sequence, and the output being the decoded phrase.

So far, I have gotten a variable that is true when the light is on, and false when it is off. Here is a video of what I have so far:
Demo Video
And here is my program if you want to edit it:
Morse Decoder
Here is the video I am using for testing:
Test

What I'm looking for is to somehow convert the fluctuating variable in the top left to something that looks like this:

[{"state":"on", "lengthtime":"300ms"}, {"state":"off", "lengthtime":"200ms"}, {"state":"on", "lengthtime":"400ms"}, ...]

This list is each pulse/pause in order, along with the length of each pulse/pause. This would be easy to parse through and convert to morse.

Code that I check if its on or off:

function drawFrame(video) {
  let onoff = 0;

  context.drawImage(video, 0, 0);

  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  grayscaleVid(imageData.data);
  context.putImageData(imageData, 0, 0);
  var pixel = context.getImageData(112, 64, 1, 1);
  var data = pixel.data;
  const brightness = (data[0] + data[1] + data[2]) / 3;

  if (brightness > 130) {
    onoff = true;
  } else {
    onoff = false;
  }
  document.getElementById('test').innerHTML = onoff;

  setTimeout(function() {
    drawFrame(video);
  }, 10);
}

Answer 1

Set up some global storage with a history and a previous state:

const history = [];
let wasOn = False;

Adjust the brightness detection to log to history

const isOn = brightness > 130;

if (wasOn != isOn) {
  history.push({
    state: wasOn,
    timestamp: performance.now(),
  });
  wasOn = isOn;
}

Then, when done, process the results:

const results = history.map((v,i,a) => {
  if (!i) return {state: v.state, duration: 0};
  return {state: v.state, duration: v.timestamp - a[i-1].timestamp};
});

Answer 2

Ok, what you need to do is, create a timer, and every time the state changes from on to off, or vice-versa, create a new register.

let registers = []
;
let currTime = Date.now();
let onoff = false;

function drawFrame(){
  ...
  let newOnoff;
  if (brightness > 130) {
    newOnoff = true;
  } else {
    newOnoff = false;
  }

  if (newOnoff !== onoff) {
    const state = onoff === true ? 'on' : 'off';
    const newTime = Date.now();
    registers.push({state, lengthtime : (newTime - currTime) + 'ms' });
    currTime = newTime;
  }

  onoff = newOnoff;
  document.getElementById('test').innerHTML = onoff;
  
  ...
}

This code is not really pretty, but I'm just keeping the standards you're using