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

【问题标题】：How to get time between intervals of an on/off sequence?如何获得开/关序列间隔之间的时间？
【发布时间】：2021-06-26 17:48:39
【问题描述】：

我有点业余编码，所以我会尽我所能解释我的问题：

我正在尝试创建一个莫尔斯电码光解码器，输入是闪烁的莫尔斯电码序列的视频，输出是解码后的短语。

到目前为止，我得到了一个变量，当灯亮时为真，当灯熄灭时为假。这是我目前所拥有的视频：
Demo Video
如果你想编辑它，这是我的程序：
Morse Decoder
这是我用于测试的视频：
Test

我正在寻找的是以某种方式将左上角的波动变量转换为如下所示：

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

此列表按顺序列出每个脉冲/暂停，以及每个脉冲/暂停的长度。这将很容易解析并转换为莫尔斯。

我检查它是打开还是关闭的代码：

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);
}

【问题讨论】：

代码被删除...请在问题中添加代码。
@NinaScholz 抱歉，已修复。
你能显示在顶部显示值 true/false 的代码吗？
@iagowp 它在文件中，但这里是那部分： if (brightness > 130) { onoff = true; } 其他 { onoff = false; } document.getElementById('test').innerHTML = onoff;
我不会从其他地方下载文件。在提出问题时，您应该尝试将问题的相关代码放在问题本身上，以便将来保持有用。就像现在一样，您可以从云端硬盘中删除该代码，而这个问题对其他人来说毫无用处

标签： javascript html variables html5-canvas morse-code

【解决方案1】：

设置一些具有历史和先前状态的全局存储：

const history = [];
let wasOn = False;

调整亮度检测记录到history

const isOn = brightness > 130;

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

然后，完成后，处理结果：

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};
});

【讨论】：

追加？你的意思是推吗？
我用过这个，它奏效了。唯一的问题是，当您打开一个新窗口/选项卡并让它在后台运行时，它开始搞砸了。你知道为什么吗？这就是我所拥有的：codepen.io/artsydude/pen/OJmNymV
现代浏览器中的背景选项卡受到限制，因此不会实时更新。视频不会更新，并且 javascript 事件的处理速度会降低。 setTimeout() 尤其受此影响，因为它的时间只能保证大于或等于请求的延迟。 .requestAnimationFrame() 也受到影响，因为后台选项卡不经常更新。
@Ouroborus 有什么办法可以解决这个问题吗？
不确定。修复 setTimeout() 的方法是在 Web Worker 上下文中运行它。但是，我很确定您无法在这种情况下正常处理视频，因为没有 DOM，也无法创建元素。当然，您可以在服务器端处理它。

【解决方案2】：

好的，你需要做的是，创建一个定时器，每次状态从开启变为关闭，反之亦然，创建一个新的寄存器。

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;
  
  ...
}

这段代码不是很漂亮，但我只是保持你使用的标准

【讨论】：