如何在Chrome DesktopCapture API中收听“停止共享”点击

在使用Chrome DesktopCapture API 进行屏幕共享时，可以通过监听浏览器的特定事件来捕捉用户何时点击"停止共享"。这个功能主要涉及到捕获用户界面操作的反馈。

步骤 1: 使用 navigator.mediaDevices.getDisplayMedia() 获取屏幕共享流

首先，我们需要调用 getDisplayMedia() 方法来请求用户共享他们的屏幕。这个方法会返回一个 Promise，这个 Promise 解析后会给我们一个 MediaStream 对象。

javascript
async function startScreenSharing() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        handleStream(stream);
    } catch (error) {
        console.error('Error: Unable to access display media.', error);
    }
}

步骤 2: 监听媒体流的 inactive 事件

当用户点击浏览器界面上的"停止共享"按钮时，MediaStream 对象会触发一个 inactive 事件。我们可以通过给这个流添加一个事件监听器来响应这个事件。

javascript
function handleStream(stream) {
    stream.oninactive = () => {
        console.log('Screen sharing stopped by the user.');
        // 在这里你可以执行一些清理工作，比如关闭相关的UI元素等
    };

    // 现在可以使用这个流，例如显示到一个<video>元素中
    const videoElement = document.querySelector('video#screenVideo');
    videoElement.srcObject = stream;
}

步骤 3: 实际应用

将上述代码放入一个适当的地方，如在某个按钮的点击事件处理函数中调用 startScreenSharing()。这样，当用户点击这个按钮时，就会开始屏幕共享，并且会监听到何时停止分享。

示例代码整合

javascript
document.getElementById('shareScreenBtn').addEventListener('click', () => {
    startScreenSharing();
});

async function startScreenSharing() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        handleStream(stream);
    } catch (error) {
        console.error('Error: Unable to access display media.', error);
    }
}

function handleStream(stream) {
    stream.oninactive = () => {
        console.log('Screen sharing stopped by the user.');
        // 这里可以添加代码，处理停止共享后的逻辑
    };

    const videoElement = document.querySelector('video#screenVideo');
    videoElement.srcObject = stream;
}

通过这种方式，我们可以有效地监听并响应用户在屏幕共享期间点击"停止共享"的行为。这对于确保应用程序能够正确处理屏幕共享的开启和结束非常重要。