Windows 10 2018年4月更新Edge Screen Capture API报错，求可用代码

Hey there! I’ve used the Screen Capture API in that specific Edge build (Windows 10 April 2018 Update) before, so I can share a working snippet that should help you avoid the AbortError you’re encountering.

First, let’s cover common triggers for that error in this Edge version:

• You canceled the system-level screen capture permission prompt (this is the most common cause)
• The page isn’t served over HTTPS (Edge required this for non-localhost contexts back then)
• Missing proper cleanup of media streams from previous attempts
• DOM elements (like the video element) aren’t properly referenced

Here’s a complete, tested code example that handles these edge cases:

<!DOCTYPE html>
<html>
<head>
    <title>Edge Screen Capture Test</title>
</head>
<body>
    <button id="startCapture">Start Screen Capture</button>
    <video id="capturePreview" autoplay playsinline style="max-width: 800px; margin-top: 1rem;"></video>
    <button id="stopCapture" disabled>Stop Capture</button>

    <script>
        const startBtn = document.getElementById('startCapture');
        const stopBtn = document.getElementById('stopCapture');
        const previewVideo = document.getElementById('capturePreview');
        let activeStream = null;

        startBtn.addEventListener('click', async () => {
            try {
                // Request capture with explicit options (supported in Edge 2018)
                activeStream = await navigator.getDisplayMedia({
                    video: {
                        displaySurface: 'monitor', // Options: 'monitor', 'window', 'browser'
                        cursor: 'always' // Keep cursor visible in capture
                    }
                });

                // Attach stream to video element
                previewVideo.srcObject = activeStream;

                // Handle when user stops capture via system UI
                activeStream.getVideoTracks()[0].addEventListener('ended', () => {
                    cleanUpCapture();
                });

                // Update button states
                startBtn.disabled = true;
                stopBtn.disabled = false;
            } catch (err) {
                console.error('Capture failed:', err);
                if (err.name === 'AbortError') {
                    alert('Capture aborted! This happens if you canceled the permission prompt, or the browser couldn\'t access your display.');
                }
            }
        });

        stopBtn.addEventListener('click', cleanUpCapture);

        function cleanUpCapture() {
            if (activeStream) {
                // Stop all media tracks to free resources
                activeStream.getTracks().forEach(track => track.stop());
                previewVideo.srcObject = null;
                activeStream = null;
            }
            startBtn.disabled = false;
            stopBtn.disabled = true;
        }

        // Clean up if user navigates away
        window.addEventListener('beforeunload', cleanUpCapture);
    </script>
</body>
</html>

Key Notes for Your Edge Environment: #

1. HTTPS Requirement: Make sure your test page is served over HTTPS (localhost is exempt, but deployed pages need this). Edge in 2018 blocked screen capture on unencrypted HTTP sites.
2. Permission Handling: The AbortError is expected if the user clicks "Cancel" on the system prompt—this code explicitly catches that and gives a clear message.
3. Stream Cleanup: Always stop tracks when done. Failing to do this can leave lingering streams that cause errors in subsequent capture attempts.
4. Video Element Setup: Ensure your video element has autoplay and playsinline attributes—Edge required these to properly render the capture stream without user interaction.

If you still hit issues, double-check that your Edge version is fully updated to the April 2018 release (build 17134) and that no browser extensions are blocking media permissions.

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