How to manually stop getDisplayMedia stream to end screen capture?

To manually stop the getDisplayMedia stream and end screen capture, we can achieve this by calling the stop() method on the tracks of the media stream. Here are the detailed steps and code examples:

Step 1: Using getDisplayMedia to Obtain Screen Capture Stream

First, we need to use the navigator.mediaDevices.getDisplayMedia() method to obtain the media stream for screen capture. This method will prompt the user to select and grant permission for capturing content, such as the entire screen, application window, or browser tab.

javascript
async function startScreenCapture() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: true // Audio can be requested as needed
        });
        return stream;
    } catch (err) {
        console.error("Error: " + err);
        return null;
    }
}

Step 2: Stopping the Screen Capture Stream

Once the media stream is obtained, we can stop screen capture by iterating through all tracks of the stream and invoking the stop() method on each track. This will release related resources and notify the operating system to stop screen capture.

javascript
function stopScreenCapture(stream) {
    stream.getTracks().forEach(track => track.stop());
}

Example

Here is a complete example combining the above two functions:

javascript
async function handleScreenCapture() {
    const stream = await startScreenCapture();
    if (stream) {
        console.log("Screen capture started successfully.");

        // Assuming we stop capture after a certain period
        setTimeout(() => {
            stopScreenCapture(stream);
            console.log("Screen capture stopped.");
        }, 5000); // Stop capture after 5 seconds
    }
}

handleScreenCapture();

Notes

• In practical applications, stopping capture is often combined with user interaction, such as when the user clicks a stop button.
• It is essential to handle errors and exceptions, especially when the user denies the screen capture request.
• Depending on specific requirements, you may also consider capturing audio.

The advantage of this method is that it is direct, simple, and can immediately release resources, making it suitable for scenarios requiring precise control over when screen capture stops.