如何使用WebRTC实现屏幕共享？切换API后无signal信号求助

看起来你遇到的核心问题是**getDisplayMedia和旧版getUserMedia的API调用模式不兼容**，导致SimplePeer没有正确初始化，所以没触发signal事件。下面一步步帮你排查修复：

1. 核心问题：API调用方式错误 #

旧的getUserMedia支持回调式调用，但mediaDevices.getDisplayMedia是Promise-based的API，你直接替换成回调写法的话，代码逻辑会异步出错——SimplePeer可能在stream还没获取到的时候就初始化了，或者根本没执行到初始化代码。

2. 修复步骤与代码示例 #

第一步：改用Promise/async-await调用getDisplayMedia #

把原来的回调写法改成Promise链式调用，或者用async/await让逻辑更清晰。同时必须添加错误捕获，排查权限拒绝或其他获取失败的情况。

第二步：修正媒体约束参数 #

getDisplayMedia不需要手动指定chromeMediaSource: 'screen'（这是旧版Chrome的私有参数），标准API只要指定video: true即可，也可以按需添加分辨率约束。

修改后的完整代码： #

public n = navigator as any;

async ngAfterViewInit(): void {
  const video = this.myVideo.nativeElement;
  let peerx: any;

  // 先检查浏览器是否支持getDisplayMedia
  if (!this.n.mediaDevices?.getDisplayMedia) {
    console.error("浏览器不支持屏幕共享API");
    return;
  }

  try {
    // 获取屏幕共享流
    const stream = await this.n.mediaDevices.getDisplayMedia({
      video: {
        maxWidth: 1920,
        maxHeight: 1080,
        minAspectRatio: 1.77
      },
      // 如果需要同时捕获音频，可以添加audio: true
      // audio: true
    });

    // 成功获取流后再初始化SimplePeer
    peerx = new SimplePeer({
      initiator: location.hash === '#init',
      trickle: false,
      stream,
    });

    peerx.on('signal', (data) => {
      const strData = JSON.stringify(data);
      console.log(strData);
      this.targetpeer = data;
    });

    peerx.on('stream', (streamX: any) => {
      if ('srcObject' in video) {
        video.srcObject = streamX;
      } else {
        video.src = window.URL.createObjectURL(streamX);
      }
      const playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise
          .then((_) => {
            video.play();
          })
          .catch((error) => {
            console.log(`Playing was prevented: ${error}`);
          });
      }
    });

    // 别忘了添加SimplePeer的错误监听
    peerx.on('error', (err) => {
      console.error('SimplePeer错误:', err);
    });

  } catch (err) {
    // 捕获屏幕共享权限拒绝或其他错误
    console.error('获取屏幕流失败:', err);
  }
}

3. 额外排查点 #

• 检查浏览器控制台是否有错误信息：比如权限拒绝、API不支持等，这些都会导致流获取失败，进而SimplePeer无法初始化触发signal。
• 确认location.hash === '#init'的逻辑是否正确：如果是非发起方，signal事件是在收到对方信号后才会触发，确保两端的initiator设置正确。
• 某些浏览器需要HTTPS环境（localhost除外）才能使用屏幕共享API，检查你的运行环境是否符合要求。

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