Interactive Livestream (HLS) - Flutter

Interactive live streaming (HLS) refers to a type of live streaming where viewers can actively engage with the content being streamed and with other viewers in real-time.

In an interactive live stream (HLS), viewers can take part in a variety of activities like live polling, Q&A sessions, and even sending virtual gifts to the content creator or each other.

VideoSDK also allows you to configure the interactive livestream layouts in numerous ways like by simply setting different prebuilt layouts in the configuration or by providing your own custom template to do the livestream according to your layout choice.

This guide will provide an overview of how to implement start and stop Livestreaming.

startHLS()

startHLS() can be used to start a interactive livestream of the room which can be accessed from the Room object. This method accepts two parameters:

• 1. config (optional): An HLSConfig that defines how the livestream layout should look. Every field is optional.

• 2. transcription (optional): A PostTranscriptionConfig that lets you start post transcription for the livestream.

  const config = HLSConfig(
    // Layout Configuration
    layout: ConfigLayout(
      type: ConfigLayoutGrid.GRID, // SPOTLIGHT | SIDEBAR,  Default : GRID
      priority: ConfigLayoutPriority.SPEAKER, // PIN, Default : SPEAKER
      gridSize: 4, // MAX : 25
    ),
  
    // Theme of recording
    theme: ConfigTheme.DARK, //  LIGHT | DEFAULT
  
    // `mode` is used to either record video & audio both or only audio.
    mode: ConfigMode.VIDEO_AND_AUDIO, // audio, Default : video_and_audio
  
    // Quality of recording and is only applicable to `VIDEO_AND_AUDIO` type mode.
    quality: ConfigQuality.HIGH, // low (SD) | med (HD) | high (FHD), Default : med
  
    // This mode refers to orientation of recording.
    // landscape : Record the room in horizontally
    // portrait : Record the room in vertically (Best for mobile view)
    orientation: ConfigOrientation.LANDSCAPE, // portrait,  Default : landscape
  );
  
  // Post Transcription Configuration
  PostTranscriptionConfig postTranscriptionConfig = PostTranscriptionConfig(
    enabled: true, // Enables post transcription
    summary: SummaryConfig(
      enabled: true, // Enables summary generation
      // Guides summary generation
      prompt:
          "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
    ),
  );
  
  try {
    await room.startHLS(
      config: config,
      transcription: postTranscriptionConfig,
    );
  } on VideoSDKError catch (error) {
    debugPrint("startHLS failed: ${error.code} ${error.name}");
  }

startHLS() returns a Future that throws a VideoSDKError when the SDK refuses the call, so await it inside try/catch. On Android, a call made while the room reconnects reports 3065 on Events.error instead of throwing, so keep an Events.error handler too.

The Future completes before the livestream can be played, so wait for Events.hlsStateChanged to report HLS_PLAYABLE.

stopHLS()

• stopHLS() is used to stop the room livestream which can be accessed from the Room object. Like startHLS(), it returns a Future that can throw a VideoSDKError.

Example

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class RoomScreen extends StatefulWidget {
  ...
}

class _RoomScreenState extends State<RoomScreen> {
  late Room _room;

  @override
  void initState() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
        ElevatedButton(
          onPressed:() async {
            const config = HLSConfig(
              layout: ConfigLayout(
                type: ConfigLayoutGrid.GRID,
                priority: ConfigLayoutPriority.SPEAKER,
                gridSize: 4,
              ),
              theme: ConfigTheme.DARK,
              mode: ConfigMode.VIDEO_AND_AUDIO,
              quality: ConfigQuality.HIGH,
              orientation: ConfigOrientation.PORTRAIT,
            );

            PostTranscriptionConfig postTranscriptionConfig = PostTranscriptionConfig(
              enabled: true,
              summary: SummaryConfig(
                enabled: true,
                prompt:
                    "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
              ),
            );

            try {
              await _room.startHLS(
                config: config,
                transcription: postTranscriptionConfig,
              );
            } on VideoSDKError catch (error) {
              debugPrint("startHLS failed: ${error.code} ${error.name}");
            }
          },
          child: const Text("Start HLS"),
        ),
        ElevatedButton(
          onPressed:() async {
            try {
              await _room.stopHLS();
            } on VideoSDKError catch (error) {
              debugPrint("stopHLS failed: ${error.code} ${error.name}");
            }
          },
          child: const Text("Stop HLS"),
        ),
      ]
    );
  }
}

tip

If you want to learn more about the Interactive Livestream and how you can implement it in your own platform, you can checkout this guide.

Event associated with HLS

• hlsStateChanged - Whenever room HLS state changes, then hlsStateChanged event will trigger.

• You can get the playbackHlsUrl and livestreamUrl of the HLS to play it on the Viewer side when the state changes to HLS_PLAYABLE

  • playbackHlsUrl - Live HLS with playback support
  • livestreamUrl - Live HLS without playback support

• The handler receives the state as a String and an HLSUrl?. The latest URLs are also on room.hlsUrl.

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class RoomScreen extends StatefulWidget {
  ...
}

class _RoomScreenState extends State<RoomScreen> {
  late Room room;

  @override
  void initState() {
    ...

    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return YourRoomWidget();
  }

  void setupRoomEventListener() {
    room.on(Events.hlsStateChanged, (String state, HLSUrl? hlsUrl) {
      //State can be :: HLS_STARTING
      //State can be :: HLS_STARTED
      //State can be :: HLS_PLAYABLE
      //State can be :: HLS_STOPPING
      //State can be :: HLS_STOPPED
      log("Room HLS state : $state");
      if (state == "HLS_PLAYABLE") {
        log("Playback HLS URL : ${hlsUrl?.playbackHlsUrl}");
        log("Livestream URL : ${hlsUrl?.livestreamUrl}");
      }
    });
  }
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• startHLS
• stopHLS
• Events.hlsStateChanged