获取“属性”“getDisplayMedia”在“MediaDevices”类型中不存在

Question

在我的角度应用程序中，需要记录屏幕。我用navigator.mediaDevices.getDisplayMedia来捕捉屏幕。它在当地工作。但是可以看到命令行中的错误，比如Property 'getDisplayMedia' does not exist on type 'MediaDevices'.。由于此错误，我无法生成生成文件。

这是我的代码：

 const videoOptions = {
   video: {
    cursor: 'always'
   },
   audio: true,
 };

this.captureStream = await navigator.mediaDevices.getDisplayMedia(videoOptions);

我在用

• 角CLI: 11.0.2
• TS: 4.0.5

谢谢

Answer 1

正如您所看到的，在类型记录定义中没有定义getDisplayMedia。

/** Provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data. */
interface MediaDevices extends EventTarget {
    ondevicechange: ((this: MediaDevices, ev: Event) => any) | null;
    enumerateDevices(): Promise<MediaDeviceInfo[]>;
    getSupportedConstraints(): MediaTrackSupportedConstraints;
    getUserMedia(constraints?: MediaStreamConstraints): Promise<MediaStream>;
    addEventListener<K extends keyof MediaDevicesEventMap>(type: K, listener: (this: MediaDevices, ev: MediaDevicesEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof MediaDevicesEventMap>(type: K, listener: (this: MediaDevices, ev: MediaDevicesEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

所以你可以使用：

// @ts-ignore
await navigator.mediaDevices.getDisplayMedia...

你可以在这里找到问题，https://github.com/microsoft/TypeScript/issues/33232

Answer 2

现在，它被固定在打字本4.4。因此，您只需更新"npm i -D typescript@4.4“或"npm i -D typescript@ update”即可。

Answer 3

在周围的工作中，您可以将导航器转换为任意一个，并使用它。

var browser = <any>navigator;