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


#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.

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…


#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

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


#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.


Non-Interactive Frames for Clips - Errors
#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.


#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.

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:


#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.


#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


#19

the site works, just need a refresh sometimes.


#20

thanks for the help!