Create A Video Recording on Flutter Web

Looking for a way to record and view a video on Flutter? Here’s a tutorial you can try.

Hey there 👋

If you’re a web developer, maybe you’re familiar with MediaRecorder, the interface of MediaStream Recording API.

And now, what we are going to do is implement the MediaRecorder into our Flutter web project. We will make a feature to start & stop recording, and view the result.

You’re probably wondering why we need MediaRecorder for Flutter web? By implementing the MediaRecorder natively, you don’t need any plugin, and has great compatibility with many browsers such as Chrome, Firefox, Safari, WebView Android, Safari iOS, etc. (Check the list here!)

Flutter web recording snippet

Ok, let’s start!

First, make an empty Flutter project!

Make a video preview while recording

To make a video preview, use VideoElement from dart:html.

Make an open camera function

Here, we gonna ask permission to open the camera & microphone from the browser.

With MediaDevices, we can get access to connected media input devices. To get permission from the user to turn on the camera & microphone, we can use getUserMedia method.

You can also customize the parameters constraints as needed.

Start Recording! 🎥

Now, we use MediaRecorder to do our recording. If you want to add some options i.e. set a mimeType and audio & video bits per second, you can append the optional parameter inside the MediaRecorder’s constructor.

Stop Recording

We can use stop method from MediaRecorder to stop the recording, but it only stops the recording activity, without turning off the camera & microphone. The handle of the media input control is on MediaStream. So, we still need to stop the stream’s tracks.

Display recording result

In the last step, we want to display the recording result. Here we use VideoElement again with control to play the video. While recording, we can get Blob data, which we need to save while recording. When it’s finished, we should set the URL into our result’s VideoElement.

It’s done!! 🎉🎉
You can find the complete code here.

Feel free to leave a comment below, and let’s get connected on LinkedIn!

Thank you for reading and see you! 🐈