如何修改采集摄像头画面到canvas的代码，实现屏幕内容共享到canvas

代码修改说明 #

你原有的HTML代码不需要做任何调整，仅需修改JS文件的核心媒体采集逻辑即可，修改后的完整可运行代码及关键调整点如下：

关键修改点 #

• 替换媒体采集API：原来的getUserMedia是调用摄像头/麦克风的专用API，屏幕共享需使用getDisplayMedia接口，该接口返回Promise对象，符合现代JS异步处理规范。
• 新增用户交互触发：浏览器安全策略要求屏幕共享必须由用户主动交互（点击按钮、点击页面等）触发，页面加载时自动调用会被直接拦截报错。
• 原有渲染逻辑完全复用：你原有把video流同步绘制到canvas的draw逻辑、video的play事件监听逻辑都不需要调整，只要把屏幕共享的媒体流赋值给video的srcObject即可。

修改后完整JS代码 #

(function() {
  var canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d'),
  video = document.getElementById('video'),
  vendorUrl = window.URL || window.webkitURL;

  // 点击页面触发屏幕共享，满足浏览器安全策略要求
  document.addEventListener('click', async function() {
    try {
      // 替换原getUserMedia逻辑，调用屏幕共享API
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: false // 需要采集系统音频可改为true
      });
      
      // 原有流赋值逻辑保持不变
      if ('srcObject' in video) {
        video.srcObject = stream;
      } else {
        video.src = vendorUrl.createObjectURL(stream);
      }
      video.play();
    } catch (error) {
      // 用户取消共享或授权失败的错误处理
      console.log('共享失败：', error);
    }
  }, false);

  // 原有播放监听和绘制逻辑完全不变
  video.addEventListener('play', function() {
    setInterval(() => {
      draw(this, context, 400, 300);
    }, 100);
  }, false);

  function draw(video, context, width, height) {
    context.drawImage(video, 0, 0, width, height);
  }
})();

可选调整 #

如果需要自定义触发按钮，只需要在HTML的booth div里加一行<button id="startBtn">开启屏幕共享</button>，然后把JS里的点击事件绑定对象从document换成document.getElementById('startBtn')即可

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