react-whammy - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "react-whammy",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "A React Component For Real-time Javascript WebM Video Encoder",
		@@ -5,0 +5,0 @@ "main": "whammy.js",

README.md

		@@ -1,16 +0,11 @@
		# React Whammy: A React Component for Real Time Javascript WebM Encoder
		# React Whammy: A React Component for Real Time JavaScript WebM Encoder

		This is a React Component for the original JS Library > [Whammy](https://github.com/antimatter15/whammy).

		![screenshot of Weppy, two clocks with the one on the right embedded inside a video while the left is made in canvas, above the clocks is a progress bar at 100% and below the clocks is a status which reads "Compiled video in 17ms, file size 272KB" adjacent to a link titled "Download WebM"](https://github.com/sysord/whammy/blob/master/screenshot.png?raw=true)
		For detail explanation, please visit original library. Essentially, this is a library to convert Canvases into a .webm using JS with easy to use API and adjustable FPS.

		This is sort of a conceptual reversal (or not, this might just be making the description needlessly confusing) of one of my older projects, [Weppy](https://github.com/antimatter15/weppy). First, what Weppy did was it added support for WebP in browsers which didn't support it by converting it into a single-frame video. This is instead predicated on the assumption that the browser already has support for WebP (at this point, it means it only works on Chrome since it's the only browser which actually supports WebP), not only decoding WebP but encoding it as well.
		All the credit goes to the original creator, this library just fixed some critical [bugs](https://github.com/antimatter15/whammy/issues/43) and convert to React Component.

		The cool thing about WebP which was exploited in Weppy is that it's actually based on the same codec as WebM, On2's VP8. That means the actual image data, when the container formats are ignored, are virtually interchangable. With a catch: it's intraframe only.
		## Demo (Using Chrome)

		So it's a video encoder in that it generates `.webm` files which should play in just about any program or device which supports the WebM format. But interframe compression is actually a fairly important thing which could reduce the file size by an order of magnitude or more.

		But, there isn't too much you can do on the client side in the ways of encoding stuff. And whatever you do, you basically can't do interframe compression (aside from some really rudimentary delta encoding). More or less, when your only alternative is to maintain an array of DataURL encoded frames or encoding it (rather slowly) as a [GIF](https://github.com/antimatter15/jsgif), a fast but inefficient WebM encoder stops looking too bad.

		## Demo

		http://antimatter15.github.com/whammy/clock.html
		@@ -22,12 +17,15 @@

		First, let's include the JS file. It's self contained and basically namespaced, which is pretty good I guess. And it's not too big, minified it's only about 4KB and gzipped, it's under 2KB. That's like really really tiny.
		Install and import it into the react project

		<script src="whammy.js"></script>
		npm -i s react-whammy
		import Whammy from 'react-whammy'

		The API isn't terrible either (at least, that's what I'd like to hope)
		Initialise the Encoder

		var encoder = new Whammy.Video(15);
		var encoder = new Whammy.Video(15)

		That `15` over there is the frame rate. There's a way to set the individual duration of each frame manually, but you can look in the code for that.
		That `15` over there is the frame rate.

		Add Canvas

		encoder.add(context or canvas or dataURL);
		@@ -37,16 +35,6 @@

		var output = encoder.compile();
		encoder.compile(false, (output) => {
		const video = URL.createObjectURL(output)
		})

		Here, output is set to a Blob. In order to get a nice URL which you can use to stick in a `<video>` element, you need to send it over to `createObjectURL`

		var url = (window.webkitURL \|\| window.URL).createObjectURL(output);

		And you're done. Awesome.

		## Documentation

		`Weppy.fromImageArray(image[], fps)` this is a simple function that takes a list of DataURL encoded frames and returns a WebM video. Note that the images have to all be encoded with WebP.

		`new Weppy.Video(optional fps, optional quality)` this is the constructor for the main API. quality only applies if you're sending in contexts or canvas objects and doesn't matter if you're sending in encoded stuff

		`.add(canvas or context or dataURL, optional duration)` if fps isn't specified in the constructor, you can stick a duration (in milliseconds) here.

clock.html

testing/lib.js

testing/pinball.html

testing/schema.js

testing/whammy.js

react-whammy - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics