• Stars
    star
    992
  • Rank 43,992 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A real time javascript webm encoder based on a canvas hack

Whammy: A Real Time Javascript WebM Encoder*

* with caveats

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"

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. 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.

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.

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, a fast but inefficient WebM encoder stops looking too bad.

Demo

http://antimatter15.github.com/whammy/clock.html

http://www.sysord.fr/Sysord/ressource_whammy.jsf

Basic Usage

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.

<script src="whammy.js"></script>

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

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.

encoder.add(context or canvas or dataURL);

Here, you can add a frame, this happens fairly quickly because basically all it's doing is running .toDataURL() on the canvas (which isn't exactly a speed-demon either, but it's acceptable enough most of the time) and plopping the result onto an array (no computation or anything). The actual encoding only happens when you call .compile()

encoder.compile(false, function(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

Whammy.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 Whammy.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.

More Repositories

1

ocrad.js

OCR in Javascript via Emscripten
JavaScript
3,451
star
2

jsgif

Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS
JavaScript
1,052
star
3

player

Almost certainly the first MP3 player of its kind.
JavaScript
276
star
4

cloudsave

Save to the cloud.
JavaScript
168
star
5

eigensheep

massively parallel experimentation with Jupyter and AWS Lambda 🐑🌩📒
Python
160
star
6

rgb-lab

convert between rgb and L*a*b color spaces in javascript
JavaScript
155
star
7

tesseract-rs

Rust bindings for Tesseract
Rust
113
star
8

weppy

Javascript WebP Library
JavaScript
111
star
9

gocr.js

OCR in Javascript via Emscripten
C
95
star
10

inpaint.js

Telea Inpainting Algorithm in JS
JavaScript
86
star
11

drag2up

Drag a file from your computer to any text field to upload and add link
JavaScript
83
star
12

surplus

Google+ Chrome Extension
JavaScript
68
star
13

summerTorrent

A bit torrent client written in JavaScript, on top of node.js
JavaScript
63
star
14

breadloaf

A draggable, dockable, notebook-style layout engine for React
JavaScript
53
star
15

bzip2.js

a bunzip implementation in pure javascript
JavaScript
37
star
16

obvious-rpc

fully strongly typed client-server communication that is so obvious you'll wonder why it hasn't always been like this
TypeScript
32
star
17

evm

Eulerian Video Magnification in the Browser with JSFeat
JavaScript
31
star
18

js-typed-array-sha1

sha1 with js typed arrays
JavaScript
29
star
19

swipe-gesture

Quick multitouch back/forward gesture for Chromebooks
JavaScript
28
star
20

js-id3v2

A Javascript implementation of ID3v2
JavaScript
28
star
21

autocircle

how to create a magical circle which adds people automagically
Ruby
23
star
22

google-music-protocol

reverse engineered google music protocol
Python
22
star
23

microwave

Mobile-friendly Javascript Data API based Google Wave Client
JavaScript
21
star
24

musicalpha

Upload songs to Google Music Beta on Linux
JavaScript
20
star
25

cloudfall

A simple text editor that syncs to dropbox
JavaScript
20
star
26

js-wikireader

An Offline Wikipedia Dump Reader in Javascript that probably only works on Chrome
JavaScript
19
star
27

jstorrent

A pure JavaScript BitTorrent 1.0 Implementation
JavaScript
17
star
28

heapqueue.js

A simple binary heap priority queue
JavaScript
17
star
29

boa

"its like OAB in python because snake"
Python
15
star
30

distributed-pi

Calculate Pi using distributed computing with JavaScript on Appengine
JavaScript
14
star
31

stick2

a simple stick figure animator with html5
JavaScript
13
star
32

chrome-dropbox

Dropbox + Chrome
JavaScript
13
star
33

hideelements

Chrome Extension. Background Page + Context Menu + Content Script
12
star
34

awesomeness

HTTP based federated protocol for real time hierarchical message manipulation
JavaScript
12
star
35

scratchpad

scratchpad used in khan academy
JavaScript
12
star
36

codemirror-jsx

CodeMirror Mode for React E4X/JSX
JavaScript
11
star
37

3d-sculpt

A simple 3D digital sculpting tool made with JS and HTML5 Canvas
10
star
38

antimatter15

Tiny projects of antimatter15
JavaScript
10
star
39

chromesearch

Desktop Search Engine Chrome Extension
JavaScript
10
star
40

zui

A zooming user interface
JavaScript
9
star
41

antimatter15.github.io

I can't think of a description so I'm describing my inability to think of a description
HTML
9
star
42

js-potrace

A JS port of the C# Vectorize port of the C Potrace
8
star
43

2d-thin-plate-spline

javascript thin plate spline in 2d
JavaScript
8
star
44

derpsacola

use mac accessibility api to scrape screen contents
Swift
8
star
45

chromecorder

Encode screencasts in a cool way copied off of sublimetext.com
CoffeeScript
8
star
46

gmailwave

Integrated Gmail and Wave Chrome Extension
JavaScript
8
star
47

js-ebml

a simple ebml parser in JS for no good reason
JavaScript
7
star
48

gayfish

experimental notebook programming environment
JavaScript
7
star
49

jsvectoreditor

a new version of vectoreditor
JavaScript
7
star
50

wave.js

A Node.JS implementation of the Wave Robot API
6
star
51

k5

differentiable graphics for react
JavaScript
6
star
52

untar.js

untar salvaged from bitjs
JavaScript
6
star
53

readability-iframe

Chrome extension for sites that want to use Readability
JavaScript
5
star
54

creamie

Chrome + Streamie (port of both client and server to Chrome)
JavaScript
5
star
55

pinball

coffeescript pinball game
CoffeeScript
5
star
56

w2_embed

Deep Integration Wave Embed API
JavaScript
5
star
57

autograph

the best most easiest way to graphql
TypeScript
5
star
58

surplus-lite

Google+ notifications in Chrome without colossal memory usage.
JavaScript
5
star
59

omeglebot

A simple Omegle robot that repeats previous conversation phrases semi-intelligently
JavaScript
5
star
60

py-wikireader

A simple offline Wikipedia dump reader
Python
5
star
61

pepper

Use face.com api and canvas to interactively, fancily and automagically add the casually pepper spraying cop to any picture
JavaScript
5
star
62

derp

kinda like version control or something
JavaScript
4
star
63

pdftotext-wasm

poppler pdftotext compiled with emscripten
Dockerfile
4
star
64

facebook-export

Export facebook phone and other data with a screen scraper into CSV format
CoffeeScript
4
star
65

exthub

A self updating, collaborative extension platform
4
star
66

venn-google

Venn Diagrams using Google Suggest
JavaScript
4
star
67

sqlite-vfs-js

TypeScript
4
star
68

espkey

A portable hyperlocal wireless social experiment
C++
4
star
69

x-no-wiretap

Aid the NSA's unwitting collection of domestic internet traffic!
JavaScript
4
star
70

hqx.js

hqx in js
JavaScript
4
star
71

jove

ipython notebook for node.js
JavaScript
4
star
72

franchise-client

database connectors for franchise
JavaScript
4
star
73

speed

Read in a subtitles track and speed up parts of TV shows which don't have talking
4
star
74

wsl

pipe to websocket
JavaScript
4
star
75

fluidizer

Bookmarklet which converts arbitray fixed-width layouts into fluid layouts
JavaScript
4
star
76

d3-pinch-zoom

pinch to zoom for d3 on desktop browsers
JavaScript
4
star
77

anodize

New Chrome Packaged App BitTorrent Client, mostly just a lot of NodeJS modules stuck together
JavaScript
3
star
78

vx-comet

A lightweight implementation of the Bayeux protocol
JavaScript
3
star
79

bitjs

Binary Tools for JavaScript
JavaScript
3
star
80

crossave

Chrome OS File Manager Handler powered by Cloud Save that uploads to a bucketload of services.
JavaScript
3
star
81

evilmeter

chrome extension that detects user agent sniffing
3
star
82

sublime-autobuild

Automatically build on save in Sublime Text 2
Python
3
star
83

fb-grapher

Make purty graphs out of fb data!
JavaScript
3
star
84

dropsync

dropbox syncing for chrome os
3
star
85

rsvgshim

A SVG Shim that renders with RaphaelJS
JavaScript
3
star
86

groebner.js

javascript implementation of buchberger's algorithm for computing a polynomial groebner basis
JavaScript
3
star
87

sprite-codec

A fast screen media optimized codec for embedding in websites
3
star
88

doge

wow. such commit. very push.
Python
3
star
89

identicon-login

A new approach to fighting phishing
PHP
3
star
90

wordless

extract plain text from a word document
JavaScript
3
star
91

kindlespark

Sparknotes -> Kindle via YQL
2
star
92

tensorflow-renderer

first steps toward trying to build a mesh renderer in tensorflow
Jupyter Notebook
2
star
93

retcon

TypeScript
2
star
94

articles

hopefully dis gon b gud
ASP
2
star
95

react-use-nav

a simple routing system for react
2
star
96

timeliner

automatically enable timeline for facebook
2
star
97

facetex

TeX for Facebook Chat
JavaScript
2
star
98

progressive-json

Parse JSON before all of it is loaded
JavaScript
2
star
99

wave-unread-navigator

Show gmail-like arrows listing if unread blips in an open wave are above or below.
JavaScript
2
star
100

keyboard

some failed experiment from a while ago
2
star