Non-Interactive Inline Frames for Live Streams and VODs gives out error when in use

API
1

I simply want to include twitch.tv stream as well as chat in my site.
Right now everytime I load the site it gives me this error message.

49%20PM
49%20PM1920×335 61.6 KB

Twitch embed method I used was this:

<script src="https://embed.twitch.tv/embed/v1.js"></script>

    <div id="twitch_tv_wrapper" class="row">
      <div id="twitch_video_wrapper" class="embed-responsive embed-responsive-16by9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-xs-12">
        <div id="twitch_video">
          <iframe src="https://player.twitch.tv/?channel=trick2g&muted=true" height="720" width="1280" frameborder="0"
            scrolling="no" allowfullscreen="true" muted="true">
          </iframe>
        </div>
      </div>
      <div id="twitch_chat_wrapper" class="embed-responsive embed-responsive-16by9 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-xs-12">
        <iframe scrolling="yes" id="trick2g" src="https://www.twitch.tv/embed/trick2g/chat"></iframe>
      </div>
    </div>

I did not add anything else in my app.js file. Why does it give me back these errors?
Can I ignore them?

2

yes

3

you sure? I am worried that if I ignore them my site will get more and more errors then eats out a lot of ram…
sorry if this wasn’t the case.

4

Yes

That’s not possible…

1 Like
5

okay thanks!

6

I just tried my site in an incognito window, and without signed in, the server returns a 401 response.

May I ask you that is it better to fully utilize the API and ask the user to sign in everytime my site loads?

7

The documentation for embedding is here

You have followed this correctly.

I don’t see an issue here.

Nothing of what you have posted would return a 401 visible to the visiting user

8

03%20PM
03%20PM1920×1080 251 KB

I need to type something in chat, then it prompt me to log in, after logging in, it gives me this error

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.twitch.tv’) does not match the recipient window’s origin (‘http://127.0.0.1:5500’).

Then I have to refresh the whole page to get it to load correctly.

9

You are attempting to post from a HTTP page to HTTPS page which is blocked due to permission settings.

I assumed you had set this up on a “proper” website/test and not running off a self host/127/non SSL address

1 Like
10

I see. I will upload this site to digital ocean and see whether is there any more error comes out.

Thanks for the help.

11

All of the errors you have highlighted are completely irrelevant error messages. And unrelated to

The real issue doesn’t generate a console error.

1 Like
12

I see… thanks.

13

@BarryCarlyon

I have deployed my site using netlify and the site domain is: https://trick2gsite.netlify.com/

Still, whenever I open the console it gives me these error messages.

56%20AM
56%20AM1920×1080 437 KB

The thing I don’t understand is:

  1. if it shows 401 it must mean that I dont have the authorization to access that server. in my site’s youtube section, I used fetch to GET the http request hence passed in my API key. but twitch does not mention any of this.

  2. I dont have access at this part of the code:

    48%20AM
    48%20AM1217×152 41 KB

14

The error you have posted is irrelevant and safe to ignore.

Usually part of a code test where the code attempts to see if it is in an iframe or now.

Whats the actual problem?

15

Let’s say that I open my site and the streamer is not online.
So the site is idle for like 1 few hours.
Then the streamer went online.

So at that point if I open console, it will display a tons of error messages.
I did not get the chance to screenshot it.
And Chrome will consume a lot of CPU power.

Once I closed my site, CPU usage went back to normal.

16

That’s “normal” get similar on the main Twitch Website

17

hmmm I see, sorry if it seems that I dont trust you.
I am fairly new to this, just want to make sure that my project can reach a certain standard.

Also maybe I should deploy my site to a proper server then see how it goes. You think this is an good idea?

Also here is the screenshot of most of the errors I got.

06%20PM
06%20PM2560×1440 1010 KB

18

And your web page is not working as expected?

All I see are a number of normal errors that just occur, and for some reason your computer is unable to resolve connections to Twitch as the DNS resolver is buggered, which is not a problem this forum can help with

1 Like
19

the site works, just need a refresh sometimes.

20

thanks for the help!