npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

video-recorder

v0.0.1

Published

Experimental browser module for recording the contents of a <video> tag.

Downloads

12

Readme

video-recorder

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.

demo

See the demo here: http://projects.joreteg.com/video-recorder/

why?

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: https://developer.mozilla.org/en-US/docs/data_URIs. 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: https://github.com/HenrikJoreteg/fauxplay (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.

installing

npm install video-recorder

example

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

<!-- 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>
<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) {
      recorder.stop();
      this.innerHTML = 'Record';
    } else {
      recorder.record();
      this.innerHTML = 'Pause';
    }
  });

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

  reset.addEventListener('click', function () {
    recorder.stop();
    recorder.reset();
  });
</script>

license

MIT

credits

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