如何在用户选择RecordRTC录屏窗口/标签页后等待5秒并显示计时器？

这个需求完全可以实现，核心是利用getDisplayMedia API的异步回调来捕捉用户完成录屏源选择的时机，具体细节如下：

关键触发时机 #

浏览器没有专门的事件来监听“用户选择录屏窗口/标签页”这个动作，但调用navigator.mediaDevices.getDisplayMedia()后，会弹出系统级的录屏选择框，当用户完成选择并确认后，该方法返回的Promise会进入resolve状态——这就是你需要的触发点；如果用户取消选择，则Promise会进入reject状态。

实现步骤及代码示例 #

1. 调用getDisplayMedia获取屏幕流，等待用户选择录屏源
2. 选择完成后，显示计时器组件并启动5秒倒计时
3. 倒计时结束后，初始化RecordRTC开始录制

<!-- 计时器组件 -->
<div id="countdown-timer" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-size:24px; background:white; padding:20px; border-radius:8px; z-index:9999;">
</div>
<button id="start-recording-btn">开始录屏</button>

<script src="https://cdn.jsdelivr.net/npm/recordrtc@5.6.2/dist/RecordRTC.min.js"></script>
<script>
document.getElementById('start-recording-btn').addEventListener('click', async () => {
  try {
    // 触发录屏源选择
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: 'monitor' }, // 可选：指定录制类型，monitor/window/browser
      audio: true // 根据需求开启音频录制
    });

    // 用户已确认选择，启动倒计时
    let countdown = 5;
    const timerEl = document.getElementById('countdown-timer');
    timerEl.textContent = `即将开始录制：${countdown}秒`;
    timerEl.style.display = 'block';

    const timer = setInterval(() => {
      countdown--;
      timerEl.textContent = `即将开始录制：${countdown}秒`;

      if (countdown <= 0) {
        clearInterval(timer);
        timerEl.style.display = 'none';
        
        // 初始化RecordRTC并开始录制
        const recorder = new RecordRTC(stream, {
          type: 'video',
          mimeType: 'video/webm' // 可选：指定录制格式
        });
        recorder.startRecording();

        // 监听录屏结束（用户停止共享时触发）
        stream.getTracks().forEach(track => {
          track.onended = () => {
            recorder.stopRecording(() => {
              const recordedBlob = recorder.getBlob();
              // 处理录制结果：比如下载
              const url = URL.createObjectURL(recordedBlob);
              const a = document.createElement('a');
              a.href = url;
              a.download = `screen-recording-${Date.now()}.webm`;
              a.click();
              URL.revokeObjectURL(url);
            });
          };
        });
      }
    }, 1000);

  } catch (error) {
    console.error('录屏操作取消或失败：', error);
  }
});
</script>

注意事项 #

• 确保在HTTPS环境下运行，getDisplayMedia API仅支持安全上下文
• 可以根据需求自定义计时器的样式和位置，比如添加动画效果增强用户感知
• 如果需要提前初始化RecordRTC（比如预配置参数），可以在获取流后先创建实例，等倒计时结束再调用startRecording()

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