From 83ed22b78e8a60b4db8e2d20e193a354f92b542f Mon Sep 17 00:00:00 2001
From: bruefire <sprinkla.sendonly@gmail.com>
Date: Fri, 15 Dec 2023 04:30:47 +0900
Subject: [PATCH] fixed the logic to extract frames from mp4.

---
 js/main.js | 24 +++++++++++++-----------
 readme.md  |  3 ++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/js/main.js b/js/main.js
index 7d83747..0083fa1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -264,31 +264,33 @@ app.registerExtension({
                 async function getFramesFromVideo(file) {
                     const imageType = 'image/png';
                     let frameCount = 0;
-                    let tempCanvas = document.createElement('canvas');
-                    let ctx = tempCanvas.getContext("2d"); 
+                    let tWidth, tHeight;
                     let videoUrl = URL.createObjectURL(file);
-                    let vframes = [];
+                    let fCanvases = [];
                 
                     await getVideoFrames({
                       videoUrl,
                       async onFrame(vframe) {  // `frame` is a VideoFrame object
-                        vframes.push(vframe);
+                        let fCanvas = document.createElement('canvas');
+                        fCanvas.width = tWidth;
+                        fCanvas.height = tHeight;
+                        
+                        fCanvas.getContext('2d').drawImage(vframe, 0, 0, fCanvas.width, fCanvas.height);
+                        vframe.close();
+                        fCanvases.push(fCanvas);
                       },
                       onConfig(config) {
-                        tempCanvas.width = config.codedWidth;
-                        tempCanvas.height = config.codedHeight;
+                        tWidth = config.codedWidth;
+                        tHeight = config.codedHeight;
                       },
                       onFinish() {
                       },
                     });
 
                     let frames = await Promise.all(
-                        vframes.map(vframe => 
+                        fCanvases.map(fCanvas => 
                             new Promise((resolve, reject) => {
-                                ctx.drawImage(vframe, 0, 0, tempCanvas.width, tempCanvas.height);
-                                vframe.close();
-                                
-                                tempCanvas.toBlob(blob => {
+                                fCanvas.toBlob(blob => {
                                     if (blob) {
                                         blob.name = ("00000000" + frameCount++).slice(-8) + ".png";
                                         resolve(blob);
diff --git a/readme.md b/readme.md
index a3989c7..5e9a6db 100644
--- a/readme.md
+++ b/readme.md
@@ -24,7 +24,8 @@ This is in the Image category.
 
 ### About "VideoFrameExtractor" Node
 Instead of specifying a directory containing frames, you specify a video file. Currently, only mp4 format is supported. 
-Otherwise, it is the same as the SequentialImageLoader Node.
+Otherwise, it is the same as the SequentialImageLoader Node.  
+(I used [getVideoFrames.js](https://github.com/josephrocca/getVideoFrames.js) for extracting frames from MP4)
 
 ### About the Mask Editor
 1. After loading the frames, right-click the node and select "Open In MaskEditor".