GSoC’19 Final Report: Video-Cut-Tool


Project:

VideoCutTool helps millions of wiki users 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 is 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/
Back-end: https://github.com/gopavasanth/video-cut-tool-back-end/

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

Deployed in Wikimedia toolforge:

VideoCutTool is hosted in the Wikimedia cloud services Toolforge, VideoCutTool is ddeployed in two different apps, front-end and back-end.

Front-end: https://tools.wmflabs.org/video-cut-tool
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 perform:

  • 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 with Node.js using express framework. All the video encodings are performed using ffpmeg.

Tools allows users to perform multiple actions at once, i.e abilities to trim, crop, rotate and disable audio from video.

Users can choose 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

Users has to provideo commons video URL 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 webm|ogv video extensions. 

Screenshot_2019-08-26 VideoCutTool

Fig: 1.1 Landing page takes Video URLs as input

Step-2: Video Settings
After fetching the video from commons, Users can perform the following features

Screenshot_2019-08-26 VideoCutTool(2)

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

      1. Trim Video: A longer 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.
  1. Crop Video: By clicing on the ‘Crop Video’ from the video settings, user can view the crop layer in the video player, so that users can select the required portion of the video by adjusting its height and width.

Screenshot_2019-08-26 VideoCutTool(4)

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

  1. Rotate Video: On clicking the ‘Rotate Video’ from the video settings, the tool pre-viewes the video by instantly rotating 90 degrees to the right.

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, so the video is played with out audio.
  1. Undo: User can turn on/off each feature, and users will also receives 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 is more complex to perform video encodings, users will be displayed a loading spinner on the screen and the notification is sent after the video encodings. 

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 can pick either of the options

  • Download video
  • Upload video into Wikimedia Commons

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