diff --git a/s/context/controllers/video-export/controller.ts b/s/context/controllers/video-export/controller.ts index f77d0ea..2c3ae03 100644 --- a/s/context/controllers/video-export/controller.ts +++ b/s/context/controllers/video-export/controller.ts @@ -79,13 +79,13 @@ export class VideoExport { } } for(const draw of draw_queue) {draw()} - this.#encode_composed_frame(this.canvas) + await this.#encode_composed_frame(this.canvas, frame_duration ?? Math.ceil(1000/60)) this.#timestamp += frame_duration ?? Math.ceil(1000/60) const progress = this.#timestamp / this.#timestamp_end * 100 // for progress bar this.actions.set_export_progress(progress) - if(this.#timestamp >= this.#timestamp_end) { + if(Math.ceil(this.#timestamp) >= this.#timestamp_end) { this.#encode_worker.postMessage({action: "get-binary"}) this.#encode_worker.onmessage = async (msg) => { if(msg.data.action === "binary") { @@ -101,19 +101,26 @@ export class VideoExport { requestAnimationFrame(() => this.#export_process(effects)) } - get #frame_config(): VideoFrameInit { + #frame_config(canvas: HTMLCanvasElement, duration: number): VideoFrameInit { return { - displayWidth: this.canvas.width, - displayHeight: this.canvas.height, - duration: 1000000/30, + displayWidth: canvas.width, + displayHeight: canvas.height, + duration, timestamp: this.#timestamp * 1000 } } - #encode_composed_frame(canvas: HTMLCanvasElement) { - const frame = new VideoFrame(canvas, this.#frame_config) + #encode_composed_frame(canvas: HTMLCanvasElement, duration: number) { + const frame = new VideoFrame(canvas, this.#frame_config(canvas, duration)) this.#encode_worker.postMessage({frame, action: "encode"}) frame.close() + return new Promise((resolve) => { + this.#encode_worker.onmessage = (msg) => { + if(msg.data.action === "encoded") { + resolve(true) + } + } + }) } #get_frame_from_video(effect: VideoEffect, timestamp: number): Promise { diff --git a/s/context/controllers/video-export/encode_worker.ts b/s/context/controllers/video-export/encode_worker.ts index 44dadbc..8e0c226 100644 --- a/s/context/controllers/video-export/encode_worker.ts +++ b/s/context/controllers/video-export/encode_worker.ts @@ -6,6 +6,7 @@ async function handleChunk(chunk: EncodedVideoChunk) { const chunkData = new Uint8Array(chunk.byteLength); chunk.copyTo(chunkData) binary_accumulator.addChunk(chunkData) + self.postMessage({action: "encoded"}) } // for later: https://github.com/gpac/mp4box.js/issues/243