如何将媒体文件从服务器流式传输到客户端，例如我在 loopback 4 nodejs 中的 mp3 音频文件？

Posted 2023-02-19

【中文标题】如何将媒体文件从服务器流式传输到客户端，例如我在 loopback 4 nodejs 中的 mp3 音频文件？

【英文标题】：How to stream a media file from server to client side for example an mp3 audio file in my case in loopback 4 nodejs?

【发布时间】：2020-11-01 03:27:29

【问题描述】：

我的移动应用程序的后端有 loopback 4 - nodejs，前端有 Ionic 4。我在服务器 sid 上存储了一个 mp3 文件，我想在客户端流式传输和播放它，所以基本上是来自 loopback4 的音频流。 所以基本上我正在寻找loopback-4中的服务器端代码，它位于打字稿中，用于将文件音频流式传输到客户端。 （我无法使用 npmjs 库，因为它们中的大多数都没有类型，不能在 typescript 中使用）

【参考方案1】：

我一了解 loopback4，它就没有 nodejs 流实现。我建议您使用本机 NodeJS 流。看看这个回购https://github.com/noamtcohen/Audiostreamer

【参考方案2】：

简答： 我可以通过简单地提供静态文件来实现这一点，即来自服务器端的音频文件。使用我创建的端点访问它并使用前端的标签调用它。

长答案：

在 loopback 4 中，您可以在 application.ts 文件中找到一行代码，该文件位于服务器项目根文件夹的 public 目录中。

this.static('/', path.join(__dirname, '../../public'));

同样，您可以从任何您想要的目录提供静态文件。就我而言，我从添加到节点项目根目录的媒体文件夹中提供了我的文件。

this.static('/', path.join(__dirname, '../media'));

第二步是公开一个 API 端点，您可以使用该端点向服务器发出 get 请求。您可以在服务器项目的 index.ts 文件和 app.start() 正下方的代码中执行此操作。

app.static('/media', 'media', extensions: ['mp3'] );

这里，必须添加API端点和节点项目根文件夹中的目录。

现在，在前端，您只需将完整的 url 添加到 html 标签的 src 属性中即可访问 node 项目中的静态文件。 将 controls 属性添加到标签中，html 将为您处理一切。您可以播放、暂停、跳过等。