Jerky video playing in my Flutter app for Windows

Question

In my Flutter project for Windows, I want to be able to read locally at least 4 videos simultaneously (up to 1920 x 1080, up to 60 fps).

The videos can be of different formats (mp4, wmv, ...), different sizes and different framerates.

Using dart_vlc, I created a test project with 4 video players:

void main()
{
  DartVLC.initialize();
  runApp(const DartVLCExample());
}

class DartVLCExample extends StatelessWidget
{
  const DartVLCExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('package:dart_vlc'),
          centerTitle: true,
        ),
        body: const PrimaryScreen(),
      ),
    );
  }
}

class PrimaryScreen extends StatelessWidget
{
  const PrimaryScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context)
  {
    return Row(
      children: const [
        Expanded(child: VideoPlayer(index: 1)),
        Expanded(child: VideoPlayer(index: 2)),
        Expanded(child: VideoPlayer(index: 3)),
        Expanded(child: VideoPlayer(index: 4)),
      ],
    );
  }
}


class VideoPlayer extends StatefulWidget
{
  final int index;

  const VideoPlayer({
    super.key,
    required this.index,
  });

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

class VideoPlayerState extends State<VideoPlayer>
{
  late Player player;
  MediaType mediaType = MediaType.file;
  CurrentState current = CurrentState();
  PositionState position = PositionState();
  PlaybackState playback = PlaybackState();
  GeneralState general = GeneralState();
  VideoDimensions videoDimensions = const VideoDimensions(0, 0);
  List<Media> medias = <Media>[];
  List<Device> devices = <Device>[];
  TextEditingController controller = TextEditingController();
  TextEditingController metasController = TextEditingController();
  double bufferingProgress = 0.0;
  Media? metadataCurrentMedia;

  @override
  void initState()
  {
    super.initState();
    if (mounted) {
      player = Player(
        id: widget.index,
        videoDimensions: const VideoDimensions(640, 360),
      );
      player.currentStream.listen((value) {
        setState(() => current = value);
      });
      player.positionStream.listen((value) {
        setState(() => position = value);
      });
      player.playbackStream.listen((value) {
        setState(() => playback = value);
      });
      player.generalStream.listen((value) {
        setState(() => general = value);
      });
      player.videoDimensionsStream.listen((value) {
        setState(() => videoDimensions = value);
      });
      player.bufferingProgressStream.listen(
            (value) {
          setState(() => bufferingProgress = value);
        },
      );
      player.errorStream.listen((event) {
        debugPrint('libVLC error.');
      });
      devices = Devices.all;
      Equalizer equalizer = Equalizer.createMode(EqualizerMode.live);
      equalizer.setPreAmp(10.0);
      equalizer.setBandAmp(31.25, 10.0);
      player.setEqualizer(equalizer);

      medias.add(
        Media.file(File("C:\\test${widget.index}.mp4"),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context)
  {
    return ListView(
      children: [
        ClipRRect(
          child: Video(
            player: player,
            width: 640,
            height: 650,
            volumeThumbColor: Colors.blue,
            volumeActiveColor: Colors.blue,
            showControls: true,
          ),
        ),
        ElevatedButton(
          onPressed: () => setState(() {
              player.open(Playlist(medias: medias));
            },
          ),
          child: const Text('PLAY', style: TextStyle(fontSize: 16)),
        ),
      ],
    );
  }

}

But unfortunately, if I play 4 videos (1920 x 1080, 60 fps) simultaneously, the videos are jerky.

I tried to read the same videos with the official VLC player, and it works fine, so it's apparently not a problem with my machine, but rather an optimization issue. And since I'm a beginner when it comes to video players, I don't really know where to start.

So how can I optimize that, using dart_vlc or something else?

Thanks.

Jerky video playing in my Flutter app for Windows

0 Answers0