mediasoup demo 遇到问题

问题一：ESLint文件扩展名校验错误

该错误源于eslint-plugin-import插件对模块导入文件扩展名的严格校验。当项目配置了特定的ESLint规则集（如Airbnb规范）时，默认情况下可能不允许或未明确声明.json扩展名的导入，导致在导入package.json等JSON文件时触发规则报错。

解决方案：

核心思路是修改ESLint配置，允许或明确声明对.json扩展名的支持。

修改ESLint规则配置 ：在项目的ESLint配置文件（如.eslintrc.js）中，调整import/extensions规则。

javascript 复制代码

// .eslintrc.js
module.exports = {
  // ... 其他配置
  rules: {
    'import/extensions': ['error', 'ignorePackages', {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
      json: 'always' // 明确允许.json扩展名，并要求必须书写
    }]
  }
};

此配置意味着导入JavaScript/TypeScript文件时可以省略扩展名，但导入JSON文件时必须显式写上.json。

调整依赖版本（备选方案） ：如果项目使用了eslint-config-airbnb-base等预设配置，可以考虑将其降级到对扩展名检查较为宽松的历史版本（例如^14.3.1），但这并非最佳实践，优先推荐方案1进行精确配置。

问题二：React JSX中无效的playsInline属性错误

此错误是由eslint-plugin-jsx-a11y插件触发的，该插件用于检查JSX中的可访问性（a11y）规则。playsInline是HTML <video>元素的属性，用于在iOS Safari中实现视频内联播放（而非全屏）。根据HTML规范，<audio>元素不支持此属性。因此，当在<audio>标签上使用playsInline时，ESLint会报错。

解决方案：

目标是让ESLint忽略在<audio>标签上对playsInline属性的检查。

行级注释禁用（推荐，针对性强）：在出错的代码行上方添加ESLint禁用注释。
jsx 复制代码
```
// eslint-disable-next-line jsx-a11y/media-has-caption
<audio playsInline controls src="audio.mp3" />
```
这种方法仅针对特定代码行，影响范围最小。

修改全局规则配置（影响范围广）：在ESLint配置文件中直接关闭相关规则。

javascript 复制代码

// .eslintrc.js
module.exports = {
  // ... 其他配置
  rules: {
    'jsx-a11y/media-has-caption': 'off', // 关闭媒体元素必须有标题的规则（可能相关）
    // 注意：没有专门针对`playsInline`属性的规则，通常是通过更通用的规则如属性白名单检查来报错。
    // 如果上述规则关闭后仍报错，可能需要检查是否是其他规则（如`jsx-a11y/no-unsupported-aria-props`）导致。
  }
};

此方法会全局禁用规则，可能掩盖其他真正的可访问性问题，需谨慎使用。

问题三：Docker构建时APT源连接失败

该错误发生在基于Ubuntu/Debian的Docker镜像构建过程中，执行apt-get update命令时无法连接到Canonical的软件源服务器kazooie.canonical.com（IP: 91.189.91.39）。原因通常是该服务器被防火墙屏蔽、网络不通，或处于受限的网络环境中。

解决方案：

核心是将APT源替换为可访问的镜像源。

在Dockerfile中直接替换源 ：这是最直接有效的方法。在运行apt-get update之前，将系统的APT源列表文件内容替换为国内镜像源（如阿里云、清华源）。

dockerfile 复制代码

# 示例：使用阿里云镜像源替换Ubuntu 20.04 (Focal)的官方源
FROM ubuntu:20.04
RUN sed -i 's/archive.ubuntu.com/mirrors.aliyun.com/g' /etc/apt/sources.list && \
    sed -i 's/security.ubuntu.com/mirrors.aliyun.com/g' /etc/apt/sources.list
RUN apt-get update && apt-get install -y your-packages

对于Debian系统，原理相同，只需修改/etc/apt/sources.list文件中的域名。

使用构建参数或多阶段构建：为了提升构建速度并保持Dockerfile的清晰，可以利用Docker的构建缓存和多阶段构建。

dockerfile 复制代码

# 第一阶段：基础设置
FROM ubuntu:20.04 as builder
ARG DEBIAN_FRONTEND=noninteractive
RUN sed -i 's/archive.ubuntu.com/mirrors.aliyun.com/g' /etc/apt/sources.list && \
    apt-get update && \
    apt-get install -y build-essential

# 第二阶段：复制已安装的工具到更小的运行时镜像
FROM ubuntu:20.04
COPY --from=builder /usr/bin /usr/bin
# ... 其他应用代码

设置DEBIAN_FRONTEND=noninteractive可以避免apt安装过程中的交互式提问。

配置Docker守护进程代理（针对企业网络）：如果是因为公司网络策略导致无法访问外网，可以在Docker守护进程的配置中设置HTTP/HTTPS代理。
json 复制代码
```
// 编辑 /etc/docker/daemon.json (Linux) 或 Docker Desktop 设置
{
  "proxies": {
    "default": {
      "httpProxy": "http://your-proxy-server:port",
      "httpsProxy": "http://your-proxy-server:port"
    }
  }
}
```
修改后需要重启Docker服务。

问题序号	问题现象	根本原因	推荐解决方案
1	`error Unexpected use of file extension "json" for "./package.json"`	ESLint `import/extensions` 规则未配置允许 `.json` 扩展名。	在 `.eslintrc.js` 中配置 `'import/extensions'` 规则，为 `json` 设置 `'always'`。
2	`error Invalid property 'playsInline' found on tag 'audio'`	`eslint-plugin-jsx-a11y` 规则校验出 `<audio>` 标签使用了仅 `<video>` 支持的属性。	在报错的 `audio` 标签行上方添加 `// eslint-disable-next-line jsx-a11y/media-has-caption` 注释。
3	`Could not connect to kazooie.canonical.com:80`	Docker构建时无法访问Ubuntu官方APT源服务器。	在 `Dockerfile` 中使用 `sed` 命令将 `/etc/apt/sources.list` 中的官方源地址替换为国内镜像地址（如 `mirrors.aliyun.com`）。

参考来源

流媒体服务器（18）------ 运行mediasoup-demo时常见的三个问题及解决方法