console errors when using component for twitch stream

[pedropcruz]

Hello there,

I' m trying to put my component with url and with some options on twitch, and have this error:

How i can solve this? Many thanks!

[hellojere]

Same with Vimeo direct URL's. Reverting back to 1.2.1 works.

[cookpete]

@pedropcruz @hellojere What URL/props are you using to cause this error? Examples code/repos/jsFiddles are very useful.

[hellojere]

@cookpete Happens with the react-player demo too when using the following for the source:

https://player.vimeo.com/external/134290208.sd.mp4?s=9000cee9e39cb10a907c297ec36bcde452dfb9e5&profile_id=112

[pedropcruz]

@cookpete in my case just showing doing this:

<ReactPlayer className="react-player"  url="https://www.twitch.tv/pedropcruz"
                        config={{
                            twitch:{
                                options:{
                                    'font-size':'small',
                                    channel: 'pedropcruz',
                                    chat: 'default',
                                    layout: 'video-and-chat',
                                    theme: 'dark',
                                    src: 'https://www.twitch.tv/pedropcruz/chat'
                                }
                            }
                        }}
/>

[cookpete]

@pedropcruz your config is working correctly for me? See jsFiddle.

After a closer look at your screenshot, it looks like it could be an adblock extension that is preventing sdkloader from loading, which may be preventing the Twitch SDK from being loaded.

@hellojere this looks like a separate issue where the Vimeo player is attempting to play your MP4 file, as the URL for the file contains vimeo.com.

[hellojere]

@cookpete Hmmn. Ok. It indeed should be playing an MP4 and not embedding a Vimeo player at all - it's a direct file URL provided by Vimeo Pro. I'll look into other solutions for this. Cheers.

[pedropcruz]

nop @cookpete already remove adblock and other type of that extension, and the error continues the same.

[cookpete]

already remove adblock and other type of that extension, and the error continues the same.

@pedropcruz What are the exact console errors you are seeing with adblock disabled?

[nkane]

I seem to be receiving a similar error without the chat rendering

this is my render call:

even with a src added, it still errors out at a window.appendChild function call.

[cookpete]

Just had a closer look – you guys are trying to use options for the Embed Everything player like chat, layout and theme. Currently ReactPlayer uses the Interactive Frame player, which uses fewer options.

I'll see if it makes sense to switch over to use Twitch.Embed() for everything rather than Twitch.Player() – perhaps using Twitch.Embed() only if certain options are set.

[cookpete]

Turns out that Twitch.Embed() doesn't quite work for us as it only has events for ready and play. I think the solution here is to only embed the video, and embed the chat window separately by following the Twitch docs.