问题描述
我正在尝试将视频从 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>
另外,fileStore
对象是如何使用适用于 Node 的官方 AWS 开发工具包创建的:
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 反向代理,因为我在本地运行进行开发)。
解决方法
问题最终是 koa-range
中间件中断了视频流。它要么需要移除,要么移动到仅影响不流式传输视频的路由。
见:https://github.com/koajs/koa-range/issues/20
编辑:
现在有一个 koa-range
的分支可用于错误修复(包括对此错误的修复):https://www.npmjs.com/package/@masx200/koa-range