请问有大佬知道 twitch/虎牙 的直播看牌功能的技术原理么

[Augi]

RT，发现虎牙的网页版和 App 都支持了直播看牌，就是在观看直播的过程中，将鼠标悬浮或者手按住视频中卡牌所在的区域就会显示出对应卡牌的介绍。感觉很炫酷，有大佬知道怎么实现的么。

网页端看了下，视频的上方会有遮罩层，对应到视频的卡片位置，hover 会显示对应的介绍，所以关键是视频中每一帧都生成卡片的位置信息以及对应的卡牌信息是如何同步给前端的，我看还是挺实时的。

补充功能介绍图：

[toyassb]

本地有插件，直接将信息传给服务器

[Dididadada]

看了一下控制台，发现虎牙的 log 输出挺丰富的，有一条是 监听炉石卡片数据，里面有卡片 id 和宽高位置，后边怎么做就比较简单了。卡片数据应该是从每帧图像里识别出来的吧，应该也不是很复杂，不过确实挺有想法的。
另外发现个小 bug，我没登录过了一会弹出登录框的时候，无法点击，还是会识别到下层的卡片，看起来这个功能应该也是刚刚加上

[noe132]

https://github.com/HearthSim/twitch-hdt-frontend

主播安装一个本地插件读取数据上传到服务器，然后服务器再广播给所有观众。

这个在 twitch 已经很成熟了，早 2 年就有这样的功能了。

[Augi]

@Dididadada 嗯嗯，最近才加上的

[Augi]

@noe132 流批，就是卡牌的位置信息是主播端根据插件生成然后广播出去的是吧