[feature/web]: Add Support for Flutter Web (sample provided)

[Ahmadre]

I encountered,. that this package only works for ios and android.

I got pure 100% dart solution for flutter web:

  void getVideoThumbnail(String path, callback) {
    html.VideoElement video = html.document.createElement('video');
    video.src = path;

    video.onSeeked.listen((html.Event e) {
      html.CanvasElement canvas = html.document.createElement('canvas');
      canvas.height = video.videoHeight;
      canvas.width = video.videoWidth;
      html.CanvasRenderingContext2D ctx = canvas.getContext('2d');
      ctx.drawImage(video, canvas.width, canvas.height);
      html.ImageElement img = new html.ImageElement();
      img.src = canvas.toDataUrl();
      callback.call(img, e);
    });
    video.onError.listen((html.Event e) {
      callback.call(null, e);
    });
  }

Maybe you can combine that with your platform channels and create a platform interface :).

Code ported from: https://cwestblog.com/2017/05/03/javascript-snippet-get-video-frame-as-an-image/

[justsoft]

Thanks, will take a deep look once find some free time.

[Ahmadre]

I encountered that video_player package itself is supporting thumbnails on init:

You only need to:

VideoPlayerController controller =
            VideoPlayerController.network(snapshot.data()['mediaURL'])..initialize();
return VideoPlayer(controller);

[markgrancapal]

I encountered that video_player package itself is supporting thumbnails on init:

You only need to:

VideoPlayerController controller =
            VideoPlayerController.network(snapshot.data()['mediaURL'])..initialize();
return VideoPlayer(controller);

Hello @Ahmadre , I'm trying to find a way to create thumbnail on Flutter Web. can you explain how I can achieve it using this? I had two data that can hold my video, using image_picker_for_web that gives a network path or a byte data.

[markgrancapal]

I encountered,. that this package only works for ios and android.

I got pure 100% dart solution for flutter web:

  void getVideoThumbnail(String path, callback) {
    html.VideoElement video = html.document.createElement('video');
    video.src = path;

    video.onSeeked.listen((html.Event e) {
      html.CanvasElement canvas = html.document.createElement('canvas');
      canvas.height = video.videoHeight;
      canvas.width = video.videoWidth;
      html.CanvasRenderingContext2D ctx = canvas.getContext('2d');
      ctx.drawImage(video, canvas.width, canvas.height);
      html.ImageElement img = new html.ImageElement();
      img.src = canvas.toDataUrl();
      callback.call(img, e);
    });
    video.onError.listen((html.Event e) {
      callback.call(null, e);
    });
  }

Maybe you can combine that with your platform channels and create a platform interface :).

Code ported from: https://cwestblog.com/2017/05/03/javascript-snippet-get-video-frame-as-an-image/

I see that you are the one who develop image_picker_web, how can I use this code using your package? can I use html.File for the path? Thank you for the help @Ahmadre

[allcui]

Hi, any updates on this one? Are we planning to add Flutter web support to this package?

[abdullah432]

I encountered,. that this package only works for ios and android.
I got pure 100% dart solution for flutter web:

  void getVideoThumbnail(String path, callback) {
    html.VideoElement video = html.document.createElement('video');
    video.src = path;

    video.onSeeked.listen((html.Event e) {
      html.CanvasElement canvas = html.document.createElement('canvas');
      canvas.height = video.videoHeight;
      canvas.width = video.videoWidth;
      html.CanvasRenderingContext2D ctx = canvas.getContext('2d');
      ctx.drawImage(video, canvas.width, canvas.height);
      html.ImageElement img = new html.ImageElement();
      img.src = canvas.toDataUrl();
      callback.call(img, e);
    });
    video.onError.listen((html.Event e) {
      callback.call(null, e);
    });
  }

Maybe you can combine that with your platform channels and create a platform interface :).
Code ported from: https://cwestblog.com/2017/05/03/javascript-snippet-get-video-frame-as-an-image/

I see that you are the one who develop image_picker_web, how can I use this code using your package? can I use html.File for the path? Thank you for the help @Ahmadre

Not working with latest html version

[bismarabia]

Any updates on this?

[Alvarocda]

Any updates on this?

[jcblancomartinez]

Any update?

Thanks.

[nathansdev]

did any one figure out this?

[jcblancomartinez]

Hi,

Here you have a newer working version with CORS enabled:

Future<void> _getVideoThumbnail(
      String path, void Function(Uint8List? imageBytes) callback) async {
    VideoElement video = VideoElement()
      ..crossOrigin = 'anonymous'
      ..src = path
      ..muted = true;
    CanvasElement canvas = CanvasElement();
    video.onLoadedMetadata.listen((Event event) async {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      video.currentTime = 0;
    });
    video.onSeeked.listen((Event event) async {
      CanvasRenderingContext2D ctx = canvas.context2D;
      ctx.drawImage(video, 0, 0);
      Blob blob = await canvas.toBlob('image/png', 0.95);
      XFile xFile = XFile(Url.createObjectUrlFromBlob(blob),
          mimeType: 'image/png',
          lastModified: DateTime.now(),
          length: blob.size);
      debugPrint('Obtained xFile=[${xFile.path}] for path=[$path].');
      callback.call(await xFile.readAsBytes());
    });
    video.onError.listen((Event event) async {
      debugPrint('Error processing path=[$path] with event=[$event].');
      callback.call(null);
    });
  }

Regards.

[maRci002]

Check out #135 PR.

Clone the repo (unfortunately dependency_overrides doesn't work since the PR contains local path)

git clone -b feat-web_implementation https://github.com/maRci002/video_thumbnail.git

Add it to your pubspec.yaml

dependencies:
  video_thumbnail:
    path: ../video_thumbnail/video_thumbnail

I have already tested it with video_editor package:

video_editor.mp4

[mehmetemregokberk]

Can you give us a sample project for web?

I'm getting error when i run git clone code:

[video_thumbnail/video_thumbnail_web] flutter pub get
Resolving dependencies...
Git error. Command: git clone --mirror git@github.com:maRci002/video_thumbnail.git /Users/emre/.pub-cache/git/cache/video_thumbnail-eeb03d34cb54759a210a222943f9e014ba59971c
stdout:
stderr: Cloning into bare repository '/Users/emre/.pub-cache/git/cache/video_thumbnail-eeb03d34cb54759a210a222943f9e014ba59971c'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
exit code: 128
exit code 69