V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Augi
V2EX  ›  视频技术

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

  •  
  •   Augi · 2021-08-02 22:34:48 +08:00 · 1673 次点击
    这是一个创建于 1233 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    补充功能介绍图: image.png

    5 条回复    2021-08-03 09:16:55 +08:00
    toyassb
        1
    toyassb  
       2021-08-02 22:47:04 +08:00
    本地有插件,直接将信息传给服务器
    Dididadada
        2
    Dididadada  
       2021-08-03 00:00:07 +08:00
    看了一下控制台,发现虎牙的 log 输出挺丰富的,有一条是 监听炉石卡片数据,里面有卡片 id 和宽高位置,后边怎么做就比较简单了。卡片数据应该是从每帧图像里识别出来的吧,应该也不是很复杂,不过确实挺有想法的。
    另外发现个小 bug,我没登录过了一会弹出登录框的时候,无法点击,还是会识别到下层的卡片,看起来这个功能应该也是刚刚加上
    noe132
        3
    noe132  
       2021-08-03 08:40:11 +08:00   ❤️ 1
    https://github.com/HearthSim/twitch-hdt-frontend

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

    这个在 twitch 已经很成熟了,早 2 年就有这样的功能了。
    Augi
        4
    Augi  
    OP
       2021-08-03 08:57:51 +08:00 via iPhone
    @Dididadada 嗯嗯,最近才加上的
    Augi
        5
    Augi  
    OP
       2021-08-03 09:16:55 +08:00 via iPhone
    @noe132 流批,就是卡牌的位置信息是主播端根据插件生成然后广播出去的是吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3283 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:41 · PVG 19:41 · LAX 03:41 · JFK 06:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.