0
541
VistasCómo incrustar un canal de Twitch (video + chat) usando React Js
Hola, estoy creando una aplicación web para mí y tratando de usar la API integrada de Twitch para mostrar las transmisiones de Twitch y el chat dentro de mi página web. No estoy seguro de cómo manejar esto. Tengo algo de experiencia con React JS, pero definitivamente no con esto.
Proporcionan un HTML pero no tengo idea de cómo hacer que funcione en mi aplicación:
<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>Como no entendí esto, intenté obtener el video al menos, este es el código que proporcionan, pero no lo he logrado para que funcione hasta ahora:
<iframe src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com" height="<height>" width="<width>" allowfullscreen="<allowfullscreen>"> </iframe>Hice lo siguiente y obtuve este resultado:
<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> 
O esto
Este es elSandBox que he creado. Vi otros recursos/preguntas/respuestas y están un poco desactualizados, por eso creé esta nueva pregunta.
1 Respuestas
Responde la pregunta0
Si alguien se preguntaba cómo hacer esto, obtuve el video que funciona. Lo actualizaré nuevamente si obtengo el HTML con chat + video funcionando.
SOLO VÍDEO
<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>