moviemasher.js | angular-moviemasher | moviemasher.rb
Example deployment of moviemasher.js and moviemasher.rb utilizing AngularJS, Bootstrap and PHP
Use angular-moviemasher to integrate audio/video editing features into your existing web site or as a starting point for further development. It builds upon both the moviemasher.js and moviemasher.rb projects, as well as the popular PHP middleware layer and AngularJS+Bootstrap for the UI (only Bootstrap's CSS is used, so no reliance on jQuery).
- empower your site visitors to edit high quality video and audio
- integrate with your existing authentication and storage mechanisms
- customize the user interface, workflow and available media
Docker Image: moviemasher/angular-moviemasher
(Dockerfile)
The project includes an AngularJS module that manifests a time-based video editing interface, as well as a set of server-side PHP scripts it interacts with. Both the client and server sides are effectively abstractions, sheltering you from the complexity of the underlying moviemasher.js and moviemasher.rb projects respectively.
The client module wraps around a player object instanced from moviemasher.js, which provides the preview and maintains undo/redo history. The module adds familiar play/pause, volume and associated controls to the player as well as constructing a media browser, timeline and inspector panel. Files from the user's machine can be dropped into the media browser to initiate uploading and preprocessing, and there is a render button that will initiate encoding of the mash into true video format.
The PHP scripts wrap around and monitor the API provided by moviemasher.rb, which handles processor intensive transcode operations like preprocessing of uploads and rendering of mashes. The scripts add basic content management functionality, first authenticating users then storing and retrieving their data.
The system optionally supports Amazon Web Services for media storage and job queueing, through several PHP configuration settings. If set to use an S3 bucket then users will securely upload files directly there without stressing your web server - each request is signed with your key so the bucket can remain read-only to the public. If set to use an SQS queue then jobs are placed in them instead of written to the local queue directory. Callbacks are also added to the job description so job progress can be monitored.
Additionally, the Movie Masher AMI is available in Marketplace and includes all three projects preconfigured to run together as a standalone deployment for testing and building upon. Launching it from their console is by far the simplest way to see the whole system in action - no coding or set up required. It can also be launched with user data in a headless mode with only moviemasher.rb configured to process jobs found in an SQS queue. This allows the AMI to be used in a pooled cluster that can automatically scale up and down depending on the number of jobs pending in the SQS queue.
The moviemasher/angular-moviemasher
image on hub.docker.com is based off the official php:apache
image, adding some configuration and copying this project into web root. It should be run alongside the moviemasher/moviemasher.rb
image which provides transcoding functionality. This project contains a docker-compose file that makes it easy to launch both and hook them together, following these steps:
- clone or download this repository
cd angular-moviemasher/config/docker/development
docker-compose up -d
(to bring the system up)- load http://localhost:8080 in your web browser to access the UI
- any username/password combination will work
docker-compose down -v
(to bring the system down)
Alternatively, you can just run the containers directly with docker:
docker run -d -p 8080:80 --name=angular_moviemasher moviemasher/angular-moviemasher
docker run -d -t --volumes-from=angular_moviemasher --name=moviemasher_rb moviemasher/moviemasher.rb process_loop
- load http://localhost:8080 in your web browser to access the UI
- any username/password combination will work
docker stop angular_moviemasher moviemasher_rb
docker rm angular_moviemasher moviemasher_rb
It's important to remember this project is just an example deployment and not intended to be a fully functional, user-driven site out of the box. For instance, by default it uses HTTP authentication that accepts any username and password combination - hardly a recommended mechanism! It also stores all data locally in JSON files instead of using a database or other mechanism.
Download the latest ZIP and grab the compiled files in the dist
folder. An example application is app
and if you don't have the required modules installed they are in node_modules
.
npm install --save @moviemasher/angular-moviemasher
- edit the config/moviemasher.ini file and place outside your web root directory
- add its parent directory to PHP's include_path configuration option somehow or edit app/php/include/authutils.php to specify its full path
- if
file
option is 's3' then create the s3 bucket - or if
file
option is 'local' then change the permissions of the directory specified in theuser_media_directory
option such that the web server can work with it - if
client
option is 'sqs' then create the sqs queue, and setsqs_queue_url
option in moviemasher.rb configuration - or if
client
option is 'local' then setqueue_directory
in moviemasher.rb and change its permissions so the web server can work with it - change the permissions of the directories specified in
temporary_directory
anduser_data_directory
such that the web server process can work with them - install the app, bower_components and dist directories somewhere under web root and load index.html in a web browser
- change the interface by editing app.css and HTML fragments in the views directory
- add custom fonts and a font.json file for each describing the
font
module to the module directory - override authentication mechanisms in app/php/include/authutils.php
- override data storage mechanisms in app/php/include/datautils.php
- create your own
theme
,effect
,transition
,scaler
ormerger
modules and add them to the module directory with a corresponding .json file describing each one
Each of the PHP endpoints requested by the JavaScript is configurable within the index.html file, so it can be overriden to point to scripts in other languages. The __default_config variable declaration near the top of the angular-moviemasher.js script file contains the PHP endpoints - note the nesting paths for the ones you want to change. These paths can be dash delimited and used as attributes within the main amm-ui tag to override values. For instance, the following will cause just the media metadata to be loaded from a Coldfusion endpoint:
<div class='amm-ui' amm-rest-media-search-url='cfm/media.cfm?group=:group'></div>
Several docker-compose files provide a simple mechanism to update dependencies.
cd config/docker/composer
docker-compose run --rm composer
cd config/docker/node
docker-compose run npm
cd config/docker/node
docker-compose run --rm grunt
If any problems arise while utilizing this repository, a GitHub Issue Ticket should be filed. Please include the job or mash description that's causing problems and any relevant log or console entries - issues with callbacks can typically be resolved faster after seeing entries from the receiving web server's log. Please post your issue ticket in the appropriate repository and refrain from cross posting - all projects are monitored with equal zeal.
Please join in the shareable economy by gifting your efforts towards improving this project in any way you feel inclined. Pull requests for fixes, features and refactorings are always appreciated, as are documentation updates. Creative help with graphics, video and the web site is also needed. Please contact through MovieMasher.com to discuss your ideas.
- timeline allows clips to be positioned atop one another
- uploads can only be dragged into browser panel
- freeze frame not yet supported
- cut/copy/paste not yet supported