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

上周，我有幸参加了好友 Todd Sharp 的现场直播，Streaming on Streaming。您可以在此处观看该会议的录音： https://www.twitch.tv/videos/1811192764?embedable=true 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 稍后在流中与我分享的另一个选项 。这是一个基于 Web 的流解决方案，您可以使用它来测试 IVS。 stream.ivs.rocks 在浏览器中打开该页面（请注意，它说不支持 Edge，但我没有遇到任何问题），然后单击齿轮图标进入您的设置。您需要指定“摄取端点”和“流密钥”，这两者都可以在 AWS 控制台的频道详细信息中找到。 不要重蹈我的覆辙——“摄取服务器”与“摄取端点”不同，您需要打开并展开“其他摄取选项”才能看到。 完成后，您可以单击下面的“开始流式传输”按钮，然后就可以了！虽然这不是您为“真正的”流做的事情，但它的设置要简单和快捷 。 得多 流式传输后，返回 AWS 控制台，单击“直播频道”，您可以看到正在运行的流式传输： 如果您转到频道详细信息，它也会显示在那里： 顺便说一句，无论是在那里还是将来，您都可以查看过去的流和关于流的各种很酷的指标。 其中有很多术语我都不熟悉，所以如果您是流媒体新手，请记住这一点（这是我与 Todd 分享的内容作为反馈），但如果您喜欢统计数据，AWS 可以满足您的需求。 第四步 - 前端 实际上查看流需要弄清楚您要 查看。考虑到我是一名网络专家，而这篇文章是关于在 Jamstack 上做的，他们文档中的 是您接下来想要去的地方。再一次，初始实现可以非常简单。 在哪里 网络指南 这是一个完整的实现： video#video-player { width: 800px; height: 450px; } My Stream 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'); } 让我们分解一下。您在顶部加载了一个脚本标记来加载他们的 SDK。接下来，我得到了我的 HTML，其中重要的部分是 标记和我的 CSS 以正确调整它的大小。 JavaScript 创建 的实例并将其附加到 DOM。 值来自 AVS 通道配置： IVSPlayer pbURL 它在这里起作用了！ 现在，在太兴奋之前，请注意，这是您可以使用的最简单的代码，但实际上并不是非常安全，并且您肯定会在测试时遇到这个问题，如果您不进行流式传输，尝试时会出错加载流。这 有道理，所以更好的代码会处理这个问题。 绝对 我快速浏览了 ，我看到了事件支持，因此您应该能够让它监听流的开始；要么在那个点加载，要么在 DOM 中做一些事情让查看网页的人知道流开始了。 Web 参考 就是这样！ 好吧，当然，这不是很有生产价值，但我确实在一个小时内完成了一个流媒体解决方案。现在，这不会是免费的，所以要牢记这一点，但我真的被你开始的速度以及开箱即用的能力所震撼。 由 AWS 处理一切，它非常适合 Jamstack。您也可以集成基于服务器的 API，这就是我要使用 Netlify Functions 之类的东西的地方。 所以再次检查 。会有很多东西需要消化，但比我在这里提到的要多得多。 文档 接下来，查看 Todd ，他在其中分享了很多示例。最近，他演示了 ，然后又展示了一个 。 在 dev.to 上的帖子 在浏览器中进行实时多主机视频聊天 多主机和实时流媒体的示例，同样是浏览器 我认为他的帖子涉及聊天和你必须调节的权力是我最喜欢的。我还推荐他写的关于 那篇文章，因为它特别酷。 创建您自己的“LoFi”广播电台的