在 Angular 中获取“属性‘getDisplayMedia’不存在于‘MediaDevices’类型”

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

我正在使用

• 角 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