In-app player solutions

Hey devs!

We (Strafe Esports) are currently integrating Twitch video/stream player using the embed web player. This kind of embed is not the optimal solution for apps but seems to work OK on iOS. But the main problem is that we are having compatibility problems on Android where some devices seem to be able to start the stream and others not.

You guys heard of this problem before?

We would love to use any native (or native-like) player using the source of the video/stream but it seems it is against Twitch’s terms and conditions to create your own player since ads and other parts are not in it.

Currently, we’re basically doing this:

We are getting the thumbnail and showing it in a view, and when clicking that view you get to another view which shows you the stream (on iOS, it’s showing in the iOS native player) or a webview showing the stream embed from player.twitch.tv?channel=CHANNEL. This method works on iOS but is very low on performance on Android and on some devices the player loads but the video simply won’t start and the player stays black.

What is the optimal solution for this? Is embed the only way?

Thanks.

You’re correct about it being again the ToS to create your own player. Embed is the only way to host Twitch content in your site or application. I’m surprised by the low performance on Android. Which devices are exhibiting the sluggish and no-play behavior?

Thanks for your fast reply.

Phones we know cannot play video:
Oppo Find 5 (Android 4.4.2)
Xiaomi Mi5 (Android 5.0 or 5.1)

Phones which has low performance is basically all of them. After you’ve opened the embed it takes up to 20 seconds for the video to start.

We have been reading this post:
Embedding Twitch player in Android app

  • and it seems all of the different URL’s has the same kind of sluggish playback and slow starts.

Is there anything in your embed player choosing a flash player instead of HTML5 or vice versa, for the device trying to watch the video? Having &html5 in the end of the URL does not make a difference.

Thanks.

We have a task to look into this next week. I’ll keep you posted on any updates! Thanks for the report. :slight_smile:

Any movement in this topic? The other post (Embedding Twitch player in Android app) is closed…

No update for this issue. I re-opened this one after it was automatically closed to keep track of it.

Any updates on this topic ? My embed player on android(webview) freezes after some time and the performance really sucks

What’s the status of this topic? I am working on an Android and iOS app that will require an embedded Twitch stream. It’s pretty frustrating to have come here only to see the topic having languished for so long when there are clearly lots of opportunities for this type of application. Any information or updates on it would be greatly appreciated. Thanks!

-Ryan

So, after 2 days of searching info and grokking twitch embedded mode on Android, I’ve found solution to play streams in app.

There is four steps:

Step 1. You need to put into your assets html-file:

<html>
    <body bgcolor="000000">
        <script src="js/embed/v1.js"></script>
        <div id="twitch-embed"></div>

        <script type="text/javascript">
            var meta = document.createElement('meta');
            meta.setAttribute('name', 'viewport');
            meta.setAttribute('content', 'width=device-width');
            document.getElementsByTagName('head')[0].appendChild(meta);

            var options = {
                width: mWidth,
                height: mHeight,
                channel: "mChannel"
            };

            var player = new Twitch.Player("twitch-embed", options);
            player.showPlayerControls(false);
            player.setVolume(1.0);
        </script>
    </body>
</html>

It’s simple html-file with container for Twitch Player. For another “options” you can go into Embedded section of Twitch API. Parameters mWidth, mHeight and mChannel are anchors, which we’ll replace soon.

Step 2. Prepare you data to input - we need your WebView widget width, height and channel name (for our options).
Simply6 you can get this like:

WebView webView = ...your webview...
webView.post(new Runnable() {
      public void run() {
             int width = webView.getWidth();
             int height = webView.getHeight();
      }
})

Step 3. You need to read your html from assets to String and put data by replacing anchors in String using String.replace() method for mWidth, mHeight and mChannel (for my example).

Step 4. Load your WebView with base url and html data like this:

mWebView.loadDataWithBaseURL("https://player.twitch.tv/", html, "text/html", "utf-8", null);

where html parameter - is your html file with proper parameters in options.

Finally your loading code will looks like:

WebView webView = ...your webview...
webView.post(new Runnable() {
      public void run() {
             int width = webView.getWidth();
             int height = webView.getHeight();
             mWebView.loadDataWithBaseURL("https://player.twitch.tv/", html, "text/html", "utf-8", null);
      }
})

If you’ll have questions - you can write me. I’ll try to help you.

Dmitry

Regardless how i try to load the embedded player, the result is always the same:

This is Android TV and WebView:

_webView.setInitialScale(100);

The video source stuck at 360p and the video constantly flickers, also zoomed in.