是否有一些技巧可以在不使用 API 的情况下以编程方式确定给定的 Twitch 用户名是否正在流式传输?

问题描述

序言:由于我极度无能,Twitch 将我从他们的网站中拒之门外。我没有被禁止,但也可能在实践中。结果,我也无法再访问他们的 API。在创建新帐户时,有人透露他们现在要求“2FA”才能访问他们的 API,这意味着必须输入监控单元编号,这意味着我无法再次访问它。

除此之外,有没有办法以编程方式确定给定的 Twitch 用户是否在线?

当然,我已经加载了一个测试流网页,例如 https://www.twitch.tv/Czech_Meowt 并扫描了 HTML 中的任何“可检查”字符串,例如“isLive”,但唯一的实例只是 JS 变量名称,一切似乎以极其复杂的方式使用 JavaScript 构建,似乎经过精心设计,无法从网页中提取任何有用的信息。

我还检查了用 JS 加载的所有“JSON blob”,但它们没有帮助,我无法重现这些加载。

在许多其他情况下,我可以简单地获取 HTML 页面并检查是否存在诸如“X is streaming”之类的字符串,但在 Twitch 上,这似乎是不可能的。

有什么秘密技巧可以确定这一点吗?

解决方法

您可以尝试从链接中获取流预览

https://static-cdn.jtvnw.net/previews-ttv/live_user_NICKNAME-440x248.jpg

如果主播NICKNAME在线,则获取图片,否则重定向到

https://static-cdn.jtvnw.net/ttv-static/404_preview-440x248.jpg

在下一个示例中,我将请求的图像分辨率降低到 1x1,并使用禁用重定向的 HEAD 请求方法来增加吞吐量。

const elements = document.querySelectorAll('.status'),button = document.querySelector('.reload-btn')

button.onclick = reloadStatuses

function reloadStatuses() {
  for (const status of elements) {
    delete status.dataset.online
    const nick = status.dataset.nick
    const url = `https://static-cdn.jtvnw.net/previews-ttv/live_user_${nick}-1x1.jpg`

    fetch(url,{
      method: 'HEAD',redirect: 'manual'
    }).then(res => status.dataset.online = res.ok)
  }
}

reloadStatuses()
.status::before {
  content: "LOADING";
  padding: 5px;
  border-radius: 5px;
  font: 1em Arial;
  font-weight: bold;
  
  color: #544d00;
  background: #fff476;
}

.status[data-online="true"]::before {
  content: "ONLINE";
  color: #376136;
  background: #87ff85;
}

.status[data-online="false"]::before {
  content: "OFFLINE";
  color: #4c1511;
  background: #ff746a;
}
<button class="reload-btn">Reload</button>
<p>Soundtrack: <span class="status" data-nick="Soundtrack"></span></p>
<p>Myth: <span class="status" data-nick="Myth"></span></p>
<p>TheGrefg: <span class="status" data-nick="TheGrefg"></span></p>
<p>Pokimane: <span class="status" data-nick="Pokimane"></span></p>
<p>Auronplay: <span class="status" data-nick="Auronplay"></span></p>
<p>shroud: <span class="status" data-nick="shroud"></span></p>
<p>Rubius: <span class="status" data-nick="Rubius"></span></p>
<p>Tfue: <span class="status" data-nick="Tfue"></span></p>
<p>Ninja: <span class="status" data-nick="Ninja"></span></p>