Flutter Live Streaming With Video SDK

import 'dart:convert';
import 'package:http/http.dart' as http;

//Auth token we will use to generate a meeting and connect to it
String token = "<< Authentication Token >>";

// API call to create meeting
Future<String> createMeeting() async {
 final http.Response httpResponse = await http.post(
 Uri.parse("https://api.videosdk.live/v2/rooms"),
 headers: {'Authorization': token},
 );

//Destructuring the roomId from the response
 return json.decode(httpResponse.body)['roomId'];
}

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

import 'api_call.dart';
import 'ils_screen.dart';

class JoinScreen extends StatelessWidget {

 final _meetingIdController = TextEditingController();

 JoinScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 backgroundColor: Colors.black,
 appBar: AppBar(
 title: const Text('VideoSDK ILS QuickStart'),
 ),
 body: Padding(
 padding: const EdgeInsets.all(12.0),
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 // Creating a new meeting
 ElevatedButton(
 onPressed: () => onCreateButtonPressed(context),
 child: const Text('Create Meeting'),
 ),
 const SizedBox(height: 40),
 TextField(
 style: const TextStyle(color: Colors.white),
 decoration: const InputDecoration(
 hintText: 'Enter Meeting Id',
 border: OutlineInputBorder(),
 hintStyle: TextStyle(color: Colors.white),
 ),
 controller: _meetingIdController,
 ),
 // Joining the meeting as host
 ElevatedButton(
 onPressed: () => onJoinButtonPressed(context, Mode.CONFERENCE),
 child: const Text('Join Meeting as Host'),
 ),
 // Joining the meeting as viewer
 ElevatedButton(
 onPressed: () => onJoinButtonPressed(context, Mode.VIEWER),
 child: const Text('Join Meeting as Viewer'),
 ),
 ],
 ),
 ),
 );
 }

 // Creates new Meeting Id and joins it in CONFERNCE mode.
 void onCreateButtonPressed(BuildContext context) async {
 // TODO: Implement 
 }

 // Join the provided meeting with given Mode and meetingId
 void onJoinButtonPressed(BuildContext context, Mode mode) {
 // TODO: Implement
 }
}

// Creates new Meeting Id and joins it in CONFERNCE mode.
 void onCreateButtonPressed(BuildContext context) async {
 // Call createMeeting method
 final meetingId = await createMeeting();

 if (!context.mounted) return;
 Navigator.of(context).push(
 MaterialPageRoute(
 builder: (context) => ILSScreen(
 meetingId: meetingId,
 token: token,
 mode: Mode.CONFERENCE,
 ),
 ),
 );
 });
  }

 // Join the provided meeting with given Mode and meetingId
  void onJoinButtonPressed(BuildContext context, Mode mode) {
    String meetingId = _meetingIdController.text;
    var re = RegExp("\\w{4}\\-\\w{4}\\-\\w{4}");

    // Check meeting ID is not null or invaild
    if (meetingId.isNotEmpty && re.hasMatch(meetingId)) {
      _meetingIdController.clear();
      // Navigate to ILSScreen
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => ILSScreen(
            meetingId: meetingId,
            token: token,
            mode: mode,
          ),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text("Please enter valid meeting id"),
      ));
    }
  }

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

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'VideoSDK QuickStart',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: JoinScreen(),
 );
 }
}

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

class ILSScreen extends StatefulWidget {
 final String meetingId;
 final String token;
 final Mode mode;

 const ILSScreen(
 {super.key,
 required this.meetingId,
 required this.token,
 required this.mode});

 @override
 State<ILSScreen> createState() => _ILSScreenState();
}

class _ILSScreenState extends State<ILSScreen> {
 late Room _room;
 bool isJoined = false;

 @override
 void initState() {
 // TODO: Implement
 super.initState();
 }

 // listening to room events
 void setMeetingEventListener() {
 // TODO: Implement
 }

 // onbackButton pressed leave the room
 Future<bool> _onWillPop() async {
 _room.leave();
 return true;
 }

 @override
 Widget build(BuildContext context) {
 return WillPopScope(
 onWillPop: () => _onWillPop(),
 child: Scaffold(
 backgroundColor: Colors.black,
 appBar: AppBar(
 title: const Text('VideoSDK ILS QuickStart'),
 ),
 //Showing the Speaker or Viewer View based on the mode
 body: isJoined
 ? widget.mode == Mode.CONFERENCE
 ? ILSSpeakerView(room: _room)
 : widget.mode == Mode.VIEWER
 ? ILSViewerView(room: _room)
 : null
 : const Center(
 child: Text("Joining...",
 style: TextStyle(color: Colors.white),
 ),
 ),
 ),
 );
 }
}

@override
void initState() {
 // create room when widget loads
 _room = VideoSDK.createRoom(
 roomId: widget.meetingId,
 token: widget.token,
 displayName: "John Doe",
 micEnabled: true,
 camEnabled: true,
 defaultCameraIndex: 1, // Index of MediaDevices will be used to set default camera
 mode: widget.mode,
 );

 // setting the event listener for join and leave events
 setMeetingEventListener();

 // Joining room
 _room.join();

 super.initState();
}

// listening to room events
void setMeetingEventListener() {

 // Setting the joining flag to true when meeting is joined
 _room.on(Events.roomJoined, () {
 if (widget.mode == Mode.CONFERENCE) {
 _room.localParticipant.pin();
 }
 setState(() {
 isJoined = true;
 });
 });

 //Handling navigation when meeting is left
 _room.on(Events.roomLeft, () {
 Navigator.popUntil(context, ModalRoute.withName('/'));
 });
}

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
class ParticipantTile extends StatefulWidget {
 final Participant participant;
 const ParticipantTile({super.key, required this.participant});

 @override
 State<ParticipantTile> createState() => _ParticipantTileState();
}

class _ParticipantTileState extends State<ParticipantTile> {
 Stream? videoStream;

 @override
 void initState() {
 // initialze video stream for the participant if they are present
 widget.participant.streams.forEach((key, Stream stream) {
 setState(() {
 if (stream.kind == 'video') {
 videoStream = stream;
 }
 });
 });
 _initStreamListeners();
 super.initState();
 }

 //Event listener for the video stream of the participant
 _initStreamListeners() {
 widget.participant.on(Events.streamEnabled, (Stream stream) {
 if (stream.kind == 'video') {
 setState(() => videoStream = stream);
 }
 });

 widget.participant.on(Events.streamDisabled, (Stream stream) {
 if (stream.kind == 'video') {
 setState(() => videoStream = null);
 }
 });
 }

 @override
 Widget build(BuildContext context) {
 return Padding(
 padding: const EdgeInsets.all(8.0),
 //Rending the Video Stream of the participant
 child: videoStream != null
 ? RTCVideoView(
 videoStream?.renderer as RTCVideoRenderer,
 objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
 )
 : Container(
 color: Colors.grey.shade800,
 child: const Center(
 child: Icon(
 Icons.person,
 size: 100,
 ),
 ),
 ),
 );
 }
}

import 'package:flutter/material.dart';

class MeetingControls extends StatelessWidget {
 final String hlsState;
 final void Function() onToggleMicButtonPressed;
 final void Function() onToggleCameraButtonPressed;
 final void Function() onHLSButtonPressed;

 const MeetingControls(
 {super.key,
 required this.hlsState,
 required this.onToggleMicButtonPressed,
 required this.onToggleCameraButtonPressed,
 required this.onHLSButtonPressed});

 @override
 Widget build(BuildContext context) {
 return Wrap(
 children: [
 ElevatedButton(
 onPressed: onToggleMicButtonPressed,
 child: const Text('Toggle Mic')),
 const SizedBox(width: 10),
 ElevatedButton(
 onPressed: onToggleCameraButtonPressed,
 child: const Text('Toggle WebCam')),
 const SizedBox(width: 10),
 ElevatedButton(
 onPressed: onHLSButtonPressed,
 child: Text(hlsState == "HLS_STOPPED"
 ? 'Start HLS'
 : hlsState == "HLS_STARTING"
 ? "Starting HLS"
 : hlsState == "HLS_STARTED" || hlsState == "HLS_PLAYABLE"
 ? "Stop HLS"
 : hlsState == "HLS_STOPPING"
 ? "Stopping HLS"
 : "Start HLS")),
 ],
 );
 }
}

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
import 'package:videosdk_flutter_quickstart/meeting_controls.dart';
import 'package:videosdk_flutter_quickstart/participant_tile.dart';

class ILSSpeakerView extends StatefulWidget {
 final Room room;
 const ILSSpeakerView({super.key, required this.room});

 @override
 State<ILSSpeakerView> createState() => _ILSSpeakerViewState();
}

class _ILSSpeakerViewState extends State<ILSSpeakerView> {
 var micEnabled = true;
 var camEnabled = true;
 String hlsState = "HLS_STOPPED";

 Map<String, Participant> participants = {};

 @override
 void initState() {
 super.initState();
 //Setting up the event listeners and initializing the participants and hls state
 setMeetingEventListener();
 participants.putIfAbsent(
 widget.room.localParticipant.id, () => widget.room.localParticipant);
 //filtering the CONFERENCE participants to be shown in the grid
 widget.room.participants.values.forEach((participant) {
 if (participant.mode == Mode.CONFERENCE) {
 participants.putIfAbsent(participant.id, () => participant);
 }
 });
 hlsState = widget.room.hlsState;
 }

 @override
 void setState(VoidCallback fn) {
 if (mounted) {
 super.setState(fn);
 }
 }

 @override
 Widget build(BuildContext context) {
 return Padding(
 padding: const EdgeInsets.all(8.0),
 child: Column(
 children: [
 Row(
 children: [
 Expanded(
 child: Text(
 widget.room.id,
 style: const TextStyle(color: Colors.white),
 )),
 ElevatedButton(
 onPressed: () => {
 Clipboard.setData(ClipboardData(text: widget.room.id)),
 ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
 content: Text("Meeting Id Coppied"),
 ))
 },
 child: const Text("Copy Meeting Id"),
 ),
 const SizedBox(width: 10),
 ElevatedButton(
 onPressed: () => {widget.room.leave()},
 style: ElevatedButton.styleFrom(
 backgroundColor: Colors.red,
 ),
 child: const Text("Leave"),
 )
 ],
 ),
 const SizedBox(
 height: 20,
 ),
 //Showing the current HLS state
 Text(
 "Current HLS State: ${hlsState == "HLS_STARTED" || hlsState == "HLS_PLAYABLE" ? "Livestream is Started" : hlsState == "HLS_STARTING" ? "Livestream is starting" : hlsState == "HLS_STOPPING" ? "Livestream is stopping" : "Livestream is stopped"}",
 style: const TextStyle(color: Colors.white),
 ),
 //render all participants in the room
 Expanded(
 child: GridView.builder(
 gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
 crossAxisCount: 1,
 ),
 itemBuilder: (context, index) {
 return ParticipantTile(
 participant: participants.values.elementAt(index));
 },
 itemCount: participants.length,
 ),
 ),
 //Rending the meeting Controls
 MeetingControls(
 hlsState: hlsState,
 onToggleMicButtonPressed: () {
 micEnabled ? widget.room.muteMic() : widget.room.unmuteMic();
 micEnabled = !micEnabled;
 },
 onToggleCameraButtonPressed: () {
 camEnabled ? widget.room.disableCam() : widget.room.enableCam();
 camEnabled = !camEnabled;
 },
 //HLS handler which will start and stop HLS
 onHLSButtonPressed: () => {
 if (hlsState == "HLS_STOPPED")
 {
 widget.room.startHls(config: {
 "layout": {
 "type": "SPOTLIGHT",
 "priority": "PIN",
 "GRID": 20,
 },
 "mode": "video-and-audio",
 "theme": "DARK",
 "quality": "high",
 "orientation": "portrait",
 })
 }
 else if (hlsState == "HLS_STARTED" || hlsState == "HLS_PLAYABLE")
 {widget.room.stopHls()}
 },
 ),
 ],
 ),
 );
 }

 // listening to room events for participants join, left and hls state changes
 void setMeetingEventListener() {
 widget.room.on(
 Events.participantJoined,
 (Participant participant) {
 //Adding only Conference participant to show in grid
 if (participant.mode == Mode.CONFERENCE) {
 setState(
 () => participants.putIfAbsent(participant.id, () => participant),
 );
 }
 },
 );

 widget.room.on(Events.participantLeft, (String participantId) {
 if (participants.containsKey(participantId)) {
 setState(
 () => participants.remove(participantId),
 );
 }
 });
 widget.room.on(
 Events.hlsStateChanged,
 (Map<String, dynamic> data) {
 setState(
 () => hlsState = data['status'],
 );
 },
 );
 }
}

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

class ILSViewerView extends StatefulWidget {
 final Room room;
 const ILSViewerView({super.key, required this.room});

 @override
 State<ILSViewerView> createState() => _ILSViewerViewState();
}

class _ILSViewerViewState extends State<ILSViewerView> {
 String hlsState = "HLS_STOPPED";
 String? downstreamUrl;

 @override
 void initState() {
 super.initState();
 //initialize the room's hls state and hls's downstreamUrl
 hlsState = widget.room.hlsState;
 downstreamUrl = widget.room.hlsDownstreamUrl;
 //add the hlsStateChanged event listener
 setMeetingEventListener();
 }

 @override
 Widget build(BuildContext context) {
 return SingleChildScrollView(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 Padding(
 padding: const EdgeInsets.all(8.0),
 child: Row(
 children: [
 Expanded(
 child: Text(widget.room.id,
 style: const TextStyle(color: Colors.white))),
 ElevatedButton(
 onPressed: () =>
 {Clipboard.setData(ClipboardData(text: widget.room.id))},
 child: const Text("Copy Meeting Id"),
 ),
 const SizedBox(width: 10),
 ElevatedButton(
 onPressed: () => {widget.room.leave()},
 style: ElevatedButton.styleFrom(
 backgroundColor: Colors.red,
 ),
 child: const Text("Leave"),
 )
 ],
 ),
 ),
 //Show the livestream player if the downstreamUrl is present
 downstreamUrl != null
 ? LivestreamPlayer(downstreamUrl: downstreamUrl!)
 : const Text("Host has not started the HLS",
 style: TextStyle(color: Colors.white)),
 ],
 ),
 );
 }

 void setMeetingEventListener() {
 // listening to hlsStateChanged events and updating the hlsState and downstremUrl
 widget.room.on(
 Events.hlsStateChanged,
 (Map<String, dynamic> data) {
 String status = data['status'];
 if (mounted) {
 setState(() {
 hlsState = status;
 if (status == "HLS_PLAYABLE" || status == "HLS_STOPPED") {
 downstreamUrl = data['downstreamUrl'];
 }
 });
 }
 },
 );
 }
}

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

class LivestreamPlayer extends StatefulWidget {
 final String downstreamUrl;
 const LivestreamPlayer({
 Key? key,
 required this.downstreamUrl,
 }) : super(key: key);

 @override
 LivestreamPlayerState createState() => LivestreamPlayerState();
}

class LivestreamPlayerState extends State<LivestreamPlayer>
 with AutomaticKeepAliveClientMixin {
 late VlcPlayerController _controller;

 @override
 bool get wantKeepAlive => true;

 @override
 void initState() {
 super.initState();
 //initializing the player
 _controller = VlcPlayerController.network(widget.downstreamUrl,
 options: VlcPlayerOptions());
 }

 @override
 void dispose() async {
 _controller.dispose();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 super.build(context);
 //rendering the VlcPlayer
 return VlcPlayer(
 controller: _controller,
 aspectRatio: 9 / 16,
 placeholder: const Center(child: CircularProgressIndicator()),
 );
 }
}