filmviz / filmviz Goto Github PK

http://cinemetrics.lv/cinemetrics.php

http://huddle.github.io/Resemble.js/

Needing internet connection while you are processing a long video could be an issue for some users, even needing connection at the start of the processing.

Since all is done in the front-end (in the browser), it will be easier to make the app work totally offline (alerting the user when connection goes of and on to upload the results). One way could be making a firefox/chrome plugin, or just download the code and launch the app in localhost... but both seems too much hassle.

Using the Cache Manifest feature and some tricks with js and localstorage the process would be transparent for the user, and much faster than the other options.

Just read this article and take a peek at the demo http://alistapart.com/article/application-cache-is-a-douchebag

Again, count with my help to develop this suggestion. I would start it after #4 is completed since localstorage would be used for permanent storage of html content, and erasing processing info would require a little more precaution.

http://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag

Bower packages:

• angular: https://github.com/angular/bower-angular
• angular-route: https://github.com/angular/bower-angular-route
• bootstrap: https://github.com/twbs/bootstrap
• jszip: https://github.com/Stuk/jszip
• resemble.js: https://github.com/Huddle/Resemble.js

NPM packages:

• rgbquant.js (only npm)

Make a visualization of the whole project before saving/finishing it.

Problem: Angular stores internal data on objects.
Solution: Use angular.toJson instead of JSON.stringify

StackOverflow: http://stackoverflow.com/questions/18826320/what-is-the-hashkey-added-to-my-json-stringify-result
Angular docs, toJson: https://code.angularjs.org/1.4.3/docs/api/ng/function/angular.toJson

[ ] play
[ ] pause
[ ] first frame

Distinguish human voice from music/noise.
https://en.wikipedia.org/wiki/Voice_activity_detection

Separate CONTRIBUTING.md and maybe move documentation to a Wiki or another file seem like good ideas to me.

• Add screenshots.

This is due to a delete button showing up right next to the tag when selecting it. An option would be to only show delete buttons when the video is paused, hence not interfering with the manual tagging process.

edit capabilities through vtt file...

next/prev buttons, edit and save buttons...

in tabnav update all calls for this ñapa

Full width timeline with video seeking capabilities.

• load and save project files
  (project structure)
  zip -->
  project.json (with relative paths to all files:)
  vtt/
  color.vtt
  audio.vtt
  rythm.vtt
  ...
  metadata4.vtt
  img/
  thumb0001.jpg
  thumb0002.jpg
  ....
  thumb8653.jpg
• view and edit individual VTT files
• generate limited analysis (from TC to TC)
• Edit individual CUEs

Make a slug ('some-file-name') of the project name to be usable as filename.

We may use some RegExp for this.

var progress = document.getElementById('progress');
progress.max = parseInt(video.duration);

progress.value = parseInt(video.currentTime);

ProjectData.analysisCollection stores Analysis objects, but should be a dictionary.
No analysis have the same name and readability of other JS files will improve.

See Notifications API

jszip

We should 'use strict'; in all our .js files.
When I reformatted that files to comply with our code style, I tried to make them strict, but project object was not found because it is declared inside a closure and strict forced it to be local.

One posible solution is manage to put project on an Angular Service or similar, to make it global to our Angular components.

webVTT with JSON sample:

WEBVTT

Wikipedia
00:01:15.200 --> 00:02:18.800
{
"title": "State of Wikipedia",
"description": "Jimmy Wales talking ...",
"src": "http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/120px-Wikipedia-logo-v2.svg.png",
"href": "http://en.wikipedia.org/wiki/Wikipedia"
}

It would be cool to allow the user to analyze a video from youtube, vimeo, etc... so he doesn't need to have the video file locally. For example being able to analyze all the music videos from a certain artist or album...

Interesting article about getting the video files from youtube based just on a video id/url: http://coding-everyday.blogspot.com.es/2013/03/how-to-grab-youtube-playback-video-files.html

Obviously this is an improvement for the final version of the project

[X] manage the project tags for each user defined vtt
[X] generate buttons for each tag in the tag list
[X] add x button to each tag to remove the tag from the list
[X] add functionality to create data into the analysis when playing...
[ ] hide delete button for tags when playing
[ ] show label with vtt content from video track broadcast...

As I said, IndexedDB would be a nice improvement once the version with localstorage is ok (http://w3c.github.io/IndexedDB/). It works more like a database (hability to do searches, and have different storages and data structures, ....) nowadays its supported more widely than when I started working with it.

But the most interesting feature is the ability to store "blobs", in our case scenario will be the screenshot of each "capture". Example with ydn-db: http://dev.yathit.com/ydn-db/doc/usage/blob.html

I encourage to use a wrapper above indexedDB if you are not interested in diving how it really works underneath and deal with too much code. I developed with Ydn-db but there are much more, just find the one that looks better documented and mantained.

Count with my help with this issue, I lost interest in the technology but it's always nice not to loose knowledge.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#Using_the_drawImage_method

http://www.w3schools.com/html/html5_webstorage.asp

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

https://github.com/mozilla/localForage

The selected sorting method is only applied to the current color sample when the video is playing, as soon as the next sample comes it appears unsorted.

If some user chooses sort by value and plays the video, s/he expects to see colors ordered in that way for new samples.

Running an analysis on Firefox give this exception:

IndexSizeError: Index or size is negative or greater than the allowed amount

On the contrary, after this first error, if you run the analysis another time, it works.

Maybe it has to be with the way Firefox load videos.

This depends on #24

It seems the track feature doesn't like to receive cues without tcOut...

Cues in vtt files should have always tcOut
we can generate the tcOut when file-saving, using next tcIn in each tcOut and for the last one, put in tcOut the total lenght from the video

Cue Timecodes should have miliseconds expressed with 3 digits:
00:00:00.0 WRONG
00:00:00.000 CORRECT

very useful link, a vtt validator
https://quuz.org/webvtt/