Angular中使用navigator.getMedia报错，求正确实现方案

问题原因 #

1. TypeScript对Navigator类型有严格校验，getMedia并非标准属性，因此抛出类型错误。
2. 你代码中用到的带前缀的getUserMedia系列API（如webkitGetUserMedia）已被废弃，现代浏览器均支持标准的MediaDevices.getUserMedia接口。

正确实现方式 #

推荐方案：使用现代标准API（Promise-based） #

直接调用navigator.mediaDevices.getUserMedia，它本身返回Promise，无需手动封装，同时完美适配TypeScript类型：

public async promiseGetUserMedia(constraints: MediaStreamConstraints): Promise<MediaStream> {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    throw new Error('浏览器不支持媒体设备API');
  }
  return await navigator.mediaDevices.getUserMedia(constraints);
}

使用示例：

try {
  const stream = await this.promiseGetUserMedia({ video: true, audio: true });
  // 处理媒体流，比如绑定到video元素
} catch (err) {
  console.error('获取媒体流失败:', err);
}

兼容旧浏览器方案（仅用于 legacy 场景，不推荐） #

如果必须兼容老旧浏览器，可通过类型断言绕过TypeScript类型检查，同时将回调式API转为Promise：

public promiseGetUserMediaOld(constraints: any): Promise<MediaStream> {
  return new Promise((resolve, reject) => {
    const navigatorAny = navigator as any;
    const getUserMedia = navigatorAny.getUserMedia ||
                        navigatorAny.webkitGetUserMedia ||
                        navigatorAny.mozGetUserMedia ||
                        navigatorAny.msGetUserMedia;

    if (!getUserMedia) {
      reject(new Error('浏览器不支持 getUserMedia'));
      return;
    }

    getUserMedia.call(navigator, constraints, resolve, reject);
  });
}

补充说明 #

• 优先选择标准API，它是W3C推荐的现代实现，支持Promise，更契合Angular的异步编程风格。
• 若坚持使用旧API，也可以通过扩展Navigator接口消除类型报错，在项目的typings.d.ts中添加：

interface Navigator {
  getUserMedia?: (constraints: any, success: (stream: MediaStream) => void, error: (err: Error) => void) => void;
  webkitGetUserMedia?: (constraints: any, success: (stream: MediaStream) => void, error: (err: Error) => void) => void;
  mozGetUserMedia?: (constraints: any, success: (stream: MediaStream) => void, error: (err: Error) => void) => void;
  msGetUserMedia?: (constraints: any, success: (stream: MediaStream) => void, error: (err: Error) => void) => void;
}

内容的提问来源于stack exchange，提问作者JonathanFlorez