如何用原生JavaScript实现兼容IE5及以上的客户端屏幕捕获？

Great question—supporting IE5/6 for screen capture is a tough nut to crack since those ancient browsers predate modern APIs like Canvas and getDisplayMedia. Let's walk through a native JavaScript approach that works across all those old versions and newer browsers:

Since IE5/6 have zero support for Canvas, we have to lean on their proprietary ActiveX controls for screen capture. For newer browsers (including IE9+), we can use standard native APIs to achieve similar results.

1. ActiveX-Based Capture for IE5/IE6/IE7/IE8 #

Older IE versions ship with the Shell.UIHelper ActiveX control, which provides a built-in method to capture the entire screen. Here's a native JS implementation:

function captureScreenLegacyIE() {
    try {
        // Initialize the Shell.UIHelper ActiveX (supported in IE5+)
        const uiHelper = new ActiveXObject("Shell.UIHelper");
        // Capture the full screen, returns an IPictureDisp object
        const screenCapture = uiHelper.CaptureScreen();
        
        // Copy the capture to the system clipboard (easiest way to use it in old IE)
        const clipboardDoc = new ActiveXObject("htmlfile");
        clipboardDoc.parentWindow.clipboardData.setData("Bitmap", screenCapture);
        
        alert("Screen captured to clipboard! Paste it into Paint or another image tool to view.");
    } catch (error) {
        alert(`Capture failed: ${error.message}\nPlease ensure ActiveX controls are enabled in your browser settings.`);
    }
}

Key Notes for Legacy IE: #

• Users will need to allow ActiveX controls to run (IE blocks them by default, so you'll need to prompt users to approve the control when prompted).
• This method captures the entire screen and stores it in the clipboard—old IE can't render the capture directly in the page, so clipboard export is the most practical workaround.

2. Native API Capture for Modern Browsers (IE9+ & Beyond) #

Starting with IE9, Canvas support becomes available, allowing us to render page content directly. For full-screen capture in modern non-IE browsers, we use the getDisplayMedia API:

function captureScreenModern() {
    if (document.documentMode && document.documentMode >= 9) {
        // IE9-11: Capture visible page content with Canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = document.documentElement.scrollWidth;
        canvas.height = document.documentElement.scrollHeight;
        
        // Draw the entire window content to the canvas
        ctx.drawImage(window, 0, 0, canvas.width, canvas.height);
        
        // Create an image element to display the capture
        const captureImg = new Image();
        captureImg.src = canvas.toDataURL('image/png');
        captureImg.style.marginTop = '20px';
        document.body.appendChild(captureImg);
    } else if (navigator.mediaDevices?.getDisplayMedia) {
        // Modern browsers (Chrome, Firefox, Edge): Capture full screen
        navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: 'monitor' } })
            .then(stream => {
                const video = document.createElement('video');
                video.srcObject = stream;
                video.onloadedmetadata = () => {
                    const canvas = document.createElement('canvas');
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(video, 0, 0);
                    
                    // Stop the screen capture stream
                    stream.getTracks().forEach(track => track.stop());
                    
                    // Display the captured image
                    const captureImg = new Image();
                    captureImg.src = canvas.toDataURL('image/png');
                    captureImg.style.marginTop = '20px';
                    document.body.appendChild(captureImg);
                };
            })
            .catch(err => {
                console.error(`Screen capture failed: ${err.message}`);
            });
    }
}

Key Notes for Modern Browsers: #

• IE9-11 can only capture the current page content (not the full system screen) with native Canvas methods.
• Modern non-IE browsers require user authorization to capture the screen—expect a browser prompt asking for permission.

3. Unified Compatibility Wrapper #

Combine the two methods into a single function that auto-detects the browser and uses the appropriate approach:

function captureScreen() {
    const isIE = /*@cc_on!@*/false || !!document.documentMode;
    const ieVersion = isIE ? document.documentMode : 0;
    
    if (ieVersion <= 8) {
        // Handle IE5-8 with ActiveX
        captureScreenLegacyIE();
    } else {
        // Handle IE9+ and modern browsers
        captureScreenModern();
    }
}

// Example usage: Attach to a button click
document.querySelector('#capture-btn')?.addEventListener('click', captureScreen);

Final Considerations: #

• For complex pages with iframes or cross-origin content, native JS captures may be limited (security restrictions apply).
• Legacy IE's ActiveX approach is the only native option for those super-old browsers—there's no way around requiring user approval for the control.

内容的提问来源于stack exchange，提问作者raorakesh