Question

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

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（...）”，则不会获得“信号”（我需要粘贴在客户端上才能连接）。

Answer 1

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

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

有关规范示例，请参见here。

如何使用webRTC共享屏幕

1 个答案: