JavaScript HTML CSS
Switch branches/tags
Nothing to show
Permalink
Failed to load latest commit information.
.gitignore Initial commit Dec 17, 2015
LICENSE Initial commit Dec 17, 2015
README.md update the readme adding ffx dev edition to supported browsers Jan 20, 2016
add-beep-to-silent-video.html update reference to script Mar 16, 2016
add-beep-to-silent-video.js Renaming take tracks out of streams to add beep to silent video for c… Feb 11, 2016
display-live-video-and-audio-from-mediadevices-getusermedia.html update reference to script Mar 16, 2016
display-live-video-and-audio-from-mediadevices-getusermedia.js Rename title of example for clarity Feb 11, 2016
download-blob.html fix indent Dec 21, 2015
download-blob.js fix indent Dec 21, 2015
filter-and-record-live-audio.html rename alter-audio-stream to filter-and-record-live-audio for clarity Feb 11, 2016
filter-and-record-live-audio.js rename alter-audio-stream to filter-and-record-live-audio for clarity Feb 11, 2016
filter-and-record-live-video.html rename alter video stream to filter and record live video for clarity Feb 11, 2016
filter-and-record-live-video.js rename alter video stream to filter and record live video for clarity Feb 11, 2016
get-canvas-stream.html Rename canvas-stream to get-canvas-stream for clarity Feb 11, 2016
get-canvas-stream.js Rename canvas-stream to get-canvas-stream for clarity Feb 11, 2016
index.html WIP looping mosaic demo Mar 30, 2016
looping-mosaic.html WIP looping mosaic demo Mar 30, 2016
looping-mosaic.js WIP looping mosaic demo Mar 30, 2016
media-recorder-mimetypes.html make styles more responsive Dec 22, 2015
media-recorder-mimetypes.js add different mimetypes recording examples Dec 21, 2015
mediastream-constructor.html Simply remove ribbon from file Feb 11, 2016
mediastream-constructor.js Add example of creating MediaStream using the constructor Jan 20, 2016
record-canvas-to-video.html Rename canvas-stream-capture to record-canvas-to-video for clarity, a… Feb 11, 2016
record-canvas-to-video.js Swap order to avoid black frame Mar 30, 2016
record-live-audio.html Make sure both record examples are consistent Feb 11, 2016
record-live-audio.js Make sure both record examples are consistent Feb 11, 2016
record-video-and-audio.html Add simple example for recording video and audio Feb 11, 2016
record-video-and-audio.js Make sure both record examples are consistent Feb 11, 2016
render-and-filter-video-into-canvas.html Add interactivity via slider to control cut off point Feb 11, 2016
render-and-filter-video-into-canvas.js delete irrelevant line Feb 11, 2016
render-video-into-canvas.html Add simpler video to canvas example Feb 11, 2016
render-video-into-canvas.js Add simpler video to canvas example Feb 11, 2016
styles.css Add simple example for recording video and audio Feb 11, 2016
using-live-audio-in-web-audio-context.html Renaming for clarity Feb 11, 2016
using-live-audio-in-web-audio-context.js Renaming for clarity Feb 11, 2016

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!