<p align="center"> <a href="https://mux.com/"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg"> <source media="(prefers-color-scheme: light)" srcset="https://yellow-cdn.veclightyear.com/0a4dffa0/0208a69e-883a-4727-9bad-3939ddd3687d.svg"> <img alt="Mux 标志" src="https://yellow-cdn.veclightyear.com/0a4dffa0/0208a69e-883a-4727-9bad-3939ddd3687d.svg"> </picture> <h1 align="center">stream.new</h1> </a> </p> <div align="center"> <a href="https://github.com/muxinc/stream.new/stargazers"><img src="https://img.shields.io/github/stars/muxinc/stream.new" alt="星标数量"/></a> <a href="https://github.com/muxinc/stream.new/network/members"><img src="https://img.shields.io/github/forks/muxinc/stream.new" alt="分支数量"/></a> <a href="https://github.com/muxinc/stream.new/pulls"><img src="https://img.shields.io/github/issues-pr/muxinc/stream.new" alt="拉取请求数量"/></a> <a href="https://github.com/muxinc/stream.new/issues"><img src="https://img.shields.io/github/issues/muxinc/stream.new" alt="问题数量"/></a> <a href="https://github.com/muxinc/stream.new/graphs/contributors"><img alt="GitHub 贡献者" src="https://img.shields.io/github/contributors/muxinc/stream.new?color=2b9348"></a> </div> <br /> <p align="center"> 一个开源示例应用程序，允许用户使用 Mux 录制和上传视频 <br /> <br /> <a href="https://stream.new/">查看演示</a> · <a href="https://github.com/muxinc/stream.new/issues">报告错误</a> · <a href="https://github.com/muxinc/stream.new/issues">请求功能</a> </p>  <details open="open"> <summary><h2 style="display: inline-block">目录</h2></summary> <ol> <li> <a href="#about-the-project">关于项目</a> <ul> <li> <a href="#components">组件</a> </li> </ul> </li> <li> <a href="#getting-started">入门指南</a> <ul> <li><a href="#step-1-create-an-account-in-mux">步骤 1. 在 Mux 创建账户</a></li> <li><a href="#step-2-set-up-environment-variables">步骤 2. 设置环境变量</a></li> <li><a href="#step-3-deploy-on-vercel">步骤 3. 在 Vercel 上部署</a></li> <li><a href="#step-4-optional-slackbot-moderator">步骤 4. （可选）Slackbot 审核员</a></li> <li><a href="#step-5-optional-add-automatic-content-analysis-to-slackbot-moderator-google-vision-api" >步骤 5. （可选）为 Slackbot 审核员添加自动内容分析（Google Vision API）</a></li> <li><a href="#step-6-optional-add-automatic-content-analysis-to-slackbot-moderator-hive-ai" >步骤 6. （可选）为 Slackbot 审核员添加自动内容分析（Hive AI）</a></li> </ul> </li> <li><a href="#videos-to-test-in-development">开发中测试的视频</a></li> </ol> </details>

关于项目

组件：

Mux：

直接上传 - 这是一个用于从客户端上传视频文件以创建 Mux 资产的 API
Webhook 签名验证 - Webhook 签名验证，确保 Mux webhooks 来自可信来源
HLS.js - 用于进行视频的 HLS 播放
Mux Data - 用于跟踪视频质量指标

Slackbot 审核员。这个示例允许你配置 SLACK_WEBHOOK_ASSET_READY。当新的 Mux 资产"就绪"时，将发送一个 Slack 的传入 Webhook。这是一个如何集成可用于内容审核的 Slack 频道的示例。Slack 消息包含资产 ID、播放 ID 和视频的缩略图故事板。

NextJS：

SWR — 根据客户端是否应该轮询更新来动态更改 refreshInterval
/pages/api 路由 — 几个用于向 Mux API 发出经过身份验证的请求的端点
使用 getStaticPaths 和 fallback: true 的动态路由，以及动态 API 路由

这个应用程序以 NextJS with-mux-video 示例为起点创建。

入门指南

步骤 1. 在 Mux 创建账户

设置这个只需要一个 Mux 账户。你可以免费注册，定价采用按使用付费的方式。没有预付费用，你只需为实际使用的部分按月付费。

如果你没有在 Mux 账户中输入信用卡，所有视频都处于"测试模式"，这意味着它们会带有水印并被剪辑到 10 秒。如果你输入信用卡，所有限制都将解除，你将获得 20 美元的免费额度。在收费之前，这笔免费额度应该足够让你测试和体验所有功能。

步骤 2. 设置环境变量

将此目录中的 .env.local.example 文件复制为 .env.local（Git 会忽略该文件）：

cp .env.local.example .env.local

然后，前往 Mux 仪表板中的设置页面，获取一个新的允许对 Mux Video 进行"完全访问"的 API 访问令牌，并在 .env.local 中设置以下变量：

MUX_TOKEN_ID 应为新令牌的 TOKEN ID
MUX_TOKEN_SECRET 应为 TOKEN SECRET
MUX_WEBHOOK_SIGNATURE_SECRET（可选）- 如果设置了 webhooks，则为 webhook 签名密钥（见下文）
SLACK_WEBHOOK_ASSET_READY（可选）- 用于 Slackbot 审核员功能的 Slack webhook URL（见下文）
SLACK_MODERATOR_PASSWORD（可选）- 当你想从 Slackbot 审核员功能执行操作时使用的密码（见下文）
NEXT_PUBLIC_MUX_ENV_KEY（可选）- 用于 Mux Data 集成的 Mux 环境密钥

第 3 步. 在 Vercel 上部署

你可以使用 Vercel 将此应用部署到云端（文档）。

要在 Vercel 上部署，你需要使用 Vercel CLI 设置环境变量（文档）。

安装 Vercel CLI，从 CLI 登录你的账户，然后运行以下命令添加环境变量。将值替换为 .env.local 中对应的字符串：

vercel secrets add stream_new_token_id <MUX_TOKEN_ID>
vercel secrets add stream_new_token_secret <MUX_TOKEN_SECRET>

然后将项目推送到 GitHub/GitLab/Bitbucket，并导入到 Vercel 进行部署。

第 4 步（可选）Slackbot 审核员

此应用程序使用 Slackbot 在每次有新资源准备好播放时向 Slack 频道发送消息。这需要进行一些设置步骤。

首先，登录到你的 Mux 仪表板，在左侧边栏导航中找到设置 > Webhooks。创建一个新的 webhook，确保你创建的 webhook 环境与你使用的访问令牌相匹配。

对于本地开发，你可能需要使用类似 ngrok 的工具在 localhost 上接收 webhooks。webhook 处理程序的路由是 /api/webhooks/mux（在此 NextJS 应用的 ./pages/api/webhooks/mux 中定义）。

创建一个 Slack "传入 Webhook"。配置要发布到的频道、图标等。

完成后，你应该会得到一个类似 https://hooks.slack.com/services/... 的 Slack webhook URL。

通过直接在 Vercel UI 中设置或通过更新 vercel.json 并将它们设置为组织的机密来设置可选的环境变量。可选的环境变量包括：

MUX_WEBHOOK_SIGNATURE_SECRET - 这是一种安全机制，用于在请求到达服务器时检查 webhook 签名头，以便服务器可以验证 webhook 是否来自 Mux。阅读更多关于 webhook 签名验证的信息。请注意，在 ./pages/api/webhooks/mux 中，只有在设置了签名密钥变量时，代码才会验证签名，所以这一步是可选的。
SLACK_WEBHOOK_ASSET_READY - 这是创建 Slack 传入 Webhook 时得到的 https://hooks.slack.com/services/.... URL。
SLACK_MODERATOR_PASSWORD - 这是用于授权从 Slack 审核员删除资源的密码（带有红色文字"DELETE (cannot be undone)"的按钮）
NEXT_PUBLIC_MUX_ENV_KEY - 这是用于 Mux Data 的环境密钥。注意，这与你的 API 密钥不同，可以在 Mux 仪表板的环境页面找到此环境密钥
TELEMETRY_ENDPOINT - 这是发送检测遥测数据的端点。截至此更新，我们仅在上传性能周围收集/发送遥测数据，以测试 UpChunk 的不同配置，但将来可能会有更多。

设置完所有这些后，流程将是：

上传资源
Mux 向你的服务器（NextJS API 函数）发送 webhook
（可选）你的服务器验证 webhook 签名
如果 webhook 匹配 video.asset.ready，则你的服务器将向你的 Slack 频道发送一条包含 Mux Asset ID、Mux Playback ID 和视频缩略图的消息。

第 5 步（可选）为 Slackbot 审核员添加自动内容分析（Google Vision API）

stream.new 可以借助 Google 的 Cloud Vision API 自动审核内容。

按照以下步骤帮助审核上传的内容：

GOOGLE_APPLICATION_CREDENTIALS - 这是你的 Google 服务账户凭证的 base64 编码 JSON 表示。按照以下说明操作。

首先，你需要在 cloud.google.com 设置一个 Google 开发者账户。
创建一个项目
为你的项目创建一个服务账户，并为你的项目启用 "Cloud Vision API"

以 JSON 格式导出 Google 服务账户认证文件。如果你有一个类似这样的文件：

service_account.json

{
  "type": "service_account",
  "project_id": "",
  "private_key_id": "",
  "private_key": "-----BEGIN PRIVATE KEY-----\",
  "client_email": "",
  "client_id": "",
  "auth_uri": "",
  "token_uri": "",
  "auth_provider_x509_cert_url": "",
  "client_x509_cert_url": ""
}

按如下方式获取此JSON文件的base64编码字符串: