Permalink
Browse files

Chromakey, better docs (v4.0.15)

  • Loading branch information...
1 parent 07c8570 commit 6964d7e9223131de24238fc521857ff995e93d09 Doug Anarino committed May 25, 2016
Showing with 7,609 additions and 7,269 deletions.
  1. +1 −1 Dockerfile
  2. +58 −58 Gruntfile.js
  3. +61 −31 README.md
  4. +3 −1 app/app.css
  5. +24 −0 app/module/chromakey/chromakey-effect.html
  6. +27 −0 app/module/chromakey/chromakey-effect.json
  7. +4 −0 app/module/filter/filter.json
  8. +8 −8 app/module/overlay/merger.html
  9. +1 −1 app/module/text/theme.json
  10. +1 −0 app/php/include/datautils.php
  11. +16 −16 app/php/include/fileutils.php
  12. +23 −12 app/php/service/aws/vendor/composer/autoload_real.php
  13. +73 −0 app/php/service/aws/vendor/composer/autoload_static.php
  14. +1 −1 app/views/inspector/merger.html
  15. +2 −2 bower.json
  16. +5 −5 bower_components/moviemasher.js/.bower.json
  17. +5 −5 bower_components/moviemasher.js/Gruntfile.js
  18. +44 −43 bower_components/moviemasher.js/README.md
  19. +111 −111 bower_components/moviemasher.js/app/app.js
  20. +24 −24 bower_components/moviemasher.js/app/index.html
  21. +36 −36 bower_components/moviemasher.js/app/index.max.html
  22. +1 −1 bower_components/moviemasher.js/bower.json
  23. +4 −1 bower_components/moviemasher.js/config/docker/grunt/{Dockerfile → Dockerfile-grunt}
  24. +0 −12 bower_components/moviemasher.js/config/docker/grunt/docker-compose.yml
  25. +15 −0 bower_components/moviemasher.js/config/docker/grunt/grunt.yml
  26. +36 −0 bower_components/moviemasher.js/dist/filters/chromakey.js
  27. +1 −0 bower_components/moviemasher.js/dist/filters/chromakey.min.js
  28. +14 −14 bower_components/moviemasher.js/dist/filters/color.js
  29. +31 −34 bower_components/moviemasher.js/dist/filters/colorchannelmixer.js
  30. +47 −125 bower_components/moviemasher.js/dist/filters/convolution.js
  31. +1 −1 bower_components/moviemasher.js/dist/filters/convolution.min.js
  32. +34 −35 bower_components/moviemasher.js/dist/filters/crop.js
  33. +15 −16 bower_components/moviemasher.js/dist/filters/drawbox.js
  34. +33 −34 bower_components/moviemasher.js/dist/filters/drawtext.js
  35. +10 −11 bower_components/moviemasher.js/dist/filters/fade.js
  36. +15 −15 bower_components/moviemasher.js/dist/filters/overlay.js
  37. +28 −28 bower_components/moviemasher.js/dist/filters/scale.js
  38. +3,194 −3,078 bower_components/moviemasher.js/dist/moviemasher.js
  39. +2 −2 bower_components/moviemasher.js/dist/moviemasher.min.js
  40. +1 −1 bower_components/moviemasher.js/package.json
  41. +36 −0 bower_components/moviemasher.js/src/filters/chromakey.js
  42. +14 −14 bower_components/moviemasher.js/src/filters/color.js
  43. +31 −34 bower_components/moviemasher.js/src/filters/colorchannelmixer.js
  44. +47 −125 bower_components/moviemasher.js/src/filters/convolution.js
  45. +34 −35 bower_components/moviemasher.js/src/filters/crop.js
  46. +15 −16 bower_components/moviemasher.js/src/filters/drawbox.js
  47. +33 −34 bower_components/moviemasher.js/src/filters/drawtext.js
  48. +10 −11 bower_components/moviemasher.js/src/filters/fade.js
  49. +15 −15 bower_components/moviemasher.js/src/filters/overlay.js
  50. +28 −28 bower_components/moviemasher.js/src/filters/scale.js
  51. +65 −64 bower_components/moviemasher.js/src/moviemasher.js
  52. +44 −44 bower_components/moviemasher.js/src/others/action.js
  53. +165 −165 bower_components/moviemasher.js/src/others/audio.js
  54. +44 −0 bower_components/moviemasher.js/src/others/colors.js
  55. +52 −52 bower_components/moviemasher.js/src/others/constant.js
  56. +67 −67 bower_components/moviemasher.js/src/others/defaults.js
  57. +122 −53 bower_components/moviemasher.js/src/others/filter.js
  58. +104 −104 bower_components/moviemasher.js/src/others/loader.js
  59. +601 −601 bower_components/moviemasher.js/src/others/mash.js
  60. +24 −24 bower_components/moviemasher.js/src/others/option.js
  61. +1,396 −1,395 bower_components/moviemasher.js/src/others/player.js
  62. +25 −25 bower_components/moviemasher.js/src/others/players.js
  63. +231 −231 bower_components/moviemasher.js/src/others/time.js
  64. +252 −252 bower_components/moviemasher.js/src/others/util.js
  65. +4 −0 config/docker/composer/{Dockerfile → Dockerfile-composer}
  66. +9 −0 config/docker/composer/composer.yml
  67. +0 −6 config/docker/composer/docker-compose.yml
  68. +28 −0 config/docker/development/development.yml
  69. +0 −18 config/docker/development/docker-compose.yml
  70. +4 −1 config/docker/grunt/{Dockerfile → Dockerfile-grunt}
  71. +0 −11 config/docker/grunt/docker-compose.yml
  72. +14 −0 config/docker/grunt/grunt.yml
  73. +12 −0 config/docker/production/production.yml
  74. +36 −40 dist/angular-moviemasher.js
  75. +1 −1 dist/angular-moviemasher.min.js
  76. +1 −1 package.json
  77. +35 −39 src/angular-moviemasher.js
View
@@ -13,7 +13,7 @@ RUN mkdir -p -m 0777 /var/www/user-data
VOLUME /tmp/moviemasher/log
VOLUME /tmp/moviemasher/queue
VOLUME /tmp/moviemasher/temporary
-VOLUME /var/www/html/user-media
+VOLUME /var/www/html
# install our php configuration
COPY config/docker/php.ini /usr/local/etc/php/conf.d/moviemasher.ini
View
@@ -1,61 +1,61 @@
/*global module:false*/
module.exports = function(grunt) {
- 'use strict';
- grunt.initConfig({
- pkg: grunt.file.readJSON('package.json'),
- concat: {
- moviemasher: {
- options: {
- banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - '+
- '<%= grunt.template.today("yyyy-mm-dd") %>\n'+
- '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
- '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
- ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
- footer: '\n'
- },
- src: ['src/*.js'],
- dest: 'dist/<%= pkg.name %>.js'
- }
- },
- jshint: {
- options: {
- "-W086": true, /* allow fall through in switch statements */
- curly: false,
- eqeqeq: true,
- immed: true,
- latedef: true,
- newcap: true,
- noarg: true,
- sub: true,
- undef: true,
- unused: true,
- boss: false,
- eqnull: true,
- evil: true,
- browser: true,
- devel: true,
- globalstrict: true,
- },
- gruntfile: {
- src: 'Gruntfile.js'
- },
- moviemasher: {
- src: 'src/**/*.js'
- },
- modules: {
- src: 'app/module/**/*.json'
- }
- },
- uglify: {
- options: {},
- moviemasher: {
- src: '<%= concat.moviemasher.dest %>',
- dest: 'dist/<%= pkg.name %>.min.js'
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-concat');
- grunt.loadNpmTasks('grunt-contrib-jshint');
- grunt.loadNpmTasks('grunt-contrib-uglify');
- grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
+ 'use strict';
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ concat: {
+ moviemasher: {
+ options: {
+ banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - '+
+ '<%= grunt.template.today("yyyy-mm-dd") %>\n'+
+ '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+ '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+ ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+ footer: '\n'
+ },
+ src: ['src/*.js'],
+ dest: 'dist/<%= pkg.name %>.js'
+ }
+ },
+ jshint: {
+ options: {
+ "-W086": true, /* allow fall through in switch statements */
+ curly: false,
+ eqeqeq: true,
+ immed: true,
+ latedef: true,
+ newcap: true,
+ noarg: true,
+ sub: true,
+ undef: true,
+ unused: true,
+ boss: false,
+ eqnull: true,
+ evil: true,
+ browser: true,
+ devel: true,
+ globalstrict: true,
+ },
+ gruntfile: {
+ src: 'Gruntfile.js'
+ },
+ moviemasher: {
+ src: 'src/**/*.js'
+ },
+ modules: {
+ src: 'app/module/**/*.json'
+ }
+ },
+ uglify: {
+ options: {},
+ moviemasher: {
+ src: '<%= concat.moviemasher.dest %>',
+ dest: 'dist/<%= pkg.name %>.min.js'
+ }
+ }
+ });
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
View
@@ -12,39 +12,47 @@ Use angular-moviemasher to integrate audio/video editing features into your exis
![Image](https://github.com/moviemasher/angular-moviemasher/raw/master/README/ui.jpg "User Interfacee")
-### Overview
+### Overview: Player + Transcoder = Editor
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.
+- **System Documentation:** [MovieMasher.com](http://moviemasher.com/docs/)
- **Docker Image:** `moviemasher/angular-moviemasher` [(Dockerfile)](Dockerfile)
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.
### AWS Integration
-The system *optionally* supports [Amazon Web Services](http://aws.amazon.com) 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.
+The system *optionally* supports [Amazon Web Services](http://aws.amazon.com) for media storage and job queueing, through several PHP configuration settings. When using S3 storage, users will securely upload files directly there without stressing your web server - each request is signed with your key so the bucket can safely remain read-only to the public. When using an SQS queue, jobs are placed in it instead of written to the local queue directory. Callbacks are also added to the job description so the progress of transcoding operations 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.
+Those new to AWS will be interested in the [Movie Masher AMI](https://aws.amazon.com/marketplace/pp/B00QKW0P2A) available in Amazon Marketplace, which includes all three projects preconfigured to run together as a standalone deployment for testing and building upon. There is also a [Deployment Wizard](http://moviemasher.com/product/cloudformation/) which utilizes their CloudFormation service to easily create an S3 bucket, SQS queue, and instances of the same AMI within an autoscaling pool - all the infrastructure required to deploy Movie Masher so it automatically adjusts to user demand.
### Docker Usage
-The [`moviemasher/angular-moviemasher`](https://registry.hub.docker.com/u/moviemasher/angular-moviemasher/) image on [docker.com](https://docker.com) is based off the official [`php:apache`](https://registry.hub.docker.com/_/php/) image, adding some configuration and copying this project into web root. The Dockerfile contains a **VOLUME** instruction for each directory it works with.
+Docker's [`moviemasher/angular-moviemasher`](https://registry.hub.docker.com/u/moviemasher/angular-moviemasher/) image is automatically built from the official [`php:apache`](https://registry.hub.docker.com/_/php/) image, adding some configuration as well as copying this project into web root. To make the UI available at your docker IP on port 8080:
-To make Movie Masher available at your docker IP on port 8080:
+- `docker run -d -p 8080:80 --name=angular_moviemasher moviemasher/angular-moviemasher`
-`docker-compose --file config/docker/development/docker-compose.yml up -d`
+All functions should be available at this juncture, except uploading and rendering which will just trigger the saving of a job description file into queue_directory. Because there is a VOLUME instruction for this directory, it can be mounted by other containers - we'll attach it to one run from the moviemasher/moviemasher.rb image which will handle the actual transcoding operation:
-This also runs the [`moviemasher/moviemasher.rb`](https://registry.hub.docker.com/u/moviemasher/moviemasher.rb/) image from [docker.com](https://docker.com), preconfigured to share volumes so uploading and rendering work as expected.
+- `docker run -d -t --volumes-from=angular_moviemasher --name=moviemasher_rb moviemasher/moviemasher.rb process_loop`
-To stop and remove the container:
+To stop and remove the containers:
+- `docker stop angular_moviemasher`
+- `docker rm angular_moviemasher`
+- `docker stop moviemasher_rb`
+- `docker rm moviemasher_rb`
-`docker-compose --file config/docker/development/docker-compose.yml kill`
+The project also includes several docker-compose files in version 2 format, so you might need to update your Docker installation in order to utilize them. The simplest does what the commands above do, after download the repository and `cd` into its project directory and execute:
+- `docker-compose --file config/docker/production/production.yml up -d`
-`docker-compose --file config/docker/development/docker-compose.yml rm -fv`
+To stop and remove the containers:
+- `docker-compose --file config/docker/production/production.yml down -v`
+See Developer Setup below for several other helpful docker-compose files.
### How to Install on Your Web Host
-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.
+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.
1. edit the config/moviemasher.ini file and place outside your web root directory
2. add its parent directory to PHP's include_path configuration option somehow or edit app/php/include/authutils.php to specify its full path
@@ -56,16 +64,18 @@ It's important to remember this project is just an *example* deployment and not
8. install the app, bower_components and dist directories somewhere under web root and load index.html in a web browser
### Further Customization
-- 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` or `merger` modules and add them to the module directory with a corresponding .json file describing each one
+- 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
+- create your own `theme`, `effect`, `transition`, `scaler` or `merger` modules that utilize the filters from moviemasher.js and add them to the module directory with a corresponding .json file describing each one
### Porting from PHP to Other Languages
-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:
+Each of the PHP endpoints requested by 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:
```html
-<div class='amm-ui' amm-rest-media-search-url='cfm/media.cfm?group=:group'></div>
+<div class='amm-ui'
+ amm-rest-media-search-url='cfm/media.cfm?group=:group'
+></div>
```
### Included Requirements
@@ -74,44 +84,64 @@ Each of the PHP endpoints requested by the JavaScript is configurable within the
- angular-file-upload
- angular-resource
- bootstrap
+- moviemasher.js
- opentype.js
- script.js
-- moviemasher.js
### User Feedback
If any problems arise while utilizing this repository, a [GitHub Issue Ticket](https://github.com/moviemasher/angular-moviemasher/issues) 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.
### Contributing
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](https://moviemasher.com) to discuss your ideas.
-### Developer Setup
-Various components of angular-moviemasher can be updated or rebuilt after installing git, npm, bower, grunt and composer. Once applications are installed `cd` to project directory and execute:
-- Applications: npm, bower, grunt, composer
-- Project: [moviemasher.js](https://github.com/moviemasher/moviemasher.js)
+#### Developer Setup
+Docker is used extensively to develop this project, specifically to update components using standard tools like npm, bower, grunt, and composer. Though not routinely tested, these same tools might work outside Docker - just `cd` to project directory and execute:
+
+- `npm install`
+- `bower install --production`
-1. npm install
-1. bower install --production
-1. grunt
-1. cd app/php/service/aws
-1. composer install
+- `grunt`
+- `cd app/php/service/aws`
+
+- `composer install`
Or if docker is being used...
-`docker-compose --file config/docker/grunt/docker-compose.yml run --rm angularmoviemasher bower install --production`
+- `docker-compose --file config/docker/grunt/grunt.yml run --rm grunt`
+
+- `docker-compose --file config/docker/grunt/grunt.yml run --rm grunt bower install --production`
+
+- `docker-compose --file config/docker/composer/composer.yml run --rm composer`
+
+It's also possible to run Movie Masher entirely from source code by first downloading the other two Movie Masher projects into the same directory that contains this repository:
+
+- [moviemasher.js](https://github.com/moviemasher/moviemasher.js)
+- [moviemasher.rb](https://github.com/moviemasher/moviemasher.rb)
+
+Then to make Movie Masher available at your Docker IP on port 8080:
+
+- `docker-compose --file config/docker/development/development.yml up -d`
+
+This essentially does the same as the `production` docker-compose command above, but actually builds special `development` images from source. It also mounts the relevant directories from each project, so changes to them can be made during runtime. Changes made to JavaScript typically require grunt be run (see above) and changes made to moviemasher.rb require that its container be restarted:
+
+- `docker-compose --file config/docker/development/development.yml restart moviemasher_rb`
+
+If any errors are encountered during transcoding, the job related files from moviemasher.rb will all be in `tmp/error`, including its log. And there might be additional information in the logs for both projects in the `log` directory.
-`docker-compose --file config/docker/grunt/docker-compose.yml run --rm angularmoviemasher grunt`
+To stop and remove the containers:
-`docker-compose --file config/docker/composer/docker-compose.yml run --rm angularmoviemasher composer install`
+- `docker-compose --file config/docker/development/development.yml down -v`
-##### Known issues in this version
+#### Known issues in this version
- 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
+- a more angular approach could be taken with the codebase
-##### Migrating from Version 1.0.1
+#### Migrating from Version 1.0.1
- The `begin` key in video clips has been renamed `first`.
- The `length` key in clips has been renamed `frames`.
- The `audio` and `video` keys in mash tracks have been moved to mash.
View
@@ -366,7 +366,9 @@ amm-timeline-rule-line {
background-position:0 0, 5px 5px;
background-repeat: repeat;
}
-
+.colorpicker > .dropdown-menu {
+ min-width: 150px;
+}
.pixelated {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
@@ -0,0 +1,24 @@
+<div class='amm-inspector-row'>
+ <label>Color:</label>
+ <div class="amm-colorpicker">
+ <button colorpicker="rgb" ng-style="{'background-color':$amm.player.selectedEffect.chroma_color}" type="button" ng-change="$amm.player.change('chroma_color')" ng-model="$amm.player.selectedEffect.chroma_color"></button>
+ </div>
+</div>
+<div class='amm-inspector-row'>
+ <input type="range" type="range"
+ step="0.01" min="0.01" max="1.0"
+ ng-change="$amm.player.change('chroma_similarity')"
+ ng-model="$amm.player.selectedEffect.chroma_similarity"
+ />
+ <label>Similarity:</label>
+ {{$amm.player.selectedEffect.chroma_similarity}}
+</div>
+<div class='amm-inspector-row'>
+ <input type="range" type="range"
+ step="0.01" min="0.0" max="1.0"
+ ng-change="$amm.player.change('chroma_blend')"
+ ng-model="$amm.player.selectedEffect.chroma_blend"
+ />
+ <label>Blend:</label>
+ {{$amm.player.selectedEffect.chroma_blend}}
+</div>
@@ -0,0 +1,27 @@
+{
+ "label": "Chromakey",
+ "type": "effect",
+ "id": "com.moviemasher.effect.chromakey",
+ "properties": {
+ "chroma_blend": { "type": "number", "value": 0.01 },
+ "chroma_similarity": { "type": "number", "value": 0.5 },
+ "chroma_color": { "type": "rgb", "value": "rgb(0,255,0)" }
+ },
+ "filters": [
+ {
+ "id": "chromakey",
+ "parameters": [
+ {
+ "name": "color",
+ "value":"chroma_color"
+ },{
+ "name": "blend",
+ "value":"chroma_blend"
+ },{
+ "name": "similarity",
+ "value":"chroma_similarity"
+ }
+ ]
+ }
+ ]
+}
@@ -38,5 +38,9 @@
{
"id":"convolution",
"source": "../bower_components/moviemasher.js/dist/filters/convolution.js"
+ },
+ {
+ "id":"chromakey",
+ "source": "../bower_components/moviemasher.js/dist/filters/chromakey.js"
}
]
Oops, something went wrong.

0 comments on commit 6964d7e

Please sign in to comment.