{
const context = DOM.context2d(width, height);
const image = DOM.context2d(width, height);
const colWidth = Math.round((width * pixelRatio) / 50);
const rowHeight = Math.round((height * pixelRatio) / 50);
let nextFrameTime = +new Date();
const frameTime = 1000 / framesPerSecond;
while(stream){
if (+new Date() > nextFrameTime) {
nextFrameTime = +new Date() + frameTime;
image.drawImage(stream, 0, 0, width, height);
const newOrder = new Array(50).fill(1).flatMap( (_, row) =>
new Array(50).fill(1).map( (_, col) => {
const data = image.getImageData(col * colWidth, row * rowHeight, colWidth, rowHeight);
const { average } = getCorners(data);
return {
left: col * colWidth,
top: row * rowHeight,
average,
}
})
).sort((a,b) => b.average - a.average)
newOrder.forEach(({ top, left }, idx) => {
context.putImageData(imgData[idx].data, left, top);
})
}
yield context.canvas;
}
}