Add --mp4 option to transform webm to mp4

Author: yuanchuan

bin/index.js

@@ -48,6 +48,7 @@ program
     .option('-d, --delay <delay>', 'Delay after the image is rendered, e.g, `2s`')
     .option('-t, --time <time>', 'Record screen for a specific time, e.g, `10s')
     .option('-ws, --window-size <size>', 'The size of the rendered window, e.g, `800x600`, defaults to `1600x900`')
+    .option('--mp4', 'Generate an mp4 video')
     .action(handleRender);
 
 program

lib/handler.js

@@ -28,6 +28,10 @@ export async function handleRender(source, options) {
         options.windowHeight = Number(h);
     }
 
+    if (/\.(mp4|webm)$/.test(options.output) && !options.time) {
+        options.time = 5 * 1000;
+    }
+
     let title = options.time ? 'record' : 'image';
     if (source) {
         const basename = path.basename(source);

lib/render/index.js

@@ -60,9 +60,20 @@ export async function render(code, options = {}) {
             tag = await page.$eval('css-doodle', el => el.seed);
         }
         let ext = options.time ? 'webm' : 'png';
+        if (ext === 'webm' && options.mp4) {
+            ext = 'mp4';
+        }
         options.output = `${options.title}-${tag}.${ext}`;
     }
 
+    if (/\.(mp4|webm)$/.test(options.output) && !options.time) {
+        options.time = 5 * 1000;
+    }
+
+    if (options.output.endsWith('.mp4')) {
+        options.mp4 = true;
+    }
+
     if (options.delay) {
         await setTimeout(options.delay);
     }

lib/render/screencast.js

@@ -1,14 +1,16 @@
 import { setTimeout } from 'node:timers/promises';
+import { exec } from 'node:child_process';
 
 export async function screencast(page, options) {
     const { scale, output, selector, windowWidth, windowHeight } = options;
 
     await page.setViewport({
         width: windowWidth,
         height: windowHeight,
+        defaultScaleFactor: scale
     });
 
-    const clip = await page.evaluate(selector => {
+    const crop = await page.evaluate(selector => {
         const element = document.querySelector(selector);
         if (element) {
             const { width, height, x, y } = element.getBoundingClientRect();
@@ -27,18 +29,34 @@ export async function screencast(page, options) {
         }
     }, selector);
 
-    await page.setViewport({
-        width: Math.ceil(clip.width) || windowWidth,
-        height: Math.ceil(clip.height) || windowHeight,
-    });
-
     const recorder = await page.screencast({
         path: output,
-        scale,
-        clip,
+        crop,
     });
 
     await setTimeout(options.time);
     await recorder.stop();
+
+    if (options.mp4) {
+        try {
+            return await webmToMp4(output);
+        } catch (e) {
+            throw e;
+        }
+    }
+
     return output;
 }
+
+function webmToMp4(input) {
+    const output = input.replace('.webm', '.mp4');
+    return new Promise((resolve, reject) => {
+        exec(`echo -y | ffmpeg -i ${input} -c:v copy ${output}`, (err, stdout, stderr) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(output);
+            }
+        });
+    });
+}