stream.new
一个开源示例应用程序,允许用户使用 Mux 录制和上传视频
查看演示
·
报告错误
·
请求功能
目录
关于项目
组件:
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 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编码字符串:
cat service-account.json | base64
^ 此命令将输出一个长字符串。这个字符串就是你将用于ENV变量GOOGLE_APPLICATION_CREDENTIALS
的值。
当Slackbot审核员消息发布到Slack时,现在将包含一个"审核分数(Google)"部分,有3个维度:
"adult"
(成人内容)"suggestive"
(暗示性内容)"violent"
(暴力内容)
每个维度的分数从1到5。你应该将这些分数解释为视频包含此类内容的可能性。这是基于Google Vision的可能性分数
1
: 非常不可能2
: 不太可能3
: 可能4
: 很可能5
: 非常可能
步骤6(可选)为Slackbot审核员添加自动内容分析(Hive AI)
stream.new可以借助Hive AI自动审核内容。
按照以下步骤来帮助审核上传的内容:
HIVE_AI_KEY
- 这是你的Google服务账户凭证的JSON表示的base64编码。按照以下说明操作。
- 首先,你需要在thehive.ai注册一个账户。
- 创建一个项目
- 获取项目的API密钥
当Slackbot审核员消息发布到Slack时,现在将包含一个标题为"审核分数(hive)"的部分,有2个维度:
"adult"
(成人内容)"suggestive"
(暗示性内容)
每个维度的分数从0到1,精确到小数点后6位。这些数字来自Hive AI提供的"分类API"。详情请见。
通过查询参数实现的隐藏播放功能:
time
: 将在特定的时间戳(以秒为单位)开始播放视频,例如?time=10
将从10秒处开始像这样color
: 一个不带#
的十六进制值将以primaryColor为主题设置Mux播放器。重要的是要省略#
,例如?color=f97316
像这样
开发中测试用的视频:
在开发过程中,如果你对视频播放器做了任何更改,请确保它能正常工作并在各种尺寸的视频中看起来不错:
横向
竖向
超竖向
同时也要确保检查: Safari, 移动版Safari, Chrome, Firefox,因为它们的行为略有不同。