polotno-node 2.9.18 → 2.9.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno-node",
-  "version": "2.9.18",
+  "version": "2.9.20",
   "description": "Polotno workflow from NodeJS",
   "main": "index.js",
   "scripts": {

package/video-parallel.js

@@ -25,7 +25,14 @@ const downloadVideo = async (url, destination) => {
 const convertToWebM = (input, output) => {
   return new Promise((resolve, reject) => {
     ffmpeg(input)
-      .outputOptions(['-c:v libvpx', '-crf 30', '-b:v 1000k'])
+      .outputOptions([
+        '-c:v libvpx',
+        '-crf 30',
+        '-b:v 1000k',
+        '-quality realtime',
+        '-speed 4',
+        '-threads 4',
+      ])
       .output(output)
       .on('start', () => {})
       .on('end', () => {
@@ -50,17 +57,21 @@ const fileToDataUrl = (filename) => {
 };
 
 const videoToDataURL = async (url, tempFolder) => {
-  console.log('Downloading video: ' + url.slice(0, 50) + '...');
+  const shortUrl = url.slice(0, 50) + '...';
+  console.log('Downloading video: ' + shortUrl);
   const filename = Math.random().toString(36).substring(7);
-  const destination = path.join(tempFolder.name, filename + '.mp4');
-  await downloadVideo(url, destination);
-  const webmFile = destination.replace('.mp4', '.webm');
-  await convertToWebM(destination, webmFile);
-  const dataURL = await fileToDataUrl(webmFile);
-  console.log('Downloading video finished: ' + url.slice(0, 50) + '...');
+  const mp4Destination = path.join(tempFolder.name, filename + '.mp4');
+  await downloadVideo(url, mp4Destination);
+  console.log('Converting video to webm: ' + mp4Destination);
+  const webmDestination = mp4Destination.replace('.mp4', '.webm');
+  await convertToWebM(mp4Destination, webmDestination);
+  fs.unlinkSync(mp4Destination);
+  const dataURL = await fileToDataUrl(webmDestination);
+
+  console.log('Converting video finished: ' + webmDestination);
   return {
     dataURL,
-    file: webmFile,
+    file: webmDestination,
   };
 };
 
@@ -74,208 +85,225 @@ const cachedVideoToDataURL = async (url, tempFolder) => {
 
 module.exports.jsonToVideo = async function jsonToVideo(inst, json, attrs) {
   const tempFolder = tmp.dirSync();
+  // const tempFolder = {
+  //   name: './temp',
+  // };
 
-  const videoEls = [];
+  try {
+    const videoEls = [];
 
-  for (const page of json.pages) {
-    for (const el of page.children) {
-      if (el.type === 'video') {
-        videoEls.push(el);
+    for (const page of json.pages) {
+      for (const el of page.children) {
+        if (el.type === 'video') {
+          videoEls.push(el);
+        }
       }
     }
-  }
 
-  await Promise.all(
-    videoEls.map(async (el) => {
-      const { dataURL, file } = await cachedVideoToDataURL(el.src, tempFolder);
-      el.src = dataURL;
-      el.file = file;
-    })
-  );
+    await Promise.all(
+      videoEls.map(async (el) => {
+        const { dataURL, file } = await cachedVideoToDataURL(
+          el.src,
+          tempFolder
+        );
+        el.src = dataURL;
+        el.file = file;
+      })
+    );
 
-  const duration = json.pages.reduce((acc, page) => {
-    return acc + (page.duration ?? 5000);
-  }, 0);
-  const parallel = attrs.parallel || 5;
+    const duration = json.pages.reduce((acc, page) => {
+      return acc + (page.duration ?? 5000);
+    }, 0);
+    const parallel = attrs.parallel || 5;
 
-  const fps = attrs.fps || 15;
-  const timePerFrame = 1000 / fps;
+    const fps = attrs.fps || 15;
+    const timePerFrame = 1000 / fps;
 
-  // loop through the images and add each to the animation
-  const framesNumber = Math.floor((duration / 1000) * fps);
-  const frames = Array.from(Array(framesNumber).keys());
+    // loop through the images and add each to the animation
+    const framesNumber = Math.floor((duration / 1000) * fps);
+    const frames = Array.from(Array(framesNumber).keys());
 
-  // split frames into parallel chunks
-  const chunkSize = Math.ceil(framesNumber / parallel);
-  const chunks = [];
-  for (let i = 0; i < framesNumber; i += chunkSize) {
-    chunks.push(frames.slice(i, i + chunkSize));
-  }
+    // split frames into parallel chunks
+    const chunkSize = Math.ceil(framesNumber / parallel);
+    const chunks = [];
+    for (let i = 0; i < framesNumber; i += chunkSize) {
+      chunks.push(frames.slice(i, i + chunkSize));
+    }
 
-  const pages = json.pages.map((p, index) => {
-    const previousPage = json.pages[index - 1];
-    const startTime = previousPage
-      ? previousPage.startTime + previousPage.duration
-      : 0;
-    return {
-      id: p.id,
-      startTime,
-      duration: p.duration,
-    };
-  });
+    const pages = json.pages.map((p, index) => {
+      const previousPage = json.pages[index - 1];
+      const startTime = previousPage
+        ? previousPage.startTime + previousPage.duration
+        : 0;
+      return {
+        id: p.id,
+        startTime,
+        duration: p.duration,
+      };
+    });
 
-  let finishedFramesNumber = 0;
+    let finishedFramesNumber = 0;
 
-  await Promise.all(
-    chunks.map(async (chunk, chunkIndex) => {
-      const instance = typeof inst === 'function' ? await inst() : inst;
-      const page = await instance.createPage();
-      await page.evaluate(async (json) => {
-        store.loadJSON(json);
-        await store.waitLoading();
-        await new Promise((resolve) => {
-          setTimeout(resolve, 100);
-        });
-      }, json);
+    await Promise.all(
+      chunks.map(async (chunk, chunkIndex) => {
+        const instance = typeof inst === 'function' ? await inst() : inst;
+        const page = await instance.createPage();
+        await page.evaluate(async (json) => {
+          store.loadJSON(json);
+          await store.waitLoading();
+          await new Promise((resolve) => {
+            setTimeout(resolve, 100);
+          });
+        }, json);
 
-      let lastPageIndex = -1;
-      for (const frameIndex of chunk) {
-        let currentTime = frameIndex * timePerFrame;
-        if (frameIndex === 0) {
-          // offset the very first frame to enable animation start
-          currentTime = 1;
+        let lastPageIndex = -1;
+        for (const frameIndex of chunk) {
+          let currentTime = frameIndex * timePerFrame;
+          if (frameIndex === 0) {
+            // offset the very first frame to enable animation start
+            currentTime = 1;
+          }
+          if (frameIndex === framesNumber - 1) {
+            // offset the very last frame to enable animation end
+            currentTime = duration - 1;
+          }
+          const storePageIndex = pages.findIndex((p) => {
+            return (
+              currentTime >= p.startTime &&
+              currentTime < p.startTime + p.duration
+            );
+          });
+          if (storePageIndex !== lastPageIndex) {
+            await page.evaluate(async (currentTime) => {
+              store.setCurrentTime(currentTime);
+              await store.waitLoading();
+              if (window.config.unstable_setTextOverflow) {
+                window.config.unstable_setTextOverflow('resize');
+              } else {
+                // console.error(
+                //   'Can not set text overflow mode. Define window.config.unstable_setTextOverflow function'
+                // );
+              }
+            });
+          }
+          const startTime = Date.now();
+          const dataURL = await page.evaluate(
+            async (json, attrs, currentTime) => {
+              store.setCurrentTime(currentTime);
+              const currentPage = store.pages.find((p) => {
+                return (
+                  store.currentTime >= p.startTime &&
+                  store.currentTime < p.startTime + p.duration
+                );
+              });
+              const url = await store.toDataURL({
+                ...attrs,
+                _skipTimeout: true,
+                mimeType: 'image/jpeg',
+                pageId: currentPage?.id,
+              });
+              return url;
+            },
+            json,
+            attrs || {},
+            currentTime
+          );
+          fs.writeFileSync(
+            `${tempFolder.name}/${frameIndex}.jpeg`,
+            dataURL.split(',')[1],
+            'base64'
+          );
+          finishedFramesNumber += 1;
+          if (attrs.onProgress) {
+            const frameTime = Date.now() - startTime;
+            const progress = finishedFramesNumber / framesNumber;
+            attrs.onProgress(progress, frameTime);
+          }
         }
-        if (frameIndex === framesNumber - 1) {
-          // offset the very last frame to enable animation end
-          currentTime = duration - 1;
+        await page.close();
+        if (typeof inst === 'function') {
+          await instance.close();
         }
-        const storePageIndex = pages.findIndex((p) => {
-          return (
-            currentTime >= p.startTime && currentTime < p.startTime + p.duration
+      })
+    );
+
+    const inputs = [];
+    let pageStartTime = 0;
+    for (const page of json.pages) {
+      for (const el of page.children) {
+        if (el.type === 'video') {
+          const elStartTime = el.startTime * el.duration;
+          const elDuration = Math.min(
+            page.duration,
+            el.duration * (el.endTime - el.startTime)
           );
-        });
-        if (storePageIndex !== lastPageIndex) {
-          await page.evaluate(async (currentTime) => {
-            store.setCurrentTime(currentTime);
-            await store.waitLoading();
-            if (window.config.unstable_setTextOverflow) {
-              window.config.unstable_setTextOverflow('resize');
-            } else {
-              // console.error(
-              //   'Can not set text overflow mode. Define window.config.unstable_setTextOverflow function'
-              // );
-            }
+          const elEndTime = elStartTime + elDuration;
+          inputs.push({
+            file: el.file,
+            inputStartTime: elStartTime,
+            inputEndTime: elEndTime,
+            outputStartTime: pageStartTime,
+            outputEndTime: pageStartTime + page.duration,
           });
         }
-        const startTime = Date.now();
-        const dataURL = await page.evaluate(
-          async (json, attrs, currentTime) => {
-            store.setCurrentTime(currentTime);
-            const currentPage = store.pages.find((p) => {
-              return (
-                store.currentTime >= p.startTime &&
-                store.currentTime < p.startTime + p.duration
-              );
-            });
-            const url = await store.toDataURL({
-              ...attrs,
-              _skipTimeout: true,
-              mimeType: 'image/jpeg',
-              pageId: currentPage?.id,
-            });
-            return url;
-          },
-          json,
-          attrs || {},
-          currentTime
-        );
-        fs.writeFileSync(
-          `${tempFolder.name}/${frameIndex}.jpeg`,
-          dataURL.split(',')[1],
-          'base64'
-        );
-        finishedFramesNumber += 1;
-        if (attrs.onProgress) {
-          const frameTime = Date.now() - startTime;
-          const progress = finishedFramesNumber / framesNumber;
-          attrs.onProgress(progress, frameTime);
-        }
-      }
-      await page.close();
-      if (typeof inst === 'function') {
-        await instance.close();
-      }
-    })
-  );
-
-  const inputs = [];
-  let pageStartTime = 0;
-  for (const page of json.pages) {
-    for (const el of page.children) {
-      if (el.type === 'video') {
-        const elStartTime = el.startTime * el.duration;
-        const elDuration = Math.min(
-          page.duration,
-          el.duration * (el.endTime - el.startTime)
-        );
-        const elEndTime = elStartTime + elDuration;
-        inputs.push({
-          file: el.file,
-          inputStartTime: elStartTime,
-          inputEndTime: elEndTime,
-          outputStartTime: pageStartTime,
-          outputEndTime: pageStartTime + page.duration,
-        });
       }
+      pageStartTime += page.duration;
     }
-    pageStartTime += page.duration;
-  }
-
-  const format = attrs.out.split('.').pop() || 'mp4';
-
-  await new Promise((resolve, reject) => {
-    const ffmpegCmd = ffmpeg()
-      .input(`${tempFolder.name}/%d.jpeg`)
-      .inputFPS(fps)
-      .videoCodec('libx264')
-      .outputOptions('-pix_fmt yuv420p')
-      .videoFilters('scale=trunc(iw/2)*2:trunc(ih/2)*2'); // Ensure dimensions are divisible by 2
 
-    // Add each audio segment as a separate input
-    inputs.forEach((input, index) => {
-      const inputStartSec = (input.inputStartTime / 1000).toFixed(3);
-      const inputDurationSec = (
-        (input.inputEndTime - input.inputStartTime) /
-        1000
-      ).toFixed(3);
-      const outputOffsetSec = (input.outputStartTime / 1000).toFixed(3);
+    const format = attrs.out.split('.').pop() || 'mp4';
 
-      // Apply `-itsoffset` before each input file to shift its audio stream
-      ffmpegCmd
-        .inputOptions([`-itsoffset ${outputOffsetSec}`]) // Shift the input time
-        .input(input.file) // Add the actual input file
-        .inputOptions([`-ss ${inputStartSec}`, `-t ${inputDurationSec}`]); // Specify the timing to cut the audio
+    // print all files in temp folder
+    fs.readdirSync(tempFolder.name).forEach((file) => {
+      console.log(file);
     });
+    console.time('ffmpeg');
+    await new Promise((resolve, reject) => {
+      const ffmpegCmd = ffmpeg()
+        .input(`${tempFolder.name}/%d.jpeg`)
+        .inputFPS(fps)
+        .videoCodec('libx264')
+        .outputOptions('-pix_fmt yuv420p')
+        .videoFilters('scale=trunc(iw/2)*2:trunc(ih/2)*2'); // Ensure dimensions are divisible by 2
 
-    // Map the video stream from the image sequence
-    ffmpegCmd.outputOptions(['-map 0:v']);
+      // Add each audio segment as a separate input
+      inputs.forEach((input, index) => {
+        const inputStartSec = (input.inputStartTime / 1000).toFixed(3);
+        const inputDurationSec = (
+          (input.inputEndTime - input.inputStartTime) /
+          1000
+        ).toFixed(3);
+        const outputOffsetSec = (input.outputStartTime / 1000).toFixed(3);
 
-    // Map each audio stream
-    inputs.forEach((_, index) => {
-      ffmpegCmd.outputOptions([`-map ${index + 1}:a?`]);
-    });
+        // Apply `-itsoffset` before each input file to shift its audio stream
+        ffmpegCmd
+          .inputOptions([`-itsoffset ${outputOffsetSec}`]) // Shift the input time
+          .input(input.file) // Add the actual input file
+          .inputOptions([`-ss ${inputStartSec}`, `-t ${inputDurationSec}`]); // Specify the timing to cut the audio
+      });
 
-    ffmpegCmd
-      .format(format)
-      .on('end', () => resolve())
-      .on('error', (err, stdout, stderr) => {
-        console.log(err.message);
-        console.log('stdout:\n' + stdout);
-        console.log('stderr:\n' + stderr);
-        reject(err);
-      })
-      .save(attrs.out);
-  });
+      // Map the video stream from the image sequence
+      ffmpegCmd.outputOptions(['-map 0:v']);
 
-  fs.rmSync(tempFolder.name, { recursive: true });
+      // Map each audio stream
+      inputs.forEach((_, index) => {
+        ffmpegCmd.outputOptions([`-map ${index + 1}:a?`]);
+      });
+
+      ffmpegCmd
+        .format(format)
+        .on('end', () => resolve())
+        .on('error', (err, stdout, stderr) => {
+          console.log(err.message);
+          console.log('stdout:\n' + stdout);
+          console.log('stderr:\n' + stderr);
+          reject(err);
+        })
+        .save(attrs.out);
+    });
+  } catch (e) {
+    throw e;
+  } finally {
+    console.timeEnd('ffmpeg');
+    fs.rmSync(tempFolder.name, { recursive: true });
+  }
 };