在 Amazon IVS 上创建带完整聊天重播的按需过去直播流媒体播放

1 自动录制 Amazon IVS 直播流到 S3
2 使用 Amazon IVS 聊天记录存档网络聊天消息
3 Amazon IVS 实时流媒体回放与聊天回放

在各位最近的的几页博本文中，各位探索了怎样将 Amazon Interactive Video Service (Amazon IVS) 实时时间流自己视频录制到 Amazon S3，并且 怎样见证发送信息到 Amazon IVS 交流室的信息（参考下面的图片链接）。在这篇稿件中，各位将把这5个观念切合在同时来全面用户数感受，并創建兼有完整的交流重播功能模块的以前直播在线流的点播回放。

所谓我国在下一篇散文中找寻到的这样，统计好到系统日志统计好要求的闲聊见证新问题是指另一个为 GMT 的时光戳，代表会 Amazon IVS 闲聊见证室发布新闻故事的准确时刻和时光。为了能够改变城市热力图流的真实按需重播，并在最表示的时光要及时完毕新问题的等交互式闲聊见证重播，我国还要从统计好的流中拿为 GMT 的时光戳的常规化流，我国需要适用它来选定之类闲聊见证新问题必须在流播放视频中的不管什么给定期光点就能够说。现都没有保证此问题的word文件源，但我会国细致入微分析下 Amazon IVS ，了解下要不要需要找寻到需要助力我国完毕此日常任务的相关内容。

亚马逊 IVS 流元数据

在尝试解决这个问题时，我的第一个想法是查看与直播相关的元数据，看看其中是否隐藏了任何有价值的信息。值得庆幸的是，常规元数据流中似乎确实有一个值可用于我们的聊天回放目的。在我的测试中，每个流都包含似乎由 Amazon IVS 转码过程注入的 ID3 元数据。这些 ID3 标签包含一个有用的时间戳，我们可以使用它来帮助聊天重播。要侦听这些事件，我们可以附加一个侦听IVSPlayer.MetadataEventType.ID3事件类型的处理程序。此事件类型已记录在案，但并未对其进行过多说明或对其可能包含的内容做出任何保证。

想要避免未记录的功能？如果您担心使用未记录的功能，您可以在新消息发布到您的 Amazon IVS 聊天室时，将，并使用正确的时间戳。请记住，通过 API 发布PutMetadata事件。

监听元数据事件

让我们设置一个 Amazon IVS 播放器来使用播放器 SDK 播放录制的流。首先，我们将通过<script>标签包含最新的 Amazon IVS 播放器 SDK。

亚马逊 IVS 的新用户？查看博客系列。如果您对入门有疑问，请对该系列（或以下）中的任何帖子发表评论！

 <script src="//player.live-video.net/1.16.0/amazon-ivs-player.min.js"></script>

像往常一样，我们需要在我们的 HTML 标记中包含一个用于播放的<video>元素。

 <video id="video-player" muted controls autoplay playsinline></video>

现下我们公司就能够 开启另一个 IVS 播放软件器的经典案例。我未能对底下的 URL 对其进行硬编码查询，但您就能够 确认这篇经典文章 [todo: 友链] 中描术的办法了解此 URL。

 const streamUrl = '//[redacted].cloudfront.net/ivs/v1/[redacted]/[redacted]/2022/11/17/18/6/[redacted]/media/hls/master.m3u8'; const videoEl = document.getElementById('video-player'); const ivsPlayer = IVSPlayer.create(); ivsPlayer.attachHTMLVideoElement(videoEl); ivsPlayer.load(streamUrl); ivsPlayer.play();

如上所诉，要想能够以达到这1个最终目的，我需用1个正常的期限戳流。要想能够折算吸收 ID3 元数据源的频段，我加一下期限。关键在于，我在流着手播放电影时实时猎取期限戳。

 ivsPlayer.addEventListener(IVSPlayer.PlayerState.PLAYING, (evt) => { window.time = Date.now(); });

收起来，我们公司将生成 ID3 行为侦听器、信息准确时间基本原则置手表器。

 ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const now = Date.now(); console.log(`${(now - window.time) / 1000} seconds since last event`); window.time = now; });

现如今小编能够 刚开始连播并看控住台以详细了解打断致死案的工作频率。 在我的检查中，活动处理每 1-2 秒打断一天。它如果不是时时的，但在基本都数场面策略而言能够早就够了ＯＫ了。如今就让们看一番活动处理，瞧瞧它涉及一些数据显示。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { console.log(evt); });

如果你们联系后边的记录好器起播发时，他们可不可以看清下列消息记录好到搜索器把握台。

这是非常有趣的信息，但有点神秘。根据我的测试， transc_s似乎是我们所追求的时间戳。让我们修改事件处理程序以获取该时间戳并记录它。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; console.log(timestampWithMs); console.log(new Date(timestamp)); });

这会为我的测验生产以上输出电压。

倘若我在视频播放中收集同一个随机的此时，合理的日子戳时不时合理的。这预兆着每间隔 1-2 秒我就可能知晓在流中捕捉到案件的那个刻的更有效 GMT 日子戳。这预兆着我就能够比如还有日子戳时候推送的整个发讯息讯息早以公布到发讯息中，从而一般在发讯息容器类中内见。

检索聊天记录

当我的页面加载时，我可以使用本系列上一篇文章 [todo: link] 中概述的方法来检索流的整个聊天记录并将其呈现在聊天容器<div>中。由于在流的最开始不应显示任何消息，因此我将确保它们调用包含一个对用户隐藏它们的类，并存储具有正确时间戳的数据属性，以便我可以知道哪些消息应该可见给定流中的任何时间戳。

 window.chatLog = await getChatLogs(logGroupName, chatArn, startTime, endTime); renderChat();

我的renderChat()函数负责将每条消息发布到聊天容器。

 const renderChat = () => { const chatContainer = document.getElementById('chat'); window.chatLog.forEach(msg => { const msgTemplate = document.getElementById('chatMsgTemplate'); const msgEl = msgTemplate.content.cloneNode(true); const ts = new Date(msg.event_timestamp).getTime() * 1000; msgEl.querySelector('.msg-container').setAttribute('data-timestamp', ts); msgEl.querySelector('.chat-username').innerHTML = msg.payload.Attributes.username; msgEl.querySelector('.msg').innerHTML = msg.payload.Content; chatContainer.appendChild(msgEl); }); };

现在我可以修改 ID3 侦听器以调用replayChat()函数并将当前时间戳传递给它。

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; replayChat(timestampWithMs); });

在replayChat()中，我可以从记录的流中找到包含小于或等于当前时间戳的时间戳的所有聊天节点，并根据该时间戳显示/隐藏任何聊天消息。

 const replayChat = (currentTimestamp) => { Array.from(document.querySelectorAll('[data-timestamp]')).forEach(node => { const chatMsgTs = Number(node.getAttribute('data-timestamp')); const isVisible = chatMsgTs <= currentTimestamp; if (isVisible) { node.classList.remove('d-none'); } else { node.classList.add('d-none'); } }); const chatContainer = document.getElementById('chat'); chatContainer.scrollTop = chatContainer.scrollHeight; }

自此，当我们都已经 推动了以全部交流回放的方式英文回放录频的 Amazon IVS 直播秀流的制定目标。

概括

在这篇论文中，让我们科学研究了该如何把收录的 Amazon IVS 实时路况流与记录好的互动交流信息内容相联系，以创建活动都具有相当定期互动交流信息内容的流的按需重播。