javascript - 如何显示当前 Twitch 流的状态?

标签 javascript html css api streaming

我正在尝试为本地流媒体社区制作索引。

我正在着手编写一些模板代码。

下面是一个模型 - 勾号代表实时,X 代表离线(我的最终产品会更有吸引力 - 这只是为了可视化。)

enter image description here

我的代码模板

<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

<p id="display"></p>

<script>
$.getJSON('https://api.twitch.tv/kraken/streams/Jonathan_x64', function(channel) {

if (channel["stream"] == null) { 
    document.getElementById("display").innerHTML = "NOT LIVE";

} else {
    document.getElementById("display").innerHTML = "LIVE";

}
});
</script>

</body>
</html>

最佳答案

您的代码是正确的,但您应该尝试在您的浏览器中访问您尝试访问其 JSON 数据的 URL。您会注意到您收到了一个错误的请求。这是因为您还必须在请求中传递客户端 ID。

Twitch documentation解释了如何获得它。获得客户端 ID 后,您可以修改 URL 以将其添加为参数:

https://api.twitch.tv/kraken/streams/Jonathan_x64?client_id=XXXXX

完成此操作后,您的代码将按预期工作。

关于javascript - 如何显示当前 Twitch 流的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49653494/

相关文章:

jQuery:分层选项卡用户界面

javascript - 如何使用 Sinon stub "wrapper"函数?

javascript - 如何在 JavaScript 中循环遍历数组

javascript - 2 函数中的返回值取决于if语句? (JS)

javascript - Typescript/Javascript 赋值并返回单行代码

javascript - jQuery 附加不更新 DOM,因此无法从 MVC Controller 检索内容

html - 如何仅使用悬停而不使用伪元素之前或之后从底部过渡到顶部?

html - 在屏幕中居中 BIG div

jquery - BxSlider 淡入和淡出

HTML/CSS 跨浏览器与 SVG 不一致