Augi

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

  •  
  •   Augi · Aug 2, 2021 · 2994 views
    This topic created in 1920 days ago, the information mentioned may be changed or developed.

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

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

    补充功能介绍图: image.png

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

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

    这个在 twitch 已经很成熟了,早 2 年就有这样的功能了。
    Augi
    Augi
    OP
    Aug 3, 2021 via iPhone
    4
    @Dididadada 嗯嗯,最近才加上的
    Augi
    Augi
    OP
    Aug 3, 2021 via iPhone
    5
    @noe132 流批,就是卡牌的位置信息是主播端根据插件生成然后广播出去的是吧
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4938 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 07:38 · PVG 15:38 · LAX 23:38 · JFK 02:38
    ♥ Do have faith in what you're doing.