GSoC’19 Final Report: Video-Cut-Tool

Project:

VideoCutTool will help to trim videos on-the-fly in Wikimedia Commons. Currently, a video in Wikimedia Commons cannot be edited online. They have to be downloaded, changes made and later re-uploaded. As this process tends to take a good amount of time, the VideoCutTool makes authorized users work hopefully up-to 10x faster. This tool will be deployed on Wikimedia Toolforge, a hosting environment that provides services for the Wikimedia movement.

Proposal:

File:VideoCutTool Proposal GSoC’19

Work Repository/Branch:

 

VideoCutTool has two different repositories “Front-end” and “Back-end”.

Front-end: https://github.com/gopavasanth/video-cut-tool-front-end/

Back-end: https://github.com/gopavasanth/video-cut-tool-back-end/

Commons:VideoCutTool Wiki Page:

https://commons.wikimedia.org/wiki/Commons:VideoCutTool

Hosted in Wikimedia toolforge:

VideoCutTool is hosted in the Wikimedia Hosting environment Toolforge, This tool is hosted in two different apps, front-end and back-end.

Front-end: https://tools.wmflabs.org/video-cut-tool-front-end

Back-end: https://tools.wmflabs.org/video-cut-tool-back-end

BiWeekly Blogs:

Front-end:

Developed a simple and user-friendly interface using React Ant Design library. This tool can do:

  • Visual Cropping without manually entering the values to crop the video.
  • Visual Trimming without manually entering the values to trim the video.
  • Notify the user about the changes made.
  • Validate video URLs with the regular expressions.

Back-end:

VideoCutTool back-end is built in Node.js using express server. With in the tool all video encodings are done using ffmpeg.

It allows users to perform multiple actions at once, i.e abilities to trim, crop and rotate videos. Also to Disable audio from video.

Users can perform any actions based on their requirements, and the workflow of this tool goes as following in fig: 2.1

Flow Chart:

Fig: 2.1 flow chart of the VideoCutTool

How to Use ViedoCutTool?

Step-1: Video URL

Start with Commons video URL as input to the VideoCutTool. 

Eg: https://upload.wikimedia.org/wikipedia/commons/d/d2/3D-printed-self-driven-thumb-sized-motors-for-in-situ-underwater-pollutant-remediation-srep41169-s2.ogv.    

VideoCutTool supports mp4|webm|mov|flv|ogv extensions. 

Screenshot_2019-08-26 VideoCutTool

Fig: 1.1 Landing page takes Video URLs as input

Step-2: Video Settings

Once the video is being uploaded then following operations can be done – 

Screenshot_2019-08-26 VideoCutTool(2)

Fig: 1.2 Video Settings – Users get to select their choice of operations.

      1. Trim Video:

A long video can be trimmed into small ones, by clicking on the Trim options in the video settings, user can easily drag the time sliders and set the “Start” and “Stop” times of the video. On clicking the “Add More” button another time slider will be added to perform following sub-operations –

  • Generate Multiple Videos: On clicking on ‘Multiple Videos’ option, user can trim a video into more than one videos. These multiple trimmed videos can be downloaded or uploaded to the Commons by logging into VideoCutTool.

Eg: A video of 15:25 min can be trimmed to multiple videos like one part of 4 minutes and the other half with the remaining time (or upto the user).  

  • Prepare a Single Video: On clicking on ‘Single Video’ checkbox, all the trimmed videos from it’s parent video will be concatenated and made as a single video again.

Eg: Trim any 2 minutes from a video of 15 mins, and trim a 3 minute part from the same video. Now you can concatenate both the parts and make it into a single video of 5 mins.

 

Fig 1.3 Visual Trimming – Users can trim the videos by dragging left/right on the sliders.

  1. Crop Video

By tapping on the ‘Crop Video’ from the settings, user can see the new layer in the video player then user can drag the layer within the player to adjust it’s height, width and corners of the output video. All the values will be auto recorded, no need to give any inputs.

Screenshot_2019-08-26 VideoCutTool(4)

Fig: 1.4 Visual Cropping – Users can crop the required area of the video.

  1. Rotate Video

On tapping the ‘Rotate Video’ from the settings, the video will be instantly rotated 90 degrees to the right. It also gives the instance preview of the output video.

Screenshot_2019-08-26 VideoCutTool(3)

Fig: 1.5 Rotate Video – Users can Rotate video.

  1. Disable Audio

On clicking the ‘Disable Audio’ from the settings, the audio will be disabled from the video.

  1. Undo

User can turn on/off each feature, and each time they turn on/off, the user will receive a notification on the window. 

  1. Preview

After the user is done with editing, they can click on the ‘Preview’ button, the tool will start encoding the output video. This takes a while to process the video computation. As it takes more time, users will be displayed a loading spinner on the screen, so they are updated about the process. 

Screenshot_2019-08-26 VideoCutTool(2)

Fig: 1.6 Preview of the video according to the users requirements.

Step-3: Result

Once the video is encoded, user will receive two options either to download the video, or to upload it to the Commons. I

To Do :

  • When the user logins and clicks on “Upload to commons Button” There are few minor errors.
  •  when clicks on the “Download Button” the browser is redirecting and playing the video in browser instead of showing the pop-up for the download.
  • Hosted in toolforge, we need to make sure that it works properly.

How is this tool useful?

Many users upload, download, and sometimes edit re-uploaded video/audio files in the Wikimedia Commons, this tool makes the process smoother and much simple, reliable and faster without any conflicts.  

Lessons learned:

Working on real-world problems, writing safe and secure codes for to make it to production, collaborating with teams from any place, proper communication with the mentors and community folks, have been a great learning experience for me. I will keep sharing this knowledge of OSS and my learnings with others to keep them on the same plate and inspire the coming generation.

I learnt a lot working with Hassan Amin, he has been so supportive, always encourages me in all the tough times throughout the GSoC period. Given an opportunity, I would love to work with him again.

Feedback:

My mentors, org admins, and community folks were very helpful all the time, guiding me in the best possible direction. Tons of heartful thanks to Srishti Sethi and Hassan Amin ♥ 

One thought on “GSoC’19 Final Report: Video-Cut-Tool

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s