如何在React应用中获取YouTube直播评论及Superchat数据（无需主播权限）

可行解决方案 #

方案1：后端代理层+直播接口自研解析 #

• 避免在React前端直接发起对YouTube的请求，新增轻量后端服务作为代理层，所有YouTube相关请求均从后端发起，从根源解决CORS问题。
• 后端首次请求时可直接在请求头中携带Cookie同意标识，或在请求参数中加入consent=YES跳过Cookie同意弹窗校验，无需处理前端页面交互逻辑。
• 不需要依赖停止维护的第三方npm库，可自行解析YouTube直播页面内嵌的初始结构化数据，或监听官方live chat轮询接口，直接提取Superchat对应的金额、发送用户、留言内容等字段。
• 后端将处理完成的结构化数据通过自定义接口返回给React前端，前端直接完成分组展示逻辑即可。

该方案性能最优、资源占用最低，适合长期稳定运行。

方案2：无头浏览器爬取 #

• 可选用比Selenium更轻量的Puppeteer或Playwright无头模式运行在后端，资源占用和运行效率都优于Selenium。
• 启动浏览器实例后访问目标直播页面，自动模拟点击Cookie同意按钮，之后监听聊天区域的DOM更新事件，当有新的Superchat消息插入时，直接提取对应DOM节点的内容即可。
• 可配置实例复用、内存限制规则，避免资源占用过高，适合低并发的个人使用场景。
• 后端可搭配WebSocket将实时提取的Superchat数据推送给前端，实现实时更新效果。

方案3：浏览器扩展实现 #

• 如果你的应用仅个人使用、不需要公网发布，可改为浏览器扩展形式开发，扩展的后台脚本不受CORS跨域限制，可直接在用户访问YouTube直播页面时注入内容脚本提取Superchat信息，同步到React页面展示，无需额外后端服务，开发成本最低。

内容的提问来源于stack exchange，提问作者Rudy