How to send a video to Flutter client from Django backend

Question

I am a beginner in mobile development and I am creating a mobile app using Flutter on the client side and Django as backend. I am basically sending some images from the client to the server and processing them on the server side. I now want to send a video back to the client and play it in the Flutter app.

I am currently trying to do this using an HTTP FileResponse in Django, and in Flutter I am writing the received response data as bytes in a file and displaying it with a VideoPlayer object. I think I may not be using the right encoder/decoder for this as the video won't playback (even when I try accessing the file directly from my phone).

Also I am not sure this is the right approach to get my video playing in the client app, since I don't necessarily want to download the video on the client side (and store it as a file) but just display it on the screen, but I don't know in what other way I could achieve what I'm looking for. I have looked up how to stream a video but I haven't found any useful answers for my use case.

I haven't really found any answers out there that are using both Flutter and Django to send a video, and I can't seem to find a way to make this work, what I am doing wrong? Am I even using the right approach?

Here is my code for the Flutter client:

var res = await dio.post('my-server-url', data: formData);
    if (res.statusCode == 200) {
      String path = (await getExternalStorageDirectory()).path;
      File videoFile = File('$path/video.mp4');

      await videoFile.writeAsBytes(utf8.encode(res.data));

      setState(() {
        _controller = VideoPlayerController.file(videoFile);
        _initializeVideoPlayerFuture = _controller.initialize();
      });
    }

(formData is a FormData object containing images (that are correctly received on the server side))

Below is my code for the Django server:

response = FileResponse(open('path-to-my-mp4-video', 'rb'))
return response

The errors I get in the debug console start with the following (but there's a lot more after that):

I/flutter ( 6821): server: WSGIServer/0.2 CPython/3.6.13
W/xample.deepfak( 6821): Accessing hidden method Lsun/misc/Unsafe;->compareAndSwapObject(Ljava/lang/Object;JLjava/lang/Object;Ljava/lang/Object;)Z (greylist, linking, allowed)
I/ExoPlayerImpl( 6821): Init daf69ba [ExoPlayerLib/2.12.1] [a20e, SM-A202F, samsung, 29]
E/ExoPlayerImplInternal( 6821): Playback error
E/ExoPlayerImplInternal( 6821):   com.google.android.exoplayer2.ExoPlaybackException: Source error
E/ExoPlayerImplInternal( 6821):       at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:554)
E/ExoPlayerImplInternal( 6821):       at android.os.Handler.dispatchMessage(Handler.java:103)
E/ExoPlayerImplInternal( 6821):       at android.os.Looper.loop(Looper.java:237)
E/ExoPlayerImplInternal( 6821):       at android.os.HandlerThread.run(HandlerThread.java:67)
E/ExoPlayerImplInternal( 6821):   Caused by: com.google.android.exoplayer2.upstream.FileDataSource$FileDataSourceException: java.io.EOFException

Solution

I finally solved my problem: sending the entire video file in an http response was not the right way to do it. I stored my video in a "media" folder in the django project, so that it is available at the url 'my-server-url/media/my-video.mp4', and sent this link to the client in my http response. In Flutter, I could then play the video from the network (using VideoPlayerController.network()) with this url.

Comments

[sepvae]

Thank you very much for your answer. If I understand, you are suggesting that I upload my video to AWS, but I have to pay for this, right? Isn't there a way to solve my problem that is free?