As teenagers growing up in a society so centred around technology, we recognized the problems in learning through online articles and other forms of writing. One significant flaw of learning through this method is that many in our current society do not have the attention span to read through pages of writing. Consequently, they are unable to grasp the main ideas of the literature and are not learning effectively. On the other hand, when trying to learn from videos, the experience is completely one-sided. Although you have the video to learn from, you can not take notes or bookmark certain areas, which also makes it hard to learn from videos. In order to combat this current issue, we decided to create a web application that will keep the audience engaged in their learning through video annotations.

What it does

VidScribe is a web application that allows users to annotate on top of videos in real-time. These annotations are saved in a library and will be displayed again when watching again. This makes it easy to learn by watching educational videos.

How we built it

We built VidScribe using a Flask back end for the video player and made a drawing app with Javascript. The video is played in a regular video element, and a canvas is overlaid on top of it in order to display and draw annotations.

Challenges we ran into

We tried to write the annotations onto the video through FFMPEG initially, but that proved to be somewhat inefficient, and lacked many of the features we wanted, so we made the annotations render live using the Javascript code

Accomplishments that we're proud of

It is possible to draw on the app using a mouse, touchscreen, IPad, or drawing tablet. When using the latter 2, all the features will be available, like pressure sensitivity and tilt detection.

What we learned

We learnt how to work with FFMPEG to manipulate the video, improved our skills in Javascript by a lot, and also learnt how to work with different pointing devices in Javascript.

What's next for VidScribe

  • Being able to add annotations on videos collaboratively.
  • A page that lists all the videos available
  • More ways to interact with the video, like notes and bookmarks

We also wanted to add live transcription, and the ability to skip long moments of silence. We have a god portion of the code needed for this, but were not able to add this feature fully before the deadline.

Built With

Share this project: