rnicholus / frame-grab.js Goto Github PK

Do this as part of the next release.

Badges should be:

[![Dependency Status](https://david-dm.org/rnicholus/frame-grab.js.svg?theme=shields.io)](https://david-dm.org/rnicholus/frame-grab.js)

[![devDependency Status](https://david-dm.org/rnicholus/frame-grab.js/dev-status.svg?theme=shields.io)](https://david-dm.org/rnicholus/frame-grab.js#info=devDependencies)

Update README to note that a polyfill is needed in IE.

This value is likely to be a string if coming from user input (for example, via window.prompt). It seems reasonable to attempt to coerce this via parseInt before I declare the parameter invalid.

I use frame-grab.js with dropzone.js. Here is the code:

mmdDz.on("addedfile", function(file) { var comps = file.name.split("."); if (comps.length === 1 || (comps[0] === "" && comps.length === 2)) { return; } var ext = comps.pop().toLowerCase(); if (ext == 'mov' || ext == 'mpeg' || ext == 'mp4' || ext == 'wmv') { console.log("extention: " + ext); FrameGrab.blob_to_video(file).then( function videoRendered(videoEl) { var frameGrab = new FrameGrab({video: videoEl}); var imgEl = file.previewElement.querySelector("img"); console.log("img: " + imgEl + " /// videoEl: " + videoEl); frameGrab.grab(imgEl, 1, 220).then( function frameGrabbed(itemEntry) { console.log("file: " + itemEntry); self.emit('thumbnail', file, itemEntry.container.src); }, function frameFailedToGrab(reason) { console.log("Can't grab the video frame from file: " + file.name + ". Reason: " + reason); } ); }, function videoFailedToRender(reason) { console.log("Can't convert the file to a video element: " + file.name + ". Reason: " + reason); } ); } });
It works fine on desktop & safari mobile emulator but it doesn't on iphone or ipad. I can't catch why... No errors in console log
console.log("extention: " + ext) - returns right extention
console.log("img: " + imgEl + " /// videoEl: " + videoEl); - returns nothing

• Accept a time (float, in seconds) or a timecode string (hour:min:sec:frame).
• Allow frame to be rendered onto a supplied <img> or <canvas>.
• Allow size to be specified for rendered frame. The size will be the width or the height of the rendered image. The rendered image's dimensions will take the aspect ratio of the source video into account.
• Optionally skip around a uni-colored frame until a multi-colored frame is encountered. For example, if the first frame of the video, or the frame at the supplied timecode is mostly black-ish, attempt to find a non-black frame nearby (probably after).
• Allow a frame to be extracted at the current position of the source video.
• Allow a frame to be extracted at a specific position even while the video is playing. Perhaps this can be accomplished by cloning the <video>, seeking to the correct time in the clone, and grabbing the frame from there.

Populate a timeline with appropriately placed frame grabs. An element representing the timeline will need to be supplied, along with the <video>, and the exact frame rate. Frame-grab.js will generate frame images on the timeline, taking into account the timeline's width and height. The timeline will be filled, and the left edge of a frame image on the timeline will coincide with the frame in the video that represents that image.

Instead, it erroneously uses the current time of the source video clone, created during construction of the instance.

Hello.

I need to make a slider to select a frame for preview. So, your API is suitable except one thing. How can I get a total frames count to use it as maximum slider value? Is it possible using your API or I need another way?

Thank you.

I should probably console.error all error messages, just in case integrator's aren't handling a promise rejection (which would be invoked if the promise throws).

Allow a "story" to be created using appropriately (and generally evenly spaced) frame grabs from a source video. The number of frame grabs should be specified. Sizes for the frame grabs can also be specified. The result will be an ordered array of <canvas> or <img> elements, depending on the requirements of the caller.

• create a make_story method that takes the following params: type of container (string: canvas or img), number of images (integer), size of images (integer)). This method will return a promise that will include an array of canvases or imgs passed into the resolve callback.
• Seek to the appropriate segments of the video based on the number of desired images, and the duration of the video.

Currently, you must generate one of these yourself, and pass it into the method. It seems reasonable to ask frame-grab to do this for you if you just pass in a "img" or "canvas" string.

I use frame-grab inside of a dropzone.js application to fetch a video thumbnail for each added file. If i add a lot of files, the frame-grab function may freeze the browser.

So is there a way to run it async to await the result for each file? Also i would like to show a loading overlay during frame-grabbing, but async/await does not seem to work with the frameGrab function.

test

Earlier we disused how it was possible to use your plug-in to create thumbnails of video files that a user would select the src via File Input. Is there an example that you could piece together of this and provide an example in a zip or JSFiddle?

Test have been divided up into two groups: simple and complex.

The complex tests exercise code that works with actual <video> elements. These tests will (mostly) not run in PhantomJS due to its lack of support for media. The seemingly obvious solution to this is to pull in karma and automatically run these tests in "real" browsers. Karma makes this relatively simple, and we can even download and install Firefox on Travis in order to run these test in our CI environment as well.

Unfortunately, Karma's QUnit adapter seems to have some issues. I wasn't able to get any the <video> based tests to pass in Chrome when launched via Karma. I wasn't able to figure out the specific issue before I gave up and decided that I wasn't ready to invest days on this when I can easily run the tests in all browsers on my dev machine simply by starting up a server and pointing to the HTML page for the QUnit tests. Also, the Karma-bundled QUnit adapter doesn't report the number of tests run either, and a failing async test seems to cause the runner to hang.

Maybe I'll allocate some time to fix these issues or work around them in the future. That's what this case is for.

The simple tests cover everything not directly related to <video> elements, such as tests of the timecode to seconds logic, etc. These are run via a grunt task and, of course, in Travis.

The following snipit below will only work in firefox. How can I make the player take a screenshot at a specific time onload without pressing play and the grab frame button?

$("#videoPlayer").on("canplay",function() { this.currentTime = 13;});

Also, the plugin is not supported in Safari