TypeScript阻止我将正确的约束传递给getUserMedia [英] TypeScript prevents me from passing the correct constraints to getUserMedia

问题描述

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

I'm trying to get a screen to stream to my Angular 5 Electron app. I'm using the desktopCapturer provided by Electron. This is my code:

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;
          }
        }
      }
    );
}

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

According to the documentation here, I need to use the mandatory part of the constraints to get the correct stream. However, TypeScript gives me the error that the types of property 'video' are incompatible. If I enter the following constraints I sometimes get a stream of my webcam:

{ width: 1280, height: 720 }

mozzilla.org 上的文档永远不会提及必不可少的部分，所以我想我忽略了一些导入或使getUserMedia接受我的约束的事情.要么，或者getUserMedia被更改了，但是文档没有?

The docs at mozzilla.org never mention the mandatory part, so I guess I overlooked some import or something to get getUserMedia to accept my constraints. Either that, or maybe getUserMedia has been changed, but the docs didn't?

我在做什么错了?

此外， MediaTrackConstraints 的文档没有必填项，也不是chromeMediaSourceId属性.但是，这是Electron链接到的相同文档.

Also, the documentation for MediaTrackConstraints does not have the mandatory, nor the chromeMediaSourceId properties. This is however, the same documentation that Electron links to.

[edit2]

我找到了 deviceId 约束，以前被忽略了.当我使用以下约束时，虽然仍然可以获得网络摄像头流.

I found the deviceId constraint, which I previously overlooked. When I use the following constraints, I still get the webcam stream though.

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

推荐答案

@Scuba Kay我可以建议您解决方法.您可以替换

@Scuba Kay I can suggest you the workaround. You can just replace

navigator.mediaDevices.getUserMedia(constraints)

与

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

它将起作用.

这篇关于TypeScript阻止我将正确的约束传递给getUserMedia的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！