Image To Video Converter

/**
 * Converts a static image into a video, with an optional audio track.
 *
 * @param {HTMLImageElement} originalImg The original image object to convert into a video.
 * @param {number} duration The desired duration of the video in seconds. Defaults to 5.
 * @param {number} fps The frames per second for the output video. Defaults to 30.
 * @param {string} audioUrl An optional URL to an audio file to be used as the soundtrack. Defaults to an empty string (no audio).
 * @param {string} backgroundColor The background color of the video. This will be visible if the image has transparency or doesn't fit the canvas perfectly. Defaults to 'black'.
 * @returns {Promise<HTMLVideoElement>} A promise that resolves with a <video> element containing the generated video.
 */
async function processImage(originalImg, duration = 5, fps = 30, audioUrl = '', backgroundColor = 'black') {
    return new Promise((resolve, reject) => {
        try {
            // 1. Setup Canvas
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = originalImg.naturalWidth;
            canvas.height = originalImg.naturalHeight;

            // 2. Draw the image onto the canvas
            // Fill background
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // Draw image centered
            const imgAspectRatio = originalImg.naturalWidth / originalImg.naturalHeight;
            const canvasAspectRatio = canvas.width / canvas.height;
            let renderWidth, renderHeight, x, y;

            if (imgAspectRatio > canvasAspectRatio) {
                renderWidth = canvas.width;
                renderHeight = canvas.width / imgAspectRatio;
                x = 0;
                y = (canvas.height - renderHeight) / 2;
            } else {
                renderHeight = canvas.height;
                renderWidth = canvas.height * imgAspectRatio;
                y = 0;
                x = (canvas.width - renderWidth) / 2;
            }
            ctx.drawImage(originalImg, x, y, renderWidth, renderHeight);

            // 3. Get video stream from the canvas
            const videoStream = canvas.captureStream(fps);
            const [videoTrack] = videoStream.getVideoTracks();

            // 4. Handle audio stream (if provided)
            let combinedStream;
            let audioContext;
            let audioSource;
            const audioTracks = [];

            if (audioUrl) {
                const audio = new Audio();
                audio.crossOrigin = "anonymous";
                audio.src = audioUrl;

                const handleAudioReady = () => {
                    try {
                        audioContext = new(window.AudioContext || window.webkitAudioContext)();
                        audioSource = audioContext.createMediaElementSource(audio);
                        const destination = audioContext.createMediaStreamDestination();
                        audioSource.connect(destination);
                        audioTracks.push(...destination.stream.getAudioTracks());

                        audio.play().catch(e => console.error("Audio playback failed:", e));

                    } catch (e) {
                        console.warn("Could not process audio. Creating video without sound.", e);
                    }
                    finalizeAndRecord();
                };

                audio.oncanplay = handleAudioReady;
                audio.onerror = () => {
                   console.warn(`Failed to load audio from ${audioUrl}. Creating video without sound.`);
                   finalizeAndRecord();
                };
            } else {
                finalizeAndRecord();
            }

            // 5. Combine streams and start recording
            function finalizeAndRecord() {
                combinedStream = new MediaStream([videoTrack, ...audioTracks]);

                if (typeof MediaRecorder === 'undefined') {
                    reject(new Error('MediaRecorder API is not supported in this browser.'));
                    return;
                }

                const chunks = [];
                let mimeType = 'video/webm; codecs=vp9';
                if (!MediaRecorder.isTypeSupported(mimeType)) {
                    mimeType = 'video/webm; codecs=vp8';
                    if (!MediaRecorder.isTypeSupported(mimeType)) {
                        mimeType = 'video/webm';
                     }
                }
                
                const mediaRecorder = new MediaRecorder(combinedStream, { mimeType });

                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        chunks.push(event.data);
                    }
                };

                mediaRecorder.onstop = () => {
                    // Create video blob and object URL
                    const videoBlob = new Blob(chunks, { type: mimeType });
                    const videoUrl = URL.createObjectURL(videoBlob);

                    // Create the final video element
                    const videoElement = document.createElement('video');
                    videoElement.src = videoUrl;
                    videoElement.controls = true;
                    videoElement.style.maxWidth = '100%';
                    videoElement.style.maxHeight = '100%';

                    // Cleanup resources
                    videoTrack.stop();
                    audioTracks.forEach(track => track.stop());
                     if (audioContext) {
                        audioSource.disconnect();
                        audioContext.close();
                    }

                    resolve(videoElement);
                };
                
                mediaRecorder.onerror = (e) => {
                    reject(e.error);
                };

                // Start recording
                mediaRecorder.start();

                // Stop recording after the specified duration
                setTimeout(() => {
                    if (mediaRecorder.state === 'recording') {
                        mediaRecorder.stop();
                    }
                }, duration * 1000);
            }

        } catch (error) {
            reject(error);
        }
    });
}