React应用中MediaStreamTrackGenerator未定义，Chrome DevTools却可用的问题

问题根源 #

你遇到的错误并非浏览器兼容性问题，而是React项目默认的ESLint规则no-undef不识别MediaStreamTrackGenerator这个实验性API——它不在ESLint默认的全局变量列表中。浏览器控制台能直接运行是因为它属于浏览器原生全局对象，但ESLint在静态代码检查时无法识别该API。热重载或打开DevTools时会触发ESLint重新校验，因此才会出现这个错误。

解决方法 #

方法1：在代码中声明全局变量

在使用MediaStreamTrackGenerator的文件顶部添加注释，明确告知ESLint这是一个全局变量：

/* global MediaStreamTrackGenerator */

// 正常调用API
const trackGenerator = new MediaStreamTrackGenerator({kind: 'video'});

方法2：修改ESLint配置文件

在项目根目录的.eslintrc.json（或.eslintrc.js）中添加全局变量配置，一次性解决所有文件的检查问题：

{
  "globals": {
    "MediaStreamTrackGenerator": "readonly"
  },
  // 保留其他原有配置
}

方法3：通过window对象访问

直接通过window前缀调用该API，ESLint默认识别window为全局对象，不会触发未定义错误：

const trackGenerator = new window.MediaStreamTrackGenerator({kind: 'video'});

额外说明 #

如果你的项目使用TypeScript，需要确保tsconfig.json的lib数组包含"DOM"，或者安装类型定义包来获得该API的类型支持：

npm install @types/dom-mediacapture-transform --save-dev

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