Simple library for creating ventriloquist dummy effects in canvas - because that's what everyone needs, right?
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
TODO.md
api-demo.js
chuckles.js

README.md

Chuckles

A simple library for creating ventriloquist dummy effects in canvas – because that's what everyone needs, right?

Simply define an image, a “mouth region” and where the “mouth” should move to, then bind to an HTML input or a Web Audio API MediaStreamAudioSourceNode and watch the magic happen.

Works best when connected to a live microphone feed using WebRTC.

Caveats

I built this for a presentation at SydJS (thus it has limited browser support) and do not really expect it to have much use in the wild. If you can find a practical use for it, let me know.

Examples

NOTE: I built these demos to work in Chrome only, as it was the only browser at the time that supported both the Web Audio API and getting a microphone stream via navigator.getUserMedia(). However, it’s been updated to use non-prefixed APIs so it should work in any browser that supports them.

  • Basic demo - hard-coded image and mouth co-ordinates
  • Full demo - upload an image and draw the mouth region yourself

Documentation

Erm, there isn’t any proper documentation right now, because I threw this together in a hurry. See also my lack of faith of this having any practical use.

However, I’ve thrown together a basic in-code API usage example in the api-demo.js file of this repository.

Browser support

The canvas drawing code and HTML input binding should be supported in any decent modern browser that supports ECMAScript 5 (though I haven’t actually tested this theory, so there might be some surprises).

Binding to a live microphone stream is only available in Chrome 24+ with the Web Audio Input flag enabled in chrome://flags. Firefox 18+ allows microphone access, but support for the Web Audio API is still a work in progress.