教程：使用 Mux 和 Stream Chat 进行实时流式传输

2025-06-10

教程：使用 Mux 和 Stream Chat 进行实时流式传输

Mux提供高质量的直播服务，可通过易于使用的 API 访问，让您专注于产品开发。它是一个极其灵活的平台，即使是要求最苛刻的直播用例也能提供相应的功能。

在Stream，我们的团队专注于实时Feeds和聊天技术，因此，我们自然而然地认为与Mux合作并构建终极聊天和直播视频教程是一个好主意。

多路复用器

想要抢先体验我们的最新成果，请点击此链接，并在聊天室中发送表情符号。请务必使用“备用视频”，除非您已准备好 .m3u8 文件（HLS 格式）。

第一件事

让我们讨论一下直播背后的协议、它们的工作原理以及它们包含的内容。

什么是 RTMP？

RTMP和 M3U8（也称为HLS ）都是用于流式传输实时视频和音频的协议。

RTMP 起源于 Macromedia 公司（现归 Adob​​e 所有）的时代。RTMP 是 Macromedia Flash 和服务器之间通过互联网传输音频、视频和数据的专有协议。由于其普及性以及在设备和服务器之间维持持久连接和低延迟通信的能力，它如今已成为设备端直播应用程序的事实标准。

M3U8/HLS 怎么样？

另一方面，M3U8（也称为 HLS）是由 Apple 开发的，用于将视频和音频流式传输到 QuickTime、Safari、macOS 和 iOS 设备。自推出以来，它已成为一种广泛支持的协议，允许在各种平台上（甚至非 Apple 专用平台）实时流式传输视频和音频。

使用协议

简单来说，您录制的设备（例如 iOS、Android 或通过 OBS 的桌面）将使用 RTMP 协议；而设备播放将使用 M3U8 或 HLS 格式。

RTMP 直接传输到服务器，并在那里转码为 M3U8/HLS 格式。之后，它会实时地直接流式传输到您的设备上。

“实时”一词是可变的，因为它取决于许多因素，其中包括：

  • 网络连接
  • 视频尺寸（720p 与 1080p 等）
  • 音频层
  • 转码速度

先决条件

  • Node.js（v11+）
  • Yarn（首选）或 npm
  • Mux 的免费试用帐户
  • 使用 Stream 免费试用聊天
  • 理解git

注意：我们将在本教程中使用 yarn；但是，如果您想使用 npm 安装依赖项，也完全没问题。

入门

首先，我们将从 GitHub 克隆两个仓库。为了简单起见，我们将在您的机器上本地运行这两个项目；不过，您也可以更进一步，将项目部署到Heroku或您选择的其他托管服务提供商。

首先，在你的机器上创建一个名为 mux 的新目录。从那里，将以下代码片段复制并粘贴到你的终端中，以克隆前端：

$ cd mux
$ git clone https://github.com/GetStream/livestream-chat-mux.git web && cd web && yarn
Enter fullscreen mode Exit fullscreen mode

现在您已将 Web 仓库克隆到mux目录中，接下来我们来克隆后端 API。这尤其重要，因为您需要为进入聊天的用户生成令牌。退出 Web 目录并进入主mux目录。在mux目录中，运行以下命令：

$ cd ../
$ git clone https://github.com/GetStream/livestream-chat-api.git api && cd api && yarn
Enter fullscreen mode Exit fullscreen mode

一旦您克隆了两个存储库并安装了依赖项，我们就可以进入下一步，输入我们的凭据。

1. 收集 Stream 凭证

在开始之前，我们先从Stream Chat获取你的登录信息。如果你还没有 Stream 账户，可以前往https://getstream.io/chat/创建一个——免费试用 14 天，无需信用卡。

接下来，您需要复制下图中列出的凭据并将其保存在安全的地方（我们将在本教程的后面使用它们）。

  1. 前往 Stream 仪表板
  2. 创建新应用程序
  3. 点击顶部导航中的“聊天”
  4. 向下滚动到“应用程序访问密钥”并查看您的凭据

溪流

2. 生成环境文件并添加您的凭证

在 Web 目录的根目录中，创建一个名为的新文件.env并添加以下值：

REACT_APP_API_ENDPOINT=http://localhost:8080
REACT_APP_STREAM_KEY=<YOUR_STREAM_API_KEY>
SASS_PATH=./node_modules
Enter fullscreen mode Exit fullscreen mode

接下来，我们来处理 API。与上面类似，创建一个 .env 文件，并在 api 目录中添加以下值：

NODE_ENV=development
PORT=8080
STREAM_API_KEY=<YOUR_STREAM_API_KEY>
STREAM_API_SECRET=<YOUR_STREAM_API_SECRET>
Enter fullscreen mode Exit fullscreen mode

3.启动Web应用程序和API

现在我们已经为 Web 和 API 设置了环境变量，是时候启动它们并看看我们要使用什么了。

前往api目录并运行该yarn start命令。您还需要打开一个新的终端，并使用该命令启动 Web 应用程序yarn start。启动并运行后，您的 API 将在端口 上可用8080，Web 应用程序将在端口 上运行3000。两者都将在本地的 上可用http://localhost:<PORT>。

在浏览器中输入http://localhost:3000，享受一下乐趣吧。一开始，唯一的选择是使用“备用视频”；不过，聊天功能应该可以正常使用了。试试输入“火箭”或添加你喜欢的表情符号。

登录后，您的 Web 应用程序应如下所示：

直播

使用 Mux 进行流式传输

现在您已经成功创建并运行了自定义应用程序，让我们一起来体验 Mux 带来的乐趣吧！首先，点击此处创建一个免费的 Mux 帐户。

多路复用器

配置好帐户后，请转到仪表板并单击“视频”，然后单击第三个选项（实时流）。

环境

单击页面右上角的“创建新直播”按钮。

直播

接下来，单击“运行请求”按钮执行 API 调用，这将为您创建一个新的直播流。

创造

创建后，点击“查看直播”。

直播

上面显示的页面包含您需要的各种连接信息。获取“Stream Key”值并将其存储在某个位置。您需要此值才能从您的设备进行直播。

在 iOS 设备上，下载“Broadcaster”，这是一款适用于 iPhone 的 RTMP 应用——您可以在 Apple Store 的 iOS 版中找到它，而且完全免费。如果您使用的是安卓系统，则有多种 RTMP 应用可供选择。下载完成后，输入“RTMP URL”作为主机名，以及“Stream Key”。在应用内点击“开始直播”，如果您使用的是其他 RTMP 应用，请点击相应的按钮。

广播员

现在，您已将视频从设备“实时流式传输”到 Mux，请使用播放 URL（HLS 供稿 URL）更新您的 Web 应用，以便您可以近乎实时地观看视频。

上线后，该“资产”即可通过 Mux 控制面板访问。获取“公共 URL”并将其拖放到您的应用控制面板中。

资产

URL 应以 结尾.m3u8，如果正常工作，您应该会在应用程序中看到呈现的实时视频！

流媒体

最后的想法

如今，视频直播风靡一时。无论您是在 Twitch 上观看职业玩家以“野兽模式”玩《堡垒之夜》，还是观看雄鹰筑巢，使用 Mux 进行实时观看都是您的最佳选择。

通过Mux和Stream Chat的组合，您不仅可以观看直播内容，还可以实时聊天，了解直播视频中发生的事情。它不仅有趣，而且实用，最重要的是，功能强大。以上述步骤的教程为起点，您现在可以在任何您选择的应用程序中创建自己的体验。

有关 Mux 及其平台各项产品的更多信息，请访问其网站https://mux.com 。如果您对流聊天 (Stream Chat)感兴趣，可以尝试交互式API 导览(Interactive API Tour) 。

如果您有兴趣构建一个完全自定义的版本，Stream Chat 还提供适用于iOS和React Native 的SDK （以及其他SDK），此外还有React Components，以便于集成。

祝你编码愉快！✌️

鏂囩珷鏉ユ簮锛�https://dev.to/nickparsons/tutorial-live-streaming-with-mux-stream-chat-59fm
Devto 翻译
PREV
从零到无服务器 GraphQL 端点
NEXT
与查克·诺里斯 (Chuck Norris) 进行 React Native 聊天