angular - 在 Angular 中，类型 "Property ' 上不存在获取 'MediaDevices' getDisplayMedia'

Question

在我的 Angular 应用程序中，需要记录屏幕。我使用 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);

我正在使用

• Angular CLI:11.0.2
• TS:4.0.5

谢谢

Answer 1

如您所见，getDisplayMedia 未在 typescript 定义中定义

/** 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