Image Design For 10×4 Meter Landscape LED Screen With Running Video

async function processImage(originalImg, buildingColor1 = '#7d7d7d', buildingColor2 = '#555555', skyColor1 = '#87CEEB', skyColor2 = '#4682B4') {
    // Note: For this specific utility, the 'originalImg' parameter is expected to be a
    // HTMLVideoElement (<video>) with a loaded source, not a standard Image object,
    // to fulfill the "running video" requirement.

    // 1. Input validation
    if (!(originalImg instanceof HTMLVideoElement)) {
        console.error("The 'originalImg' parameter must be a <video> element for this function.");
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 800;
        errorCanvas.height = 200;
        const eCtx = errorCanvas.getContext('2d');
        eCtx.fillStyle = '#f0f0f0';
        eCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        eCtx.fillStyle = 'red';
        eCtx.font = 'bold 16px Arial';
        eCtx.textAlign = 'center';
        eCtx.textBaseline = 'middle';
        eCtx.fillText("Error: Input must be a video element to display on the screen.", errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    // 2. Setup canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const sceneWidth = 1200;
    const sceneHeight = 800;
    canvas.width = sceneWidth;
    canvas.height = sceneHeight;
    canvas.style.backgroundColor = skyColor1; // Set a fallback background color

    // 3. Define scene geometry
    // Building dimensions
    const buildingHeight = 700;
    const buildingY = sceneHeight - buildingHeight;

    // LED Screen dimensions, maintaining a 10x4 meter aspect ratio (2.5:1)
    const screenWidth = 700;
    const screenHeight = screenWidth / 2.5; // 280px
    const screenX = (sceneWidth - screenWidth) / 2;
    const screenY = buildingY + 150;

    // 4. Animation loop function
    function drawScene() {
        // Clear the canvas for the new frame
        ctx.clearRect(0, 0, sceneWidth, sceneHeight);

        // Draw the sky with a subtle gradient to give a sense of atmosphere
        const skyGradient = ctx.createLinearGradient(0, 0, 0, buildingY + 200);
        skyGradient.addColorStop(0, skyColor1);
        skyGradient.addColorStop(1, skyColor2);
        ctx.fillStyle = skyGradient;
        ctx.fillRect(0, 0, sceneWidth, sceneHeight);

        // Draw the building facade with a gradient for depth
        const buildingGradient = ctx.createLinearGradient(0, buildingY, 0, sceneHeight);
        buildingGradient.addColorStop(0, buildingColor2);
        buildingGradient.addColorStop(1, buildingColor1);
        ctx.fillStyle = buildingGradient;
        ctx.fillRect(0, buildingY, sceneWidth, buildingHeight);

        // Add a simple rooftop ledge for a bit of realism
        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        ctx.fillRect(0, buildingY, sceneWidth, 25);

        // Draw the current frame of the video onto the "LED screen"
        // The video must be playing for the image to be animated
        try {
            // Check if video has enough data to draw
            if (originalImg.readyState >= 2) { // HAVE_CURRENT_DATA
                ctx.drawImage(originalImg, screenX, screenY, screenWidth, screenHeight);
            }
        } catch (e) {
            console.error("Could not draw video frame:", e);
            ctx.fillStyle = 'black';
            ctx.fillRect(screenX, screenY, screenWidth, screenHeight);
            ctx.fillStyle = 'red';
            ctx.textAlign = 'center';
            ctx.font = '20px sans-serif';
            ctx.fillText('Video Error', screenX + screenWidth / 2, screenY + screenHeight / 2);
            return; // Stop animation by not requesting the next frame
        }

        // Draw a bezel around the screen to make it stand out
        ctx.strokeStyle = '#111111';
        ctx.lineWidth = 15;
        ctx.strokeRect(screenX - ctx.lineWidth / 2, screenY - ctx.lineWidth / 2, screenWidth + ctx.lineWidth, screenHeight + ctx.lineWidth);
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
        ctx.lineWidth = 1;
        ctx.strokeRect(screenX, screenY, screenWidth, screenHeight);

        // Request the next frame to continue the animation
        requestAnimationFrame(drawScene);
    }

    // 5. Start video and animation
    // Ensure the video loops and is muted for autoplay to work reliably in most browsers
    originalImg.loop = true;
    originalImg.muted = true;
    originalImg.playsInline = true;

    try {
        await originalImg.play();
    } catch (err) {
        console.warn("Video autoplay was prevented by the browser. User interaction may be needed to start the video.", err);
        // The animation will still start and show the first frame of the video if available.
    }
    
    drawScene();

    // 6. Return the animated canvas
    return canvas;
}