Day 7: Fixing timelapse

What I worked on

Timelapse used to take forever to load, and the timer used to keep going, I fixed this.

Added screen recording

What I learned

Timer not working?

The timer used to only stop after the timelapse was generated. I simply moved the line of code that stopped the timer to before, once the stop button was pressed.

What part of the timelapse generation is slow?

The encoding. Currently we take two frames a second, and then stitch them together to be 30fps, making the video 15x faster.

By the time the video ends, we have all the frames stored and ready to go, but the API currently used is a tape-recorder, so if we want to stitch together a 2 minute video we literally have to wait 2 minutes to stitch together the frames.

The fix

We need to use another library that can take frames and delays and immediately spit out a timelapse. I’m hoping that after this change, once you end your study session you can immediately download the timelapse to share with friends.

VideoEncoder does just this. The only catch is it outputs raw VP9 chunks, not a playable file like an MP4. To transfer to an MP4, we need to add a dependency called mp4-muxer.

Swapped them out, encoded while the video was streaming, and now everything works smoothly!

Screen Recording

The goal is to record your screen along with your face so that the timelapse can show you and what you’re working on. This way when you share with friends they can see what you were doing. This provides a great incentive to stay focused on the task at hand when in a study session.

I changed the camera recording to be a small section in the bottom left of the screen recording.

By encoding both the screen recording and the camera feed while the video is streaming I made it so that the timelapse processes immediately, making it super easy to download and share with friends.

What’s still confusing

Why isn’t it possible to add the timelapse video to the clipboard? Does the clipboard not support large sizes?