In-app player solutions

API
11

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