303 讀數

如何在几分钟内将流媒体添加到您的 Jamstack 站点

经过 Raymond Camden7m2023/05/19

太長; 讀書

上周，我有幸参加了好友 Todd Sharp 的现场直播，Streaming on Streaming。 Todd 是 Amazon Interactive Video Service (IVS) 的主要开发人员倡导者 IVS 是一种利用 Twitch 平台的力量并将其置于您手中的方式。这是入门的简单性的基本概述。

featured image - 如何在几分钟内将流媒体添加到您的 Jamstack 站点

上周，我有幸参加了好友 Todd Sharp 的现场直播，Streaming on Streaming。您可以在此处观看该会议的录音：

Todd 是 Amazon Interactive Video Service (IVS) 的主要开发人员倡导者，或者更简单地说，是一种利用 Twitch 平台不可思议的力量并将其置于您手中的方式。 IVS为您提供：

为您的内容创建频道的能力。

广播内容的多种方式，从基于 Web 到更强大的工具（如 OBS）。

多种方式来显示您的内容，包括一个非常简单的网络 SDK。

超级详细的报告。

并深度集成到流中，允许转录、基于 Lambda 的聊天管理等。

这是一项商业服务，但与 AWS 中的几乎所有内容一样，有一个免费套餐可供您进行测试，看看它是否对您有意义。

在我与 Todd 的会议中，他想通过“首次开发人员的体验”来放置他们自己的文档和控制台。因此，首先，考虑并真正关心最初的开发人员使用您的产品的体验可能是您可以做的最重要的事情之一。

我知道在我自己的开发者宣传职业生涯中，如果不不断检查和评论开发者入职，我几乎不可能尝试新事物。托德在他的直播中这样做值得疯狂的尊重。

我有点以破坏事物、做错事而闻名，而且通常只是你在 DX 方面最糟糕的噩梦，所以这对他来说是非常勇敢的。

（要明确的是，我们没有预先计划任何这个流。我没有提前得到任何东西，我唯一真正的知识是阅读他的博客文章和一般聊天。）

你可以想象，像“推出你自己的 IVS”之类的东西会非常复杂，但在我们一个小时的会议中，我们设置了我的频道，我从 OBS 和网络工具进行广播，并能够构建一个简单的用于显示流的网页。

我想我会在这里分享其中的一些亮点，因为在 Jamstack 中支持流式传输的想法听起来非常引人注目。这将有点高级，但文档非常详尽，将为您提供有关细节的更多详细信息。

您还需要从入门指南开始。

考虑到这一点，这里有一个简单的入门概述。

第一步 - 获取 AWS

我只是要跳过这个。我的意思是，我想我并没有像我所说的那样，你永远不应该假设任何事情，但由于很大一部分人已经在使用 AWS，我的假设是你已经有一个账户。

我做了并使用了我的根用户，但是如果你点击我上面分享的入门链接，他们会让你设置一个访问权限更受限制的用户，这是正确的事情，我们总是在技术上做正确的事。咳咳。

第二步 - 创建您的频道

接下来您要做的是在 AWS 控制台的 IVS 部分定义一个通道：

提醒一下，IVS 的 tox 搜索框在查找内容方面做得非常好。 AWS 可能有点让人不知所措，但他们的搜索最近让事情变得容易多了。

我假设大多数人都知道流媒体并了解频道的基本概念，但如果我开始流媒体，我可能只有一个频道。

如果我想在我公司的网站上添加流媒体，我可以想象有一个频道用于培训、外部活动等。

至少，需要一个通道。创建新频道时，最低限度是名称：

请注意，其中一个选项是自动将流存储到 S3。我没有在 Todd 的直播中启用它，但启用起来如此简单真是太好了。显然，存储大型视频文件会产生成本，但我很欣赏启用它的简单性。

第三步 - 找出你的广播公司

有关使用他们的 SDK、OBS Studio 或 FFmpeg设置流媒体的入门文档。我过去使用过 OBS Studio，所以在与 Todd 的直播中，我使用了它。不过，我会警告大家，如果您以前从未使用过它，它可能会让人不知所措。

这绝对是给我的（哎呀，我仍然几乎不知道自己在做什么）。

相反，让我分享 Todd 稍后在流中与我分享的另一个选项stream.ivs.rocks 。这是一个基于 Web 的流解决方案，您可以使用它来测试 IVS。

在浏览器中打开该页面（请注意，它说不支持 Edge，但我没有遇到任何问题），然后单击齿轮图标进入您的设置。您需要指定“摄取端点”和“流密钥”，这两者都可以在 AWS 控制台的频道详细信息中找到。

不要重蹈我的覆辙——“摄取服务器”与“摄取端点”不同，您需要打开并展开“其他摄取选项”才能看到。

完成后，您可以单击下面的“开始流式传输”按钮，然后就可以了！虽然这不是您为“真正的”流做的事情，但它的设置要简单和快捷得多。

流式传输后，返回 AWS 控制台，单击“直播频道”，您可以看到正在运行的流式传输：

如果您转到频道详细信息，它也会显示在那里：

顺便说一句，无论是在那里还是将来，您都可以查看过去的流和关于流的各种很酷的指标。

其中有很多术语我都不熟悉，所以如果您是流媒体新手，请记住这一点（这是我与 Todd 分享的内容作为反馈），但如果您喜欢统计数据，AWS 可以满足您的需求。

第四步 - 前端

实际上查看流需要弄清楚您要在哪里查看。考虑到我是一名网络专家，而这篇文章是关于在 Jamstack 上做的，他们文档中的网络指南是您接下来想要去的地方。再一次，初始实现可以非常简单。

这是一个完整的实现：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

让我们分解一下。您在顶部加载了一个脚本标记来加载他们的 SDK。接下来，我得到了我的 HTML，其中重要的部分是<video>标记和我的 CSS 以正确调整它的大小。

JavaScript 创建IVSPlayer的实例并将其附加到 DOM。 pbURL值来自 AVS 通道配置：