MP4 To PNG Converter

async function processImage(originalImg, captureTimeSeconds = "0.0") {
    return new Promise((resolve) => {
        // If the browser already managed to load it as a valid image natively 
        // (For example, if the input was actually a standard image file instead of an MP4)
        if (originalImg.complete && originalImg.naturalWidth > 0) {
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth;
            canvas.height = originalImg.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(originalImg, 0, 0);
            return resolve(canvas);
        }

        // Create a hidden video element to read the MP4 file
        const video = document.createElement('video');
        video.crossOrigin = 'anonymous';
        video.muted = true;
        video.setAttribute('playsinline', '');
        video.preload = 'auto';

        let resolved = false;
        let targetTime = Math.max(0, parseFloat(captureTimeSeconds) || 0);

        const finalize = () => {
            if (resolved) return;
            resolved = true;
            
            const canvas = document.createElement('canvas');
            // Use native video resolution, fallback if unavailable
            canvas.width = video.videoWidth || 800;
            canvas.height = video.videoHeight || 600;
            const ctx = canvas.getContext('2d');
            
            // Draw the current video frame onto the canvas
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            resolve(canvas);
        };

        // When video metadata is loaded, determine if we need to seek to a specific time
        video.addEventListener('loadedmetadata', () => {
            // Ensure target time doesn't exceed the total duration of the video
            targetTime = Math.min(targetTime, video.duration || 0);
            
            if (targetTime > 0) {
                video.currentTime = targetTime;
            } else if (video.readyState >= 2) { // HAVE_CURRENT_DATA
                finalize();
            }
        });

        // Event listener for when the frame data finishes downloading
        video.addEventListener('loadeddata', () => {
            if (targetTime === 0 || Math.abs(video.currentTime - targetTime) < 0.1) {
                finalize();
            }
        });

        // Resolves the image capture once video finishes seeking
        video.addEventListener('seeked', finalize);

        // Fallback for completely invalid/corrupted files or strict cross-origin blockers
        video.addEventListener('error', () => {
            if (resolved) return;
            resolved = true;
            
            const canvas = document.createElement('canvas');
            canvas.width = originalImg.naturalWidth || originalImg.width || 800;
            canvas.height = originalImg.naturalHeight || originalImg.height || 600;
            const ctx = canvas.getContext('2d');
            
            try {
                if (originalImg.src) {
                    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
                } else {
                    throw new Error("No image source");
                }
            } catch (e) {
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#000000';
                ctx.font = '20px sans-serif';
                ctx.fillText('Invalid MP4 file or unsupported format.', 20, 50);
            }
            resolve(canvas);
        });

        // Set the video source to the same URL given mapping (often a Blob Data URL)
        video.src = originalImg.src;
        video.load();
    });
}