How to manually stop getDisplayMedia stream to end screen capture?

要手动停止getDisplayMedia流并结束屏幕捕获，我们可以通过调用媒体流中轨道的stop()方法来实现。这里是详细的步骤和代码示例：

步骤 1: 使用getDisplayMedia获取屏幕捕获流

首先，我们需要使用navigator.mediaDevices.getDisplayMedia()方法获取屏幕捕获的媒体流。这个方法会提示用户选择和授权捕获内容，比如整个屏幕、应用窗口或浏览器标签页。

javascript
async function startScreenCapture() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: true // 这里可以根据需要请求音频
        });
        return stream;
    } catch (err) {
        console.error("Error: " + err);
        return null;
    }
}

步骤 2: 停止屏幕捕获流

一旦我们获得了媒体流，我们可以通过遍历流的所有轨道（tracks），并对每个轨道调用stop()方法来停止屏幕捕获。这将释放相关资源并通知操作系统停止捕获屏幕。

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

示例

这里是将上述两个函数结合使用的完整示例：

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

        // 假设我们捕获一段时间后停止
        setTimeout(() => {
            stopScreenCapture(stream);
            console.log("Screen capture stopped.");
        }, 5000); // 这里我们设置5秒后停止捕获
    }
}

handleScreenCapture();

注意事项

• 在实际应用中，停止捕获通常与用户交互结合，例如用户点击停止按钮。
• 一定要处理错误和异常，尤其是用户拒绝屏幕捕获请求的情况。
• 根据具体需求，还可以考虑捕获音频。

这种方法的好处是直接、简单，并且能够即时释放资源，适用于需要精细控制屏幕捕获停止时间的场景。