Twitch Embed with Korean Streamer Name

i’m actually working on a Twitch clone with React , using the Twitch API.

I’ve barely finished my project but I have a problem with my embed, when it’s a non-latin alphabet name, like “한동숙” it’s not working.

I am embedding twitch with this handy tool : https://www.npmjs.com/package/react-twitch-embed-video

And it looks like this :

import React from "react";
import './Live.css';
import ReactTwitchEmbedVideo from "react-twitch-embed-video"


function Live({location }){


    return(

        <div className="containerLive">
            <ReactTwitchEmbedVideo height="927" width="100%" channel={location.state.name} />
        </div>

    )
}

export default Live;

I am taking the name from location and place it in the channel, it work fine with latin alphabet name.

I know there is also the twitch embed, but it’s not easy to use with react and the problem is the same :

<body>   <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "한동숙" // <-- Not Working !
      });
    </script>
    <script src="app.js"></script>
</body>

Unfortunatly there is no way to display stream with user_id, just user_name …

DO i need translate it in some way ? How twitch can display asian stream ?

Thank’s if someone is passing by, I have been working on it for 5 dayss.

You need to embed/call the channel using it’s non korean name. Aka it’s login name not it’s display name

So for example (using the first korean name from the live directory) 풍월량 is the display name and hanryang1125 is the “login” name.

So you’d do:

    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "hanryang1125"
      });
    </script>

Using the Helix users API: https://api.twitch.tv/helix/users?login=hanryang1125

{
"data": [
{
"id": "103825127",
"login": "hanryang1125",
"display_name": "풍월량",
"type": "",
"broadcaster_type": "partner",
"description": "",
"profile_image_url": "https://static-cdn.jtvnw.net/jtv_user_pictures/hanryang1125-profile_image-58261d78af47d249-300x300.jpeg",
"offline_image_url": "https://static-cdn.jtvnw.net/jtv_user_pictures/d109b87f-15d5-4314-b34d-2d5183c4c7c5-channel_offline_image-1920x1080.jpeg",
"view_count": 69276883
}
]
}

use the login not the display name

Wow, this is perfect ! Thank you so much

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.