TypeScript 阻止我将正确的约束传递给 getUserMedia答案

【问题标题】：TypeScript prevents me from passing the correct constraints to getUserMediaTypeScript 阻止我将正确的约束传递给 getUserMedia
【发布时间】：2018-06-10 02:29:02
【问题描述】：

我正在尝试让屏幕流式传输到我的 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
}

【问题讨论】：

标签： angular typescript electron

【解决方案1】：

@Scuba Kay 我可以建议你解决方法。你可以替换

navigator.mediaDevices.getUserMedia(constraints)

与

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

它会起作用的。

【讨论】：

【解决方案2】：

要添加更多关于@Manthan Makani 他的解决方案的背景信息，请查看：https://github.com/microsoft/TypeScript/issues/22897

TS 遵循最新的 WebRTC 规范。由于 WebRTC 规范尚未成为官方标准，因此每个浏览器的 API 可能有所不同。

Chrome 似乎仍然遵循不同的标准。因此可以通过将mediaDevices 定义为'any' 并定义您自己的与Chrome 实现一致的方法来解决。这将满足 Typescript 编译器。注意：我们特别关注 Chrome 的实现，因为 Electron 运行在 Chromium 浏览器上。

const mediaDevices = navigator.mediaDevices as any;
mediaDevices.getUserMedia({
    audio: false,
    video: {
        mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
        }
    }
}).then((stream: MediaStream) => {
    // do stuff
    stream.getTracks()[0].stop();
});

【讨论】：