Javascript 添加/修改交互式livestream视频的覆盖内容

我正在构建一个web应用程序，用于使用HLS协议管理实时流视频。我有一个带vuejs的CMS来管理流媒体内容，现在，api响应了直播频道列表，其中包括livestream.m3u8的url

问题:

• 从api响应的livestream信息中，我想向当前的livestream视频添加额外的内容，以允许用户在观看livestream时与之交互，从而创建交互式livestream视频。附加内容是html，例如：输入表单、链接等。。。它是在特定位置显示livestream视频屏幕的叠加。下图是一个示例：
• 创建其他内容后，我将发布其调用api以提交此更改
• 然后更改将更新到用户，用户可以与覆盖内容交互

我不知道添加/修改覆盖内容以便于维护的最佳解决方案 我希望你能帮助解决这个问题。

---

谢谢您，

我将发布其“按调用”api以提交此更改

您将使用哪种api？这正是我创建覆盖内容并向用户广播的想法。你能给出另一个解决方案吗？另一个解决方案？这意味着已经有了解决方案。如果有解决方案，有什么问题？