Finally, we have a button that when clicked will convert our video to a gif ( line 52). We have a video ( lines 39–42) and image ( lines 53–56) view which are shown if our video and gif states are not empty. We have input for video, start time, and length all of which have an onChange handler to update their respective state fields ( lines 43–51). Render: This is our UI section, if we are not ready we show “Loading…” else we will show the input fields.Finally we get the result from ffmpeg’s filesystem and convert the bytes into a blob url of type gif which we can show to the user on lines 29–31.

Then, we run our ffmpeg command on line 26. ConvertVideoToGif: This is where the actual work is done, we write the video file to ffmpeg’s filesystem on line 23.ComponentDidMount & loadFFmpeg: Here, we wait until our react component mounts and then load in the Web Assembly code for ffmpeg, then we set ready to true to indicate we are ready to convert video.Constructor: We create some state items to keep track of the current app state.Line 4: We create an ffmpeg instance and set logging to true so we can see logs in our console.

Ffmpeg gif from images