How to send a video to Flutter client from Django backend

user_15739631 0
Viewed 372

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
flutter video-streaming android django http
3 Answers

If I understand your problem correctly, you can try in this way. Please upload the video file onto amazon s3 server on your server when it is uploaded from the client. And then store the link of video file in amazon server into your database and return it to your client. Your client (app) can play the video with that link.

user_59630180

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.

user_157396310

You could store the file in cloudinary, which has upto 10GB of free storage, then set the link to the file in your django model

OR you could use cloudinaryField directly in your django models as explained here

user_144320160
Related