Image Screen Capture Tool

async function processImage(originalImg) {
    /**
     * Captures the user's screen and returns it as a canvas element.
     * The 'originalImg' parameter is required by the function signature but is not used in this implementation.
     * This function uses the MediaDevices.getDisplayMedia() API, which will prompt the user for permission
     * to share their screen.
     *
     * @param {Image} originalImg - An Image object. Not used by this function.
     * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element containing the screen capture,
     * or a canvas with an error message if the capture fails or is denied.
     */
    try {
        // Prompt the user to select a screen/window/tab to share.
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: {
                mediaSource: "screen"
            },
        });

        const track = stream.getVideoTracks()[0];

        // Create an in-memory video element to play the stream.
        const video = document.createElement('video');
        video.style.display = 'none';
        document.body.appendChild(video); // Needs to be in the DOM to play in some browsers

        // Wait for the video to be ready.
        await new Promise((resolve, reject) => {
            video.onloadedmetadata = () => {
                video.play().then(resolve).catch(reject);
            };
            video.srcObject = stream;
        });

        // A small delay to ensure the video has rendered a frame.
        await new Promise(resolve => setTimeout(resolve, 200));

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // Set canvas dimensions to match the captured screen's resolution.
        const settings = track.getSettings();
        canvas.width = settings.width;
        canvas.height = settings.height;

        // Draw the current video frame onto the canvas.
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Stop the screen sharing track and remove the temporary video element.
        track.stop();
        document.body.removeChild(video);

        return canvas;

    } catch (err) {
        console.error("Error capturing screen:", err);

        // Create a fallback canvas with an error message.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 640;
        errorCanvas.height = 360;
        const ctx = errorCanvas.getContext('2d');

        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        
        ctx.fillStyle = '#333';
        ctx.font = 'bold 20px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        ctx.fillText('Screen Capture Failed', errorCanvas.width / 2, errorCanvas.height / 2 - 20);
        
        ctx.font = '16px sans-serif';
        let errorMessage = 'Could not capture the screen.';
        if (err.name === 'NotAllowedError') {
            errorMessage = 'Permission to capture screen was denied.';
        }
        ctx.fillText(errorMessage, errorCanvas.width / 2, errorCanvas.height / 2 + 20);

        return errorCanvas;
    }
}