如何使用WebdriverIO实现浏览器端屏幕录制？

我之前也碰到过类似的浏览器端屏幕录制问题，折腾了好几个npm包才找到症结所在，给你梳理几个最可能的原因和解决办法：

浏览器的屏幕录制权限必须由用户主动交互触发（比如点击按钮），如果你的代码是在页面加载完成后自动调用录制逻辑，100%会被浏览器拦截。

举个正确的例子（以recordrtc包为例）：

import RecordRTC from 'recordrtc';

// 绑定到用户点击事件
document.getElementById('start-record-btn').addEventListener('click', async () => {
  try {
    // 请求屏幕共享权限
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: 'monitor' },
      audio: true // 如果需要录制系统音频，注意部分浏览器需要额外配置
    });
    
    // 初始化录制器
    const recorder = new RecordRTC(stream, {
      type: 'video',
      mimeType: 'video/webm'
    });
    
    recorder.startRecording();
    console.log('录制开始');

    // 停止录制的逻辑
    document.getElementById('stop-record-btn').addEventListener('click', () => {
      recorder.stopRecording(() => {
        const blob = recorder.getBlob();
        // 下载录制文件
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'my-recording.webm';
        downloadLink.click();
        // 释放流资源
        stream.getTracks().forEach(track => track.stop());
      });
    });
  } catch (error) {
    console.error('权限请求失败或录制出错:', error.message);
    // 这里要处理用户拒绝权限的情况
  }
});

除了localhost，所有线上或测试环境必须使用HTTPS协议，否则浏览器会禁用getDisplayMedia这个核心API——很多npm包底层依赖这个API，自然无法工作。

如果是本地测试，用localhost启动服务就没问题；如果是部署到测试服务器，一定要配置HTTPS证书。

不同的npm包对浏览器的支持程度不同，比如：

• recordrtc功能全面，但需要手动处理流的释放和错误捕获
• screen-recorder-js封装更简洁，但可能对某些浏览器的音频录制支持有限
• mediadevices-recorder是基于原生API的轻量封装，兼容性更好

建议检查你使用的包的文档，确认是否需要额外的配置（比如指定视频编码、音频源），或者换一个更兼容的包试试。

如果你是在Cypress、Playwright这类自动化测试工具里运行录制，需要额外配置权限：

• Cypress：在cypress.config.js中设置chromeWebSecurity: false，同时在测试代码中手动授予权限
• Playwright：启动浏览器时添加--auto-select-desktop-capture-source参数，或者在代码中模拟权限授权

比如Playwright的配置示例：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    args: ['--auto-select-desktop-capture-source=Entire screen']
  });
  const page = await browser.newPage();
  // 后续测试逻辑
})();

如果还是无法解决，可以把你使用的具体npm包名称、代码片段以及浏览器控制台的错误信息贴出来，这样更容易定位问题～

内容的提问来源于stack exchange，提问作者Biswajeet gope