How to display Twitch streams in Flutter application

Other Questions Twitch
1

I’m building a Flutter web app that needs to show both Twitch streams and YouTube videos in one place. I got YouTube working fine using different methods, but I’m stuck on the Twitch part.

What I’ve tried so far:

  • Used video_player package but it needs direct video URLs
  • YouTube works great with youtube_player_flutter package
  • Looked into Twitch API but it’s confusing for me

Here’s my current approach using iframe for video display:

class StreamWidget extends StatefulWidget {
  final String streamUrl;
  StreamWidget(this.streamUrl);
  @override
  _StreamWidgetState createState() => _StreamWidgetState(streamUrl);
}

class _StreamWidgetState extends State<StreamWidget> {
  final String streamUrl;
  IFrameElement frameElement = IFrameElement();
  _StreamWidgetState(this.streamUrl);

  @override
  Widget build(BuildContext context) {
    frameElement.width = (MediaQuery.of(context).size.width*0.35).toString();
    frameElement.height = (MediaQuery.of(context).size.width*0.25).toString();
    frameElement.src = "https://www.youtube.com/embed/"+streamUrl;
    frameElement.allowFullscreen = true;
    
    ui.platformViewRegistry.registerViewFactory(
      'stream'+streamUrl,
      (int viewId) => frameElement,
    );
    
    return Container(
      height: MediaQuery.of(context).size.height * 0.25,
      width: MediaQuery.of(context).size.width * 0.35,
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: HtmlElementView(
        key: UniqueKey(),
        viewType: 'stream'+streamUrl
      ),
    );
  }
}

This iframe method works for embedding Twitch streams, but it shows the entire Twitch interface including chat and other elements. I only want the video player part. Is there a way to display just the stream without all the extra Twitch UI elements?

Any suggestions for a clean solution would be really helpful!

2

I faced a similar challenge when integrating Twitch streams into my Flutter web application. The key is using Twitch’s parent embed URL with specific parameters to hide the UI elements you don’t want. Instead of the regular Twitch URL, modify your iframe source to use Twitch’s embed API with the &parent parameter and channel name. Replace your current src with something like https://player.twitch.tv/?channel=CHANNEL_NAME&parent=YOUR_DOMAIN&muted=true. The parent parameter is mandatory for Twitch embeds to work properly. You can also add additional parameters like &controls=false to hide player controls or &autoplay=false to prevent auto-starting. This approach gives you much cleaner integration compared to embedding the full Twitch page. Make sure to register your domain in Twitch’s developer console if you’re planning to deploy this publicly, otherwise the embed might not load correctly in production.