Commons:VideoCutTool/Installation
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.
- You will also need to install and configure Redis.For the installation you can follow
https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-redis-on-ubuntu-20-04
Getting the source code
[edit]The source code for VideoCutTool can be found at:
- https://gerrit.wikimedia.org/r/#/admin/projects/labs/tools/VideoCutTool (Gerrit)
- https://github.com/gopavasanth/video-cut-tool (Github)
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 accesszsh
. - 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 likezsh
.
- On Windows, either
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.
- For the front-end, go to http://localhost:3000/ in any browser to view.
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 thePORT
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/
- Execute
npm start
. to start the service - For the back-end, go to http://localhost:4000/ instead.
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.