How will Twitch Embed updates affect mobile app embeds?

API
23

Details to follow

25

Good timing - thanks, I’ll keep up-to-date with that post

26

Some details about embedding Twitch into browser extensions.

In Chromium-based browsers, we must specify parent parameter with localhost or any valid domain. The browser ignores frame-ancestors directive - this is exactly what we need.

In Firefox, we must intercept HTTP response and remove the entire Content-Security-Policy header (removing the directive is not enough).

27

Same problem for Samsung Smart TV OS (Tizen). It uses “file://” origin just like electron and therefore embed stopped working. Please have this in mind when working on a fix.

28

Hi there, I’m working on a JavaScript file, which acts as a local browser source for OBS (so it’s basically file://, too). Therefor, I have no parent to set. Setting it to “null” or “localhost” does not work.

Would be great, if this can be fixed as soon as possible.

29

Best to throw such a thing on a real domain. Even if that real domain is localhost.

file:// is not support at time of writing.

30

I just found this post (Twitch Embedded Player Updates in 2020). The last post of the staff member gives hope for file://.

31

That is why I said

As it may change as per that post. I just didn’t link it in my reply. I assumed you posted here because that post is locked to replies

32

Hi, is there any update on this ?

33

Hi, is there any workaround for mobile platforms? Since the last change to force us to use the parent parameter, I’m not able to show Twitch videos with an embed player in my Android and iOS app.

I tried in many ways to fix this but nothing worked…

34

@jbulava is anyone from Twitch going to respond to this mobile thread with some answers?

35

Thanks for the bump on this thread, I will follow up with the proper teams to further discuss mobile apps and respond.

2 Likes
36

Thanks @jbulava for the feedback. Hope the team can fix it soon for mobile apps. Have a nice day! :sunny:

1 Like
37

Hey! It’s been quite some time. Is there any solution on how to embed it in mobile apps and UIWebViews/WKWebViews? My app has unfortunately been broken since this change and getting a lot of user complaints. Thank you!

3 Likes
38

@jbulava any update on this? It’s been 10 days. Thanks!

3 Likes
39

Any update on this issue?

1 Like
40

740×788 121 KB

2 Likes
41

Appreciate the memes! Sorry for the delayed response to this thread.

What I’ve realized after reviewing this in more detail is that folks have been using the player.twitch.tv URL as the value passed to WebViews. This is understandable, it’s basically doing the same thing as the iframe code we provide in the documentation for the web. This use of the URL was not intended or suggested in the documentation, but on the other hand, nor was it discouraged.

That said, the parent parameter will continue to be required for player.twitch.tv URLs and there is no value that will allow mobile applications to use these URLs as the value for a WebView directly.

Since we currently do not have a native solution (e.g. embed SDK), we suggest the following means to embed Twitch into your mobile applications. Create a static or dynamic webpage that embeds the Twitch content you would like to include on mobile and add the parent parameter with that domain. Then use the URL of that webpage with any relevant query parameters if dynamically generated for your WebView (e.g. video ID).

While not the most elegant solution as it requires traffic to your own domain, it will add embedded content to your application in the short-term. Should there be any long-term updates to Twitch embed products to remove this need, we’ll follow up on this thread and/or make sure to post in the announcements section.

3 Likes
42

That solution doesn’t work. The embedded video will work in the computer browser, but when you embed the webpage with the iframe video inside of it in your mobile app, it doesn’t work anymore.

When the twitch iframe loads, it expects the parent of the UIWebView, not the parent of the website that’s hosting the webpage so we’re back to square one.

43

I was able to make this solution work for iOS and Android. In case it is helpful, let me share how I set up the tests.

The first thing I did was create an index.html file with the following code and uploaded it to my website. I’ll change the domain for the example to be mywebsite.com and the embed is therefore viewable at https://mywebsite.com/embed.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <iframe src="https://player.twitch.tv/?channel=insomniac&parent=mywebsite.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
</body>
</html>

To show this Twitch embed in iOS, I have a ContentView.swift file with the main struct defines like this:

struct ContentView: View {
    var body: some View {
        Webview(url: URL(string: "https://mywebsite.com/embed")!)
    }
}

Then I have the scene function in the scene delegate defined as seen below. That displays the Twitch embed as expected when opening the iOS phone simulator.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

    let contentView = ContentView()

    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)
        self.window = window
        window.makeKeyAndVisible()
    }
}

For Android, I tried the example using Kotlin and API level 28. In my MainActivity.kt onCreate function, I set up a WebView like this, though removed a lot of settings for the sake of this post:

mWebView = findViewById<View>(R.id.webview) as WebView
mWebView.loadUrl("https://mywebsite.com/embed")

This displayed the Twitch embed in the WebView as expected on my virtual Pixel 3a that I set up for running the application.

2 Likes