revamped example with controls & improved layout

example/lib/main.dart

@@ -31,7 +31,7 @@ class PreConnect extends StatefulWidget {
   @override
   State<StatefulWidget> createState() {
     return _PreConnectState(
-      'ws://172.20.10.11:7880',
+      'ws://localhost:7880',
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE5ODQzNDMyMzUsImlzcyI6IkFQSU1teGlMOHJxdUt6dFpFb1pKVjlGYiIsImp0aSI6InNlY29uZCIsIm5iZiI6MTYyNDM0MzIzNSwidmlkZW8iOnsicm9vbSI6Im15cm9vbSIsInJvb21Kb2luIjp0cnVlfX0.USJmnqcLabtsX5A0ZIjguG7jnbVkbZxi5RyPxLOXgOg',
     );
   }

example/lib/room.dart

@@ -1,16 +1,86 @@
 import 'package:flutter/material.dart';
 import 'package:livekit_client/livekit_client.dart';
+import 'package:livekit_example/src/controls.dart';
 import 'package:provider/provider.dart';
 
-class RoomWidget extends StatelessWidget with RoomDelegate {
+class RoomWidget extends StatefulWidget {
-  final Room _room;
+  final Room room;
-  BuildContext? _lastContext;
 
-  RoomWidget(this._room) {
+  RoomWidget(this.room);
-    // Room widget is created after connected to the room
+
-    // publish tracks to the room here.
+  @override
+  State<StatefulWidget> createState() {
+    return _RoomState();
+  }
+}
+
+class _RoomState extends State<RoomWidget> with RoomDelegate {
+  BuildContext? _lastContext;
+  List<Participant> participants = [];
+
+  @override
+  void initState() {
+    super.initState();
+    widget.room.delegate = this;
+    widget.room.addListener(_onChange);
     _onConnected();
-    _room.delegate = this;
+  }
+
+  @override
+  void dispose() {
+    widget.room.delegate = null;
+    super.dispose();
+  }
+
+  void _onChange() {
+    sortParticipants();
+  }
+
+  void sortParticipants() {
+    List<Participant> participants = [];
+    participants.addAll(widget.room.participants.values);
+    // sort speakers for the grid
+    participants.sort((a, b) {
+      // loudest speaker first
+      if (a.isSpeaking && b.isSpeaking) {
+        if (a.audioLevel > b.audioLevel) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
+
+      // last spoken at
+      var aSpokeAt = a.lastSpokeAt?.millisecondsSinceEpoch;
+      var bSpokeAt = b.lastSpokeAt?.millisecondsSinceEpoch;
+      if (aSpokeAt == null) {
+        aSpokeAt = 0;
+      }
+      if (bSpokeAt == null) {
+        bSpokeAt = 0;
+      }
+      if (aSpokeAt != bSpokeAt) {
+        return aSpokeAt > bSpokeAt ? -1 : 1;
+      }
+
+      // video on
+      if (a.hasVideo != b.hasVideo) {
+        return a.hasVideo ? -1 : 1;
+      }
+
+      // joinedAt
+      return a.joinedAt.millisecondsSinceEpoch -
+          b.joinedAt.millisecondsSinceEpoch;
+    });
+
+    if (participants.length > 1) {
+      participants.insert(1, widget.room.localParticipant);
+    } else {
+      participants.add(widget.room.localParticipant);
+    }
+    setState(() {
+      this.participants = participants;
+    });
   }
 
   @override
@@ -23,85 +93,74 @@ class RoomWidget extends StatelessWidget with RoomDelegate {
   }
 
   _onConnected() async {
-    var localVideo = await LocalVideoTrack.createCameraTrack();
+    // video will fail when running in ios simulator
-    await _room.localParticipant.publishVideoTrack(localVideo);
+    try {
+      var localVideo = await LocalVideoTrack.createCameraTrack();
+      await widget.room.localParticipant.publishVideoTrack(localVideo);
+    } catch (e) {
+      print('could not publish video: $e');
+    }
+
     var localAudio = await LocalAudioTrack.createTrack();
-    await _room.localParticipant.publishAudioTrack(localAudio);
+    await widget.room.localParticipant.publishAudioTrack(localAudio);
+    sortParticipants();
   }
 
   @override
   Widget build(BuildContext context) {
     _lastContext = context;
-    // with a provider, any child/descendent widget can be updated if they
-    // are a Consumer of Room.
-    return ChangeNotifierProvider.value(
-        value: _room,
-        child: Column(
-          children: [
-            Expanded(child: Consumer<Room>(builder: (context, room, child) {
-              // ensures the video grid gets updated each time participants change
-              return VideoGrid(room);
-            }))
-          ],
-        ));
-  }
-}
 
-class VideoGrid extends StatelessWidget {
+    var mainWidgets = <Widget>[];
-  final Room room;
+    var participants = this.participants;
-  final PageController controller = PageController(initialPage: 0);
+    if (participants.isNotEmpty) {
+      mainWidgets.add(Expanded(child: VideoView(participants.first)));
+    } else {
+      mainWidgets.add(Expanded(child: Container()));
+    }
 
-  VideoGrid(this.room);
+    if (participants.length > 1) {
-
+      var videoList = ListView.builder(
-  List<Participant> get sortedParticipants {
+        scrollDirection: Axis.horizontal,
-    List<Participant> participants = [];
+        itemCount: participants.length - 1,
-    participants.add(room.localParticipant);
+        itemBuilder: (BuildContext context, int index) {
-    participants.addAll(room.participants.values);
+          return Container(
-    // TODO: sort speakers for the grid
+            width: 100,
-    // participants.sort((a, b) {
+            height: 60,
-    //   // loudest speaker first
+            padding: const EdgeInsets.all(2),
-    //   if (a.isSpeaking && b.isSpeaking) {
+            child:
-    //     if (a.audioLevel > b.audioLevel) {
+                VideoView(participants[index + 1], quality: VideoQuality.LOW),
-    //       return -1;
+          );
-    //     } else {x
+        },
-    //       return 1;
+      );
-    //     }
+      mainWidgets.add(Container(
-    //   }
+        height: 60,
-    //   // speaker
+        child: videoList,
-    // });
-    return participants;
-  }
-
-  @override
-  Widget build(Object context) {
-    List<Widget> pages = [];
-    var participants = sortedParticipants;
-    var numPages = (participants.length / 4.0).ceil();
-    for (var i = 0; i < numPages; i++) {
-      List<Widget> children = [];
-      for (var j = 4 * i; j < participants.length; j++) {
-        var participant = participants[j];
-        children.add(VideoView(participant));
-      }
-      pages.add(GridView.count(
-        crossAxisCount: 2,
-        primary: false,
-        children: children,
       ));
     }
 
-    return PageView(
+    mainWidgets.add(Controls(widget.room));
-      scrollDirection: Axis.horizontal,
+    return MaterialApp(
-      controller: controller,
+        title: 'LiveKit Video Room',
-      children: pages,
+        theme: ThemeData(
-    );
+          primarySwatch: Colors.deepPurple,
+        ),
+        home: Scaffold(
+            // with a provider, any child/descendent widget can be updated if they
+            // are a Consumer of Room.
+            body: ChangeNotifierProvider.value(
+                value: widget.room,
+                child: Column(
+                  children: mainWidgets,
+                ))));
   }
 }
 
 class VideoView extends StatefulWidget {
   final Participant participant;
+  final VideoQuality quality;
 
-  VideoView(this.participant);
+  VideoView(this.participant, {VideoQuality quality = VideoQuality.MEDIUM})
+      : this.quality = quality;
 
   @override
   State<StatefulWidget> createState() {
@@ -110,15 +169,13 @@ class VideoView extends StatefulWidget {
 }
 
 class _VideoViewState extends State<VideoView> with ParticipantDelegate {
+  TrackPublication? videoPub;
+
   @override
   void initState() {
     super.initState();
     widget.participant.addListener(this._onParticipantChanged);
-  }
+    _onParticipantChanged();
-
-  // register for change so Flutter will re-build the widget upon change
-  void _onParticipantChanged() {
-    setState(() {});
   }
 
   @override
@@ -127,22 +184,36 @@ class _VideoViewState extends State<VideoView> with ParticipantDelegate {
     super.dispose();
   }
 
-  @override
+  // register for change so Flutter will re-build the widget upon change
-  Widget build(BuildContext context) {
+  void _onParticipantChanged() {
-    var stackChildren = <Widget>[];
     var subscribedVideos = widget.participant.videoTracks.values.where((pub) {
       return pub.kind == TrackType.VIDEO &&
           !pub.isScreenShare &&
           pub.subscribed;
     });
 
-    if (subscribedVideos.length > 0) {
+    setState(() {
-      var videoPub = subscribedVideos.first;
+      if (subscribedVideos.length > 0) {
-      stackChildren.add(VideoTrackRenderer(videoPub.track as VideoTrack));
+        var videoPub = subscribedVideos.first;
-    }
+        if (videoPub is RemoteTrackPublication) {
+          videoPub.videoQuality = widget.quality;
+        }
+        this.videoPub = videoPub;
+      } else {
+        this.videoPub = null;
+      }
+    });
+  }
 
-    return Stack(
+  @override
-      children: stackChildren,
+  Widget build(BuildContext context) {
-    );
+    var videoPub = this.videoPub;
+    if (videoPub != null) {
+      return VideoTrackRenderer(videoPub.track as VideoTrack);
+    } else {
+      return Container(
+        color: Colors.grey,
+      );
+    }
   }
 }

example/lib/src/controls.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+import 'package:livekit_client/livekit_client.dart';
+
+class Controls extends StatefulWidget {
+  final Room room;
+  final LocalParticipant participant;
+
+  Controls(this.room) : participant = room.localParticipant;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _ControlsState();
+  }
+}
+
+class _ControlsState extends State<Controls> {
+  @override
+  void initState() {
+    super.initState();
+    widget.participant.addListener(_onChange);
+  }
+
+  @override
+  void dispose() {
+    widget.participant.removeListener(_onChange);
+    super.dispose();
+  }
+
+  LocalParticipant get participant => widget.participant;
+
+  _onChange() {
+    // trigger refresh
+    setState(() {});
+  }
+
+  _muteAudio() {
+    if (participant.hasAudio) {
+      var audioPub = participant.audioTracks.values.first;
+      audioPub.muted = true;
+    }
+  }
+
+  _unmuteAudio() async {
+    if (participant.hasAudio) {
+      var audioPub = participant.audioTracks.values.first;
+      audioPub.muted = false;
+    } else {
+      // publish audio track
+      var audioTrack = await LocalAudioTrack.createTrack();
+      await participant.publishAudioTrack(audioTrack);
+    }
+  }
+
+  _muteVideo() {
+    if (participant.hasVideo) {
+      var videoPub = participant.videoTracks.values.first;
+      videoPub.muted = true;
+    }
+  }
+
+  _unmuteVideo() async {
+    if (participant.hasVideo) {
+      var videoPub = participant.videoTracks.values.first;
+      videoPub.muted = false;
+    } else {
+      // publish audio track
+      var videoTrack = await LocalVideoTrack.createCameraTrack();
+      await participant.publishVideoTrack(videoTrack);
+    }
+  }
+
+  _exit() {
+    widget.room.disconnect();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var buttons = <Widget>[];
+
+    // mute audio
+    if (participant.hasAudio && !participant.isMuted) {
+      buttons.add(
+        IconButton(
+          onPressed: _muteAudio,
+          icon: const Icon(Icons.mic_rounded),
+        ),
+      );
+    } else {
+      buttons.add(
+        IconButton(
+          onPressed: _unmuteAudio,
+          icon: const Icon(Icons.mic_off_rounded),
+        ),
+      );
+    }
+
+    // mute video
+    TrackPublication? videoPub;
+    if (participant.hasVideo) {
+      videoPub = participant.videoTracks.values.first;
+    }
+
+    if (videoPub != null && videoPub.muted) {
+      buttons.add(IconButton(
+        onPressed: _muteVideo,
+        icon: const Icon(Icons.videocam_rounded),
+      ));
+    } else {
+      buttons.add(IconButton(
+        onPressed: _unmuteVideo,
+        icon: const Icon(Icons.videocam_off_rounded),
+      ));
+    }
+
+    buttons.add(IconButton(
+      onPressed: _exit,
+      icon: const Icon(Icons.close_rounded),
+    ));
+
+    return Row(children: buttons);
+  }
+}