How can I embed Twitch clip on my android app?

[Yoonho_Aaron_Kim]

I am developing an android app with twitch api.

I want to show some clip video.

I read the guide document: Video & Clips | Twitch Developers

val html = "<iframe src=\"${clipUrl}&parent=localhost\" height=\"360\" width=\"640\" allowfullscreen/>"

val context = LocalContext.current
AndroidView(
    factory = {
        WebView(context).apply {
            webViewClient = WebViewClient()
            webChromeClient = WebChromeClient()
            settings.loadsImagesAutomatically = true
            settings.javaScriptEnabled = true
            settings.allowFileAccess = true
            settings.javaScriptCanOpenWindowsAutomatically = true
            settings.pluginState = WebSettings.PluginState.ON
            settings.mediaPlaybackRequiresUserGesture = false
            settings.domStorageEnabled = true
            settings.setAppCacheMaxSize(1024 * 8)
            settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
            settings.cacheMode = WebSettings.LOAD_NO_CACHE
            settings.setAppCacheEnabled(true)
            requestFocus(View.FOCUS_DOWN)

            loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
        }
    }
)

When I run it, it shows “Unavailable page” with error: ERR_BLOCKED_BY_RESPONSE.

log:

[INFO:CONSOLE(0)] "Refused to frame 'https://clips.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost:* https://localhost:*".
                                                                                                    ", source:  (0)

How can I do this?

And, what is the parent?

Because I am Android app developer, I don’t know well about other domain, So I couldn’t understand the parent param.

[Reyden-X]

If I’m not confusing anything, then the value of the “parent” field - you must specify the entire chain of domains that are involved in embedding the clip (video or stream). That is, you cannot specify the localhost. You need real URLs. If at least one domain is not specified, then the clip will not be displayed correctly.

[BarryCarlyon]

@Reyden-X

That is, you cannot specify the localhost.

localhost is a valid parent for embeds

The problem here is that on android it’s not a webpage on localhost it’s likely something else.

Further reading Twitch Embedded Player Updates in 2020

And Jon’s Solution How will Twitch Embed updates affect mobile app embeds? - #43 by jbulava

[Yoonho_Aaron_Kim]

Thank you, I solved this issue.
I wrote a valid url and it works.

val html = "<iframe src=\"${clipUrl}&parent=${validUrl}\" height=\"360\" width=\"640\" allowfullscreen/>"

val context = LocalContext.current
AndroidView(
    factory = {
        WebView(context).apply {
            webViewClient = WebViewClient()
            webChromeClient = WebChromeClient()
            settings.javaScriptEnabled = true

            loadDataWithBaseURL(validUrl, html, "text/html", "UTF-8", null)
        }
    }
)

1. I set the valid url in the iframe src
2. When use webView Api, I set the same valid url: loadDataWithBaseURL(validUrl, html, "text/html", "UTF-8", null)

And It works fine!
Thank you guys!