如何使用 webRTC 共享屏幕答案

【问题标题】：How to share screen using webRTC如何使用 webRTC 共享屏幕
【发布时间】：2020-07-19 13:38:11
【问题描述】：

我需要让屏幕共享正常工作。如果是视频共享，它就可以工作。这是代码：

public n = navigator as any;

ngAfterViewInit(): void {
 const video = this.myVideo.nativeElement;
 let peerx: any;
 this.n.getUserMedia =
  this.n.getUserMedia ||
  this.n.webkitGetUserMedia ||
  this.n.mozGetUserMedia ||
  this.n.msGetUserMedia;
}

 this.n.getUserMedia( // this.n.mediaDevices.getDisplayMedia
  {
    video: {
      madatory: {
        chromeMediaSource: 'screen',
        maxWidth: 1920,
        maxHeight: 1080,
        minAspectRatio: 1.77
      },
    }
   },
  (stream: any) => {
    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}`);
          });
      }
    });

如果我将 'this.n.getUserMedia(....)' 行更改为 'this.n.mediaDevices.getDisplayMedia(...)'，我不会得到 'signal'（关键我需要粘贴到客户端才能连接）。

【问题讨论】：

标签： webrtc

【解决方案1】：

您正在尝试混合几年前需要使用 getDisplayMedia 进行 Chrome 扩展时需要的约束样式。那是行不通的。

const stream = await navigator.mediaDevices.getDisplayMedia({video: true})

有关规范样本，请参阅 here。

【讨论】：

感谢您分享您的知识。