I’m working on an extension that embeds and plays a clip in an Overlay component. Due to the Extension policies, <iframe> is not an allowed tag (which would be the easiest option).
Embed Tag
Another option I have been using is the <embed> tag to render the the embedded clip. This has been working great while testing locally and has the added benefit that the it uses the Twitch video playback tools.
Once moving the files to “Hosted Test”, I am encountering a new error that is preventing the embedded clip from loading. I get an error such as the below:
Refused to load plugin data from 'https://clips.twitch.tv/embed?clip=IntelligentCoweringTurnipKappaRoss-HjocSONAC5UOBWVh&parent=supervisor.ext-twitch.tv&parent=www.supervisor.ext-twitch.tv&parent=twitch.tv&parent=www.twitch.tv&autoplay=true&muted=true'
because it violates the following Content Security Policy directive: "default-src 'self'
https://aiyioobmwvfvxojatv7bl5qsmbfxng.ext-twitch.tv". Note that 'object-src' was not explicitly set, so
'default-src' is used as a fallback. https://dev.twitch.tv/docs/extensions/#restrictions-on-content
I find it odd that I was not getting these errors while locally testing, though maybe that’s just a limitation of locally testing extensions. It looks like this is due to the Content Security Policy’s that are set on the extensions. Is there anyway to still make this work using the tag or is it a no go due to the CSP? It would be great if I was able to find a way to make this work.
Video Tag
Alternatively it seems that I can use a <video> tag component and this should work and passes the extension policies. Only downside to this is that it does not use the Twitch video playback tools and just uses the native browser playback. In addition, it’s a bit more hacky to get the src url to pass to this component since you need to use the url containing .mp4.
It seems this can be done by calling the GetClips endpoint and passing the clip id.
As part of the response there will be a "thumbnail_url": "https://clips-media-assets2.twitch.tv/39681497019-offset-4790-preview-480x272.jpg",.
With this thumbnailUrl, I should be able to transform it to https://clips-media-assets2.twitch.tv/39681497019-offset-4790.mp4. And this url will correctly play the clip. This method seems a bit more hacky tho and I’m not sure this is a good approach to use.
I’m curious if anyone has any ideas / suggestions on the above points. Ideally I’d like to make the <embed> tag work if possible. If thats not possible, does the <video> tag seem like the right approach to use?
if your extension was on localhost and not a real domain the CSP often won’t apply, coz it’s localhost which has different rules/issues on impementation of a CSP.
This is why “hosted test” exists as it’s the final test to test your extension works as expected on an envinroment that is “like live/released”
The CSP is blocking you using content from this domain, so no.
Given this is “hacky” and undocumented if/when it changes your extension will be broken.
I don’t know of any legal or sensible ways to get around this issue. When using Twitch Clips.
There are also a number of rules and guildelines around sound (staring muted). So in a odd place that you can’t really use clips here. And I would question why you would want clips on top of the video player, (Extensions overlay) since then you have two video/audio sources at the same time which might be taxing on the users system and/or confusing to operate. Especially when if the live stream buffers it could unload or interupt the extension from operating, potentially leaving an audio source uncontrollable.
Any “hacky” solutions where you are (essentially) misusing the API may prevent your extension getting thru review. Since all extensions have to be reviewed by Twitch before they go live for everyone to see them.
So if you’re monetizing your extension, you must only show clips from channels that have given consent, such as the channel that installed your extension.
Using a browsers <video> player instead of the Twitch Embed for clips would be violating both the requirement to use the embeddable player for all video content, as well as modification of the embeddable experience by stripping out all of the Twitch Player functionality to use the browsers video player.
Totally agree with this. I don’t like using “hacky” workarounds for this reason that they are so prone to breaking since they aren’t officially supported methods.
I am creating a sort of Instant Replay extension which makes use of clips to achieve this. Using either the <video> or <embed> tag, I use the appropriate flags to mute the clip by default so as to avoid this situation and to abide by the Extension rule that any videos must be muted by default.
Yup! The clips shown will only be from the channel in which they are created which the broadcaster would have given consent for by installing and using the extension.
There is one stipulation to this rule , “You may not use any other player or system to display Twitch video content without Twitch’s prior written permission”. Anyone know where the appropriate place to contact Twitch to see if they’d give permission to this? Is the forums the correct place, or maybe just through the actual Extension review process?
You would need to contact legal@twitch.tv but its very unlikely they will allow your use case as there have been others who have attempted the exact thing you’re wanting to do and we’re not allowed to do so.
Then you would be better off doing something more optimal on collecting the video data rather than relying on the clips system. (Streamer side record or intercept at video relay on with a RTMP Proxy)
But depends on your work flow on how you intend to content generate.
, “You may not use any other player or system to display Twitch video content without Twitch’s prior written permission”. Anyone know where the appropriate place to contact Twitch to see if they’d give permission to this? Is the forums the correct place, or maybe just through the actual Extension review process?