music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
perf: offscreen export
+8
-2
+8
-2
src/output.ts
+8
-2
src/output.ts
···
33
33
: Math.ceil(buffer.duration * fps);
34
34
const EMPTY_FREQ = new Uint8Array(0);
35
35
36
+
// move rendering to offscreen canvas for export to avoid
37
+
// browser painting
38
+
const offscreen = document.createElement("canvas");
39
+
offscreen.width = canvas.width;
40
+
offscreen.height = canvas.height;
41
+
36
42
const output = new Output({
37
43
format: new WebMOutputFormat(),
38
44
target: new BufferTarget(),
39
45
});
40
46
41
-
const sourceVideo = new CanvasSource(canvas, {
47
+
const sourceVideo = new CanvasSource(offscreen, {
42
48
codec: "vp8",
43
49
bitrate: quality,
44
50
});
···
55
61
56
62
for (let i = 0; i < frameCount; i++) {
57
63
const freq = freqFrames ? freqFrames[i] : EMPTY_FREQ;
58
-
draw(canvas, freq, options, 1 / fps);
64
+
draw(offscreen, freq, options, 1 / fps);
59
65
await sourceVideo.add(i / fps, 1 / fps);
60
66
onProgress?.(i + 1, frameCount);
61
67
}