singapore_rain_radar/video.mjs

import { createCanvas, loadImage } from 'canvas';
import fs from 'fs';
import { exec } from 'child_process';

async function overlayImage(time_string) {
    let ctx = createCanvas(853, 479).getContext('2d');

    let bg = await loadImage('bg.png')
    ctx.drawImage(bg, 0, 0, 853, 479)

    let overlay = await loadImage('images/raw/' + time_string + '.png')
    ctx.drawImage(overlay, 0, 0, 853, 479)

    let text = time_string.substring(8, 10) + ':' + time_string.substring(10, 12);
    ctx.font = 'bold 70px sans-serif';
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillText(text, 853 - 250, 479 - 40);

    return ctx.canvas.toBuffer("image/png");
}

async function generateFinalImages() {
    //Clear out the final images directory
    let final_files = fs.readdirSync('images/final');
    for (let file of final_files) {
        fs.unlinkSync(`images/final/${file}`);
    }
    let files = fs.readdirSync('images/raw');
    let i = 0;
    for (let file of files) {
        let time_string = file.split('.')[0];
        let final_image = await overlayImage(time_string);
        fs.writeFileSync(`images/final/${i}.png`, final_image);
        i++;
    }
}

export async function createVideo() {
    await generateFinalImages();
    //remove video
    try {
        fs.unlinkSync('out/output.webm');
    } catch (error) {
        console.log('No video to delete');
    }
    //run the command ffmpeg -framerate 5 -i %d.png -c:v libx264 -r 30 output.mp4
    return new Promise((resolve, reject) => {
        exec('ffmpeg -framerate 5 -i images/final/%d.png -c:v libvpx-vp9 -b:v 1M -r 30 out/output.webm', (err, stdout, stderr) => {
            if (err) {
                reject(err);
                return;
            }
            resolve(stdout);
        });
    });
}