0
538
ViewsHow to embed Twitch channel (video + chat) using React Js
Hello I'm creating a web app for myself and trying to use the Twitch Embedded API to display Twitch streams and the chat within my web page. I'm not sure how to handle this I have some experience with React JS but definitely not this.
They provide an HTML but I have no idea how to make it work on my app:
<html>
<body>
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Load the Twitch embed JavaScript file -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "monstercat",
// Only needed if this page is going to be embedded on other websites
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</body>
</html>
Since I didn't understand this bit I went to try and just get the video at least, this is the code they provide, but I have not manage it to make it work so far:
<iframe
src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com"
height="<height>"
width="<width>"
allowfullscreen="<allowfullscreen>">
</iframe>
I did the following and got this result:
<Box mb={3} sx={{display: 'flex', justifyContent: 'center', mr: 2}}>
<CardMedia
component = "iframe"
src="https://player.twitch.tv/?<StreamerName>&parent=localhost"
title = 'Faker stream'
controls/>
</Box>
Or this
This is the SandBox I have created. I saw other resources/questions/answers and they are a bit outdated which is why I created this new question.
1 answers
Answer question0
If anyone was wondering how to do this I got the video one working. I'll update it again if I get the HTML one with chat + video working.
JUST VIDEO
<Box mb={3} sx={{display: 'flex', justifyContent: 'center', mr: 2, color: "white"}}>
<CardMedia
component = "iframe"
src="https://player.twitch.tv/?channel=faker&parent=localhost"
height = "800"
title = 'Faker stream'
controls/>
</Box>