Image Screen Recording Tool

/**
 * Creates an interactive screen recording tool.
 * This function generates an HTML element with controls to start/stop screen recording
 * and a video player to preview and download the result.
 *
 * @param {Image} originalImg - This parameter is ignored as this tool generates content rather than processing an image. It's included to match the required function signature.
 * @param {number} [frameRate=30] - The desired frame rate for the video recording. The browser may adjust this based on system capabilities.
 * @param {string} [mimeType='video/webm'] - The desired MIME type for the recording (e.g., 'video/webm', 'video/webm;codecs=vp9', 'video/mp4'). The browser will use a supported fallback if the requested type is unavailable.
 * @param {number} [audio=0] - A flag to include system/tab audio in the recording. Use 1 for true, 0 for false.
 * @returns {Promise<HTMLDivElement>} A promise that resolves to a div element containing the screen recorder UI.
 */
async function processImage(originalImg, frameRate = 30, mimeType = 'video/webm', audio = 0) {
    // The 'originalImg' parameter is ignored for this tool.

    // --- 1. Create the main UI container ---
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '15px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '5px';
    container.style.maxWidth = '640px';
    container.style.boxSizing = 'border-box';

    // --- 2. Check for browser support ---
    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
        container.textContent = 'Screen Recording API is not supported by your browser.';
        container.style.color = 'red';
        return container;
    }

    // --- 3. Create UI elements ---
    const title = document.createElement('h3');
    title.textContent = 'Screen Recorder';
    title.style.marginTop = '0';
    container.appendChild(title);

    const videoPreview = document.createElement('video');
    videoPreview.controls = true;
    videoPreview.muted = true;
    videoPreview.style.width = '100%';
    videoPreview.style.backgroundColor = '#000';
    videoPreview.style.display = 'none'; // Hidden until a recording is available
    videoPreview.style.marginBottom = '10px';
    container.appendChild(videoPreview);

    const controlsDiv = document.createElement('div');
    controlsDiv.style.display = 'flex';
    controlsDiv.style.gap = '10px';
    controlsDiv.style.alignItems = 'center';
    container.appendChild(controlsDiv);

    const startButton = document.createElement('button');
    startButton.textContent = '▶ Start Recording';
    controlsDiv.appendChild(startButton);

    const stopButton = document.createElement('button');
    stopButton.textContent = '⏹ Stop Recording';
    stopButton.disabled = true;
    controlsDiv.appendChild(stopButton);

    const statusDiv = document.createElement('div');
    statusDiv.textContent = 'Idle';
    statusDiv.style.flexGrow = '1';
    statusDiv.style.textAlign = 'right';
    statusDiv.style.color = '#555';
    controlsDiv.appendChild(statusDiv);

    const downloadLink = document.createElement('a');
    downloadLink.textContent = 'Download Recording';
    downloadLink.style.display = 'none';
    downloadLink.style.marginTop = '10px';
    container.appendChild(downloadLink);

    // --- 4. State variables ---
    let mediaRecorder;
    let recordedChunks = [];
    let stream;
    let currentObjectUrl = null;

    // --- 5. Core Recording Logic ---
    const startRecording = async () => {
        try {
            // Reset UI and state for a new recording
            if (currentObjectUrl) {
                URL.revokeObjectURL(currentObjectUrl);
                currentObjectUrl = null;
            }
            recordedChunks = [];
            downloadLink.style.display = 'none';
            videoPreview.style.display = 'none';
            videoPreview.removeAttribute('src');

            const displayOptions = {
                video: {
                    frameRate: { ideal: frameRate }
                },
                audio: audio === 1, // Convert number to boolean
            };

            stream = await navigator.mediaDevices.getDisplayMedia(displayOptions);

            // Handle user stopping the recording via the browser's native UI
            stream.getVideoTracks()[0].addEventListener('ended', stopRecording);
            
            statusDiv.textContent = 'Recording...';
            startButton.disabled = true;
            stopButton.disabled = false;

            const options = { mimeType };
            if (!MediaRecorder.isTypeSupported(mimeType)) {
                console.warn(`MIME type "${mimeType}" not supported. Using a browser default.`);
                delete options.mimeType;
            }
            
            mediaRecorder = new MediaRecorder(stream, options);

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

            mediaRecorder.onstop = () => {
                const blobMimeType = mediaRecorder.mimeType || mimeType;
                const fileExtension = blobMimeType.split('/')[1].split(';')[0];
                const blob = new Blob(recordedChunks, { type: blobMimeType });
                
                currentObjectUrl = URL.createObjectURL(blob);
                
                videoPreview.src = currentObjectUrl;
                videoPreview.style.display = 'block';

                downloadLink.href = currentObjectUrl;
                downloadLink.download = `screen-recording-${Date.now()}.${fileExtension}`;
                downloadLink.style.display = 'block';
                
                statusDiv.textContent = 'Finished';
            };
            
            mediaRecorder.start();

        } catch (err) {
            console.error("Error starting screen recording:", err);
            statusDiv.textContent = `Error: ${err.message}`;
            // Ensure UI is reset on error (e.g., user cancels permission dialog)
            startButton.disabled = false;
            stopButton.disabled = true;
        }
    };
    
    const stopRecording = () => {
        // Prevent multiple stop calls
        if (stopButton.disabled) return; 

        if (mediaRecorder && mediaRecorder.state === 'recording') {
            mediaRecorder.stop();
        }
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        
        startButton.disabled = false;
        stopButton.disabled = true;
        statusDiv.textContent = 'Processing...';
    };

    startButton.onclick = startRecording;
    stopButton.onclick = stopRecording;

    return container;
}