Experimental browser module for recording the contents of a <video> tag.
Last updated 7 years ago by henrikjoreteg .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install video-recorder 
SYNC missed versions from official npm registry.


Experimental browser module for recording contents of a <video> tag by taking dataURI snapshots of it.

Written as a CommonJS module, so it works out of the box with browserify. If using with AMD or as standalone use video-recorder.bundle.js file instead.

Tested primarily in Chrome.


See the demo here:


You can use it to record and play back video at approximately 10fps in chrome. I was largely curious how well it would work. Turns out it's not too shabby.

The data is stored in an array as Base64 encoded PNGs using dataURIs: This could be uploaded to a server and stitched into a video file using something like ffmpeg.

But it can also just be played back to the user using: (as seen in the demo).

Obviously, there's no sound being recorded, but it could be interesting to mix this with screen capture support for in-browser screencast recordings.


npm install video-recorder


<video id="video"></video>
<img id="demo">
  <button id="record">Record</button>
  <button id="play">Play</button>
  <button id="reset">Reset recording</button>

<!-- some packages for getting and attaching user media -->
<script src="node_modules/getusermedia/getusermedia.bundle.js"></script>
<script src="node_modules/attachmediastream/attachmediastream.bundle.js"></script>
<!-- a package for playing back the recording -->
<script src="node_modules/fauxplay/fauxplay.bundle.js"></script>

<script src="video-recorder.bundle.js"></script>
  var image = document.getElementById('demo');
  var video = document.getElementById('video');
  var record = document.getElementById('record');
  var play = document.getElementById('play');
  var reset = document.getElementById('reset');
  var recorder;

  getUserMedia(function (err, stream) {
    if (err) return console.log(err);

    attachMediaStream(stream, video, {muted: true});

    recorder = window.recorder = new VideoRecorder(video);

  record.addEventListener('click', function () {
    if (recorder.running) {
      this.innerHTML = 'Record';
    } else {
      this.innerHTML = 'Pause';

  play.addEventListener('click', function () {
    fauxplay(, image, {loop: true, duration: recorder.runningTime})

  reset.addEventListener('click', function () {




If you like this follow @HenrikJoreteg on twitter <3. This is a small part of my larger, grander project efforts related to webrtc:

Current Tags

  • 0.0.1                                ...           latest (7 years ago)

1 Versions

  • 0.0.1                                ...           7 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (4)
Dependents (0)

Copyright 2014 - 2016 © |