angular - TypeScript 阻止我将正确的约束传递给 getUserMedia

Question

我正在尝试让屏幕流式传输到我的 Angular 5 Electron 应用程序。我正在使用 Electron 提供的 desktopCapturer。这是我的代码:

loadCurrentScreensource() {
    desktopCapturer.getSources({
        types: [
          'window',
          'screen'
        ]
     }, (error, sources) => {
        if (error) {
          throw error;
        }
        console.log('Finding screen: ' + this.selectedScreenSource);
        console.log(sources);

        for (let i = 0; i < sources.length; ++i) {
          if (sources[i].id === this.selectedScreenSource.id) {
            console.log('Found screen');

            const constraints = {
              audio: false,
              video: {
                mandatory: {
                  chromeMediaSource: 'desktop',
                  chromeMediaSourceId: sources[i].id,
                  minWidth: 1280,
                  maxWidth: 1280,
                  minHeight: 720,
                  maxHeight: 720
                }
              }
            };

            navigator.mediaDevices.getUserMedia(constraints)
              .then((stream) => this.handleStream(stream))
              .catch((e) => this.handleError(e));
            return;
          }
        }
      }
    );
}

根据文档 here ，我需要使用约束的强制部分来获得正确的流。但是，TypeScript 给我的错误是属性“视频”的类型不兼容。如果我输入以下约束，我有时会收到我的网络摄像头流:

{ width: 1280, height: 720 }

文档位于 mozzilla.org从来没有提到强制性部分，所以我想我忽略了一些导入或让 getUserMedia 接受我的约束的东西。要么是这样，要么 getUserMedia 已更改，但文档没有更改？

我在这里做错了什么？

[编辑]

此外，还有 MediaTrackConstraints 的文档没有强制性的，也没有 chromeMediaSourceId 属性。然而，这与 Electron 链接到的文档相同。

[edit2]

我找到了 deviceId约束，这是我之前忽略的。当我使用以下约束时，我仍然得到网络摄像头流。

video: {
  width: 1280,
  height: 720,
  deviceId: this.selectedScreenSource.id
}

Answer 1

@水肺凯
我可以建议你解决方法。你可以更换

navigator.mediaDevices.getUserMedia(constraints)

和

(<any> navigator.mediaDevices).getUserMedia(constraints)

它会起作用。