浏览器不会播放从 Node 流式传输的视频答案

【问题标题】：Browser won't play video streamed from Node浏览器不会播放从 Node 流式传输的视频
【发布时间】：2021-06-22 17:35:44
【问题描述】：

我正在尝试通过我的应用程序的节点服务器将视频从 minio 存储桶（非常类似于 S3）流式传输到浏览器（尝试 Firefox 89 和 Chrome 91）。问题是视频似乎已成功加载，但是当我单击播放按钮时，视频播放了半秒钟，然后立即暂停并显示了一个微调器。即使播放器显示视频播放还剩 10 秒，视频元素也会触发结束事件。

这是负责将视频从 Minio 流式传输到浏览器的端点（使用 koa 和 koa-router）：

export const videoRouter = new Router()
  .get('/video/:videoFileName', async (context) => {
    await assertLoggedIn(context);

    context.body = fileStore
      .getObject({
        Bucket: UPLOAD_BUCKET,
        Key: `videos/${context.params.videoFileName}`,
      })
      .createReadStream();

    context.response.status = 200;
  }));

下面是我在前端（react 应用）渲染视频的方式：

<video controls width="305px">
  <source src={`/api/video/${videoKey}.mp4`} type="video/mp4" />
  <source src={`/api/video/${videoKey}.ogg`} type="video/ogg" />
  <source src={`/api/video/${videoKey}.webm`} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

以下是使用官方 AWS SDK for Node 创建 fileStore 对象的方法：

export const fileStore = new S3({
  region: S3_REGION,
  endpoint: MINIO_URL,
  s3ForcePathStyle: true,
  signatureVersion: 'v4',
  credentials: {
    accessKeyId: S3_ACCESS_KEY_ID,
    secretAccessKey: S3_SECRET_ACCESS_KEY,
  },
});

还有一些注意事项：

视频缩略图显示并且视频在暂停前播放了片刻，因此我相当确信这不是我的客户端/服务器/minio 之间的 API 路径或 S3 密钥不匹配。
我尝试在 Firefox 中检查网络选项卡，但它显示“无标头”、“无响应”、“无请求”、“无时间”，令人沮丧的是无济于事。
Node 服务器以 200 状态记录请求。
等了几分钟后，我在 chrome 控制台中看到了net::ERR_INCOMPLETE_CHUNKED_ENCODING，它引导我进入this question。我最近确实在这台计算机上安装了 Bitdefender（公司计算机需要）。我目前正试图弄清楚如何杀死它，但似乎它们没有包含“禁用”或“关闭”功能。
我直接连接到 Node 服务器（没有 Apache/Nginx 反向代理，因为我在本地运行以进行开发）。

【问题讨论】：

标签： html node.js video koa minio

【解决方案1】：

问题最终是 koa-range 中间件中断了视频流。它需要被移除或移动以仅影响不流式传输视频的路由。

见：https://github.com/koajs/koa-range/issues/20

编辑：现在有一个带有错误修复的koa-range 分支（包括对此错误的修复）：https://www.npmjs.com/package/@masx200/koa-range

【讨论】：