Commons:VideoCutTool/Installation

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

This is the background to VideoCutTool; it includes details to how to install and contribute to the tool, technical details of the tool and other background info to the tool. To find out how to use the tool and main details about the tool itself please visit here.

Contributing

[edit]

The source code for the tool can be found on Gerrit. found here. The front-end of the tool is written using Reactjs and the back-end of the tool is written using Node.js.

README.md file contains details on how to install the tool on your local device. If you would like to contribute to the repository such as reporting a bug, fixing a bug or updating any code or documentation, you can do so by creating a new issue in order to report a bug or you can make a Pull Request to the repository on GitHub in order to update any code/documentation. Also, you can also report bugs at the VideoCutTool Phabricator. We use zulip chat for our communication, so please feel free to join and get in touch with us!

Installation

[edit]

Using Docker

[edit]

This guide will assume that you have docker installed, Refer to https://docs.docker.com/engine/install/ for downloading & installation if you don't.

The source code for VideoCutTool can be found at Gerrit - https://gerrit.wikimedia.org/r/#/admin/projects/labs/tools/VideoCutTool

Clone the repository git clone "git clone "https://gerrit.wikimedia.org/r/a/labs/tools/VideoCutTool" and go inside the VideoCutTool directory run the docker compose file using docker-compose -f .\docker-compose.dev.yml up

After installing all the required images, Tool should start running on port localhost port 3000.

Without Using Docker

[edit]

This guide will assume that you have Node.js and npm (which comes with Node.js) installed. Refer to https://nodejs.org/en/download/ for downloading & installation if you don't.

FFmpeg must be available on PATH - it is used to work with videos. If you are unsure, open a command shell (guide below) and type ffmpeg -version. If an error is displayed about a missing command, you probably don't have it installed - refer to https://www.ffmpeg.org/download.html for installation.

mongodb should be installed and running, you probably don't have it installed - refer to https://www.mongodb.com/docs/manual/installation/ for installation.

Getting the source code

[edit]

The source code for VideoCutTool can be found at:

You have two methods to obtain them :

  • If you are familiar with Git, you may clone the repositories directly (GitHub supports Git over HTTPS).
  • If not, launch the page of the repository you wish to download in a browser, then choose Clone or download and click Download ZIP. Unzip the downloaded file into a directory of your choice.

Installing the required modules

[edit]

VideoCutTool's front-end and back-end are written using React.js and a Node.js, and it depends on a number of external modules. They need to be installed before VideoCutTool can be run.

  • Open up a command shell.
    • On Windows, either cmd.exe (Command Prompt) or PowerShell can do the job. This guide assumes you are using Command Prompt.
    • On macOS, Terminal can be used, which provides access zsh.
    • On Linux, this depends on your distribution and (possibly) your desktop environment. LXTerminal, Xfce Terminal and other Terminal Emulators are commonly used, providing access to bash (most distros) or alternatives like zsh.

Step-1 Cloning the project

[edit]

You need to clone the repository from the gerrit using

Install the required dependencies for this tool with

  • Execute npm install --legacy-peer-deps. It should display something like this:
$ npm install --legacy-peer-deps
audited 533 packages from 744 contributors and audited 8182 packages in 3.633s
found 0 vulnerabilities

Numbers may differ, it's not a problem.

Executing the tool

[edit]

Run npm run dev to run the tool and wait a few seconds.

If you choose a different port, adjust the addresses accordingly.

The terminal running front-end should display something similar to the following: 

Compiled successfully!

You can now view video-cut-tool in the browser

  Local:            http://localhost:3000/
  On Your Network:  http://YOUR_IP4_ADDRESS:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

Starting up the back-end service Locally

[edit]

Login with Wikipedia account

[edit]

Clone the back-end repository from here using

For some features to work, especially logging in with Wikipedia accounts, you may need to obtain a MediaWiki API key.

Also to run the back-end tool you need to request Mediawiki OAuth keys.

Go to https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose and follow the steps there.

  • You may want to enable the following options under Applicable grants:
    • Edit existing pages.
    • Create, edit, and move pages.
    • Upload new files.
    • Upload, replace, and move files.
  • The callback URL should be set to https://localhost:4000/video-cut-tool-back-end/auth/mediawiki/callback. Adjust the port number accordingly if you choose a different port when running VideoCutTool (by setting the PORT environment variable).

You will be given a consumer key and a consumer secret. Put them in config.js, which is located at the root of the folder.

  • cd to the directory containing the source code.
  • Execute npm install. to install all the required dependencies
  • You are also required to install and start MongoDB, Follow official documentation for the installation and starting service locally
 https://docs.mongodb.com/manual/installation/


Technical Details

[edit]

Front-end

[edit]

The front-end of the tool uses Reactjs, a UI/View library in which JavaScript functions generate HTML in a reactive data flow. More info about the library can be found here.

Back-end

[edit]

The backend of the tool is written in JavaScript and run on Node.js, a JavaScript runtime based on Google Chrome's V8 engine.

Under the hood, it employs Express.js to handle HTTP requests. Passport.js is used with passport-mediawiki-oauth to take care of user authentication via OAuth.

Other requirements

[edit]

VideoCutTool works with videos by calling ffmpeg with appropriate arguments (that's why FFmpeg must be available on PATH)

Background

[edit]

This tool was created due to there being no other tool that could quickly, easily and simply edit and upload videos and audio files from Wikimedia Commons. It was made to allow users to have a much quicker and easier experience to edit uploaded files on Wikimedia Commons. Rather than having to download, edit and then upload the files to Commons manually, the tool would do this automatically and require minimal user input and speed up the process greatly. It was also created as there was great demand from users for it to be made.

See also

[edit]
Retrieved from "https://commons.wikimedia.org/w/index.php?title=Commons:VideoCutTool/Installation&oldid=668552672"