Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Streaming and Caching videos

I'm developing an application in flutter which is showing videos in a list (like Instagram). Videos must be streamed so I can't download them first and then play them.

I want to cache them while they are being streamed. I've seen CacheManager class but it will download the whole file and then pass it to video player to play it.

How can I implement a cache manager to show the video file while it is being downloaded to cache folder?

like image 841
Saman Salehi Avatar asked Sep 20 '19 09:09

Saman Salehi


People also ask

How do you preload videos on flutter?

Flutter Preload Videos from API Preloading logic to reduce video initialization using isolate to fetch videos in the background so that the video experience is not disturbed. Without the use of isolate, the video will be paused whenever there is an API call because the main thread will be busy fetching new video URLs.

How do you autoplay videos on flutter?

To play videos, the Flutter team provides the video_player plugin. You can use the video_player plugin to play videos stored on the file system, as an asset, or from the internet. On iOS, the video_player plugin makes use of AVPlayer to handle playback. On Android, it uses ExoPlayer .

What is cache in flutter?

By default the files are stored in a cache folder, which is sometimes cleaned for example on Android with an app update. The cache manager uses 2 variables to determine when to delete a file, the maxNrOfCacheObjects and the stalePeriod . The cache knows when files have been used latest.

What is Cache Manager in flutter?

Cache manager is wrapper for storing various data type(JSON, String, int etc) as the local cache in your Flutter app.


2 Answers

I might be writing this a bit late but just in case anybody looking for a solution soon. By the moment the official video_player plugin doesn't support video caching over network yet.

But fortunately, there been some attempts by contributors to add caching feature to the video_player plugin You can track updates and find another PRs here: https://github.com/flutter/flutter/issues/28094

Replace video_player in your pubspec.yaml with

  video_player:
    git:
      url: https://github.com/sanekyy/plugins.git
      ref: caching
      path: packages/video_player/video_player   

In case of you are using chewie or other libraries that depend on video_player plugin add:

dependency_overrides:
  video_player:
    git:
      url: https://github.com/sanekyy/plugins.git
      ref: caching
      path: packages/video_player/video_player

And now to cache the video pass useCache : true to

_videoPlayerController = VideoPlayerController.network(videoURL, useCache: true);

By default both maxFileSize and maxCacheSize is set to 10 * 1024 * 1024 bytes. To adjust the cache size:

  VideoPlayerController.setCacheSize(100 * 1024 * 1024, 200 * 1024 * 1024);

Another Solution: Is to stream the video normally using the official plugin and to cache the video file using flutter_cache_manager simultaneously.

But this will lead to fetch the video twice the first time (Once for streaming through the video_player, Another for downloading the video through the cachemanager)

Here how the scenario would goes:

1- Check with flutter_cache_manager if the video_url is already downloaded and cached.

2- if the video is cached, pass the file path to video_player VideoPlayerController.file(path), if not download the file using cachemanager and stream the video using VideoPlayerController.network(videoURL) (at this moment video is being fetched twice... by videoplayer and cachemanager).

like image 124
Tarek Tolba Avatar answered Oct 19 '22 17:10

Tarek Tolba


Visit https://github.com/elgsylvain85/cachedflickvideoplayer.git

It is a video player for flutter. It combines both: The flick_video_player plugin for the base architecture, own set of UI and The cached_video_player plugin for cache supporting.

In your pubspec.yaml file :

cachedflickvideoplayer:
git:
  url: https://github.com/elgsylvain85/cachedflickvideoplayer.git

a demo of code :

import 'package:cached_video_player/cached_video_player.dart';
import 'package:cachedflickvideoplayer/cachedflickvideoplayer.dart';
import 'package:cachedflickvideoplayer/controls/flick_landscape_controls.dart';
import 'package:cachedflickvideoplayer/controls/flick_video_with_controls.dart';
import 'package:cachedflickvideoplayer/manager/flick_manager.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';


class ViewPage extends StatefulWidget {
 FlickManager flickManager;

  ViewPage() {
    flickManager = initVideo();
  }

  @override
  _ViewPageState createState() => _ViewPageState();

  FlickManager initVideo() {
    return FlickManager(
        cachedVideoPlayerController:
            CachedVideoPlayerController.network('https://media.istockphoto.com/videos/blurred-motion-of-people-in-restaurant-blur-background-video-id1190840021'),
        );
  }
}

class _ViewPageState extends State<ViewPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        
        body: ListView(
          children: <Widget>[
            Card(
              margin: const EdgeInsets.fromLTRB(20, 20, 20, 100),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        padding: const EdgeInsets.all(8),
                        height: 300,
                        child: FlickVideoPlayer(
                          flickManager: widget.flickManager,
                          flickVideoWithControlsFullscreen:
                              FlickVideoWithControls(
                            videoFit: BoxFit.contain,
                            controls: FlickLandscapeControls(),
                          ),
                        )),,
                  ]),
            ),
          ],
        ));
  }

  @override
  void dispose() {
    super.dispose();
    widget.flickManager.dispose();
  }
}
like image 45
elgsylvain85 Avatar answered Oct 19 '22 16:10

elgsylvain85