PNG To MP4 Video Converter For Webpages

async function processImage(originalImg, durationSeconds = 3, backgroundColor = "#000000") {
    let width = originalImg.width;
    let height = originalImg.height;
    
    // Scale down if image is too large to prevent MediaRecorder crashes
    const MAX_DIM = 1920;
    if (width > MAX_DIM || height > MAX_DIM) {
        const ratio = Math.min(MAX_DIM / width, MAX_DIM / height);
        width = Math.round(width * ratio);
        height = Math.round(height * ratio);
    }
    
    // Ensure dimensions are even numbers (required by many video encoders like H264)
    width = Math.floor(width / 2) * 2;
    height = Math.floor(height / 2) * 2;
    
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d', { alpha: false });
    
    const duration = parseFloat(durationSeconds) || 3;
    
    return new Promise((resolve) => {
        let isRecording = true;
        
        // Loop to continuously draw frames to keep the stream active for recording.
        // We use setTimeout instead of requestAnimationFrame to ensure it runs even if the canvas is off-DOM.
        function drawFrame() {
            if (!isRecording) return;
            
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, width, height);
            ctx.drawImage(originalImg, 0, 0, width, height);
            
            setTimeout(drawFrame, 1000 / 30); // 30 FPS
        }
        drawFrame();
        
        const stream = canvas.captureStream(30);
        
        // Target MP4 if supported (Safari, newer Chrome versions), fallback to WebM otherwise
        let mimeType = '';
        const supportedTypes = [
            'video/mp4',
            'video/webm;codecs=h264',
            'video/webm;codecs=vp9',
            'video/webm'
        ];
        
        for (const type of supportedTypes) {
            if (MediaRecorder.isTypeSupported(type)) {
                mimeType = type;
                break;
            }
        }
        
        const options = mimeType ? { mimeType } : {};
        const recorder = new MediaRecorder(stream, options);
        const chunks = [];
        
        recorder.ondataavailable = (e) => {
            if (e.data && e.data.size > 0) {
                chunks.push(e.data);
            }
        };
        
        recorder.onstop = () => {
            isRecording = false;
            const blob = new Blob(chunks, { type: mimeType || 'video/mp4' });
            const videoUrl = URL.createObjectURL(blob);
            
            // Build the output container
            const container = document.createElement('div');
            container.style.display = 'flex';
            container.style.flexDirection = 'column';
            container.style.alignItems = 'center';
            container.style.gap = '15px';
            container.style.fontFamily = 'sans-serif';
            container.style.width = '100%';
            
            // Generate the Video element
            const videoEl = document.createElement('video');
            videoEl.src = videoUrl;
            videoEl.controls = true;
            videoEl.autoplay = true;
            videoEl.loop = true;
            videoEl.style.maxWidth = '100%';
            videoEl.style.maxHeight = '70vh';
            videoEl.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
            videoEl.style.backgroundColor = backgroundColor;
            
            // Generate Download Button
            const downloadBtn = document.createElement('a');
            downloadBtn.href = videoUrl;
            const ext = mimeType.includes('mp4') ? 'mp4' : 'webm';
            downloadBtn.download = `converted-video.${ext}`;
            downloadBtn.textContent = `Download Video (.${ext})`;
            downloadBtn.style.padding = '10px 20px';
            downloadBtn.style.backgroundColor = '#4CAF50';
            downloadBtn.style.color = '#fff';
            downloadBtn.style.textDecoration = 'none';
            downloadBtn.style.borderRadius = '5px';
            downloadBtn.style.fontWeight = 'bold';
            downloadBtn.style.marginTop = '10px';
            downloadBtn.style.cursor = 'pointer';
            
            container.appendChild(videoEl);
            container.appendChild(downloadBtn);
            
            resolve(container);
        };
        
        // Start recording
        recorder.start();
        
        // Stop recording after the specified duration
        setTimeout(() => {
            recorder.stop();
        }, duration * 1000);
    });
}