JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
add-beep-to-silent-video.html
add-beep-to-silent-video.js
display-live-video-and-audio-from-mediadevices-getusermedia.html
display-live-video-and-audio-from-mediadevices-getusermedia.js
download-blob.html
download-blob.js
filter-and-record-live-audio.html
filter-and-record-live-audio.js
filter-and-record-live-video.html
filter-and-record-live-video.js
get-canvas-stream.html
get-canvas-stream.js
index.html
looping-mosaic.html
looping-mosaic.js
media-recorder-mimetypes.html
media-recorder-mimetypes.js
mediastream-constructor.html
mediastream-constructor.js
record-canvas-to-video.html
record-canvas-to-video.js
record-live-audio.html
record-live-audio.js
record-video-and-audio.html
record-video-and-audio.js
render-and-filter-video-into-canvas.html
render-and-filter-video-into-canvas.js
render-video-into-canvas.html
render-video-into-canvas.js
styles.css
using-live-audio-in-web-audio-context.html
using-live-audio-in-web-audio-context.js

README.md

MediaRecorder

This is a collection of MediaRecorder examples.

You can take a look at the examples online.

Requirements

Hardware requirements

  • A working webcam
  • Speakers or audio output

Software requirements

  • Firefox 45. This is a Firefox technical demo. So it might not work on your browser, if it doesn't implement what we're demoing. At the time of writing (January 2016), you need to download either Firefox Developer Edition or Firefox Nightly.
  • Support for canvas.captureStream (this lets us get a video stream out of a canvas tag)
  • Support for MediaRecorder (this lets us encode a video file natively in the browser, without using additional JS libraries)

Note: MediaRecorder is an upcoming API part of the W3C MediaCapture standard. canvas.captureStream is based on another part of the same W3C standard. There's nothing proprietary or exclusive to Firefox here, other than the fact that other browsers do not implement these features yet. Once they do, these examples will work in them too!

How to run the examples

Just download this repository and open index.html in your browser (see requirements above). It can't be easier!