Recorder Documentation

Getting Started

We have taken care to make sure Recorder is easy to integrate with your website, to get started simply include this script tag in the <head> of your html document:

<html>
  <head>
    <script src="http://www.webcamsnapper.com/recorder.js"></script>
    <!-- For SSL use: https://webcamsnapper-hrd.appspot.com/recorder.js --> 
  </head>
  ... 

The Recorder script is small (only 8kb compressed) so won't slow down your page load times. All other assets are loaded on demand from a global content delivery network and cached for future use.

Once included on your site, you can control Recorder using the Javascript API

When a user records a video its encoded on the client side and streamed up to our recording server. Once the user clicks 'save' this video is available for download from a temporary HTTP url. We also provide links to a PNG thumbnail and MP4 versions of the video.

These videos only stored on our servers for 24 hours. If you want to keep user recorded videos you should save them to your server or transfer them to a cloud storage service such as S3.

If you wish to host the recording server yourself this is possible but takes some time to setup and configure.

Please note since its more complex to host we do not provided a non-commerical verison of Recorder. In order to use this product you must subscribe to our service or purchase a Pro license.

Javascript API

There are 4 methods available on the global 'Recorder' object. Call 'configure' to set the global config, 'show' to load the Recorder in an overlay window, or 'embed' to embed the Recorder into your page. Optionally you can also call 'backToCapture' to restart the recording session.

Here is a quick example showing how to use the Recorder API with the JavaScript framework JQuery.

$(function(){
  
  // Set global config (this is optional)
  Recorder.configure({
    size: 'small', // set the default size to small
    bandwidth: 180 // set the max upload bandwidth to 180 kbps
    fps: 15 // set the video capture to 15 frames per second
    // see configuration section of docs for full list.
  });
  
  // Embed recorder into the page
  Recorder.embed({ // renders recorder in the page
    target: 'video_recoder', // pass the id of the div where you want to embed 
    complete: function(outputs){ // called when the video has been saved
      // e.g. ajax call to save video on server
      $.post('/my_save_handler', outputs, function(){
        alert('Video saved');
      });
    }
  });
  
  // Load the recorder when a button is clicked
  $('#record_button').click(function(){
    Recorder.show({ // open snapper in an overlay window
      complete: function(outputs){ // called when the video has been saved
        // set the output values into form fields 
        $('#png_url').val(outputs['png']); // png thumbnail of video
        $('#flv_url').val(outputs['flv']); // used for playback in flash video player
        $('#mp4_url').val(outputs['mp4']); // used for iphone / android phones
        $('#3gp_url').val(outputs['3gp']); // used for older mobile phones
      }, 
      // instance config 
      resolution: '640x480' // override the default size (320x240), set it to 640x480 
    });
  });
  
});  

The example above uses the jQuery framework. We don't include jQuery with the Recorder so if you wish to use it with Recorder you should include it in your document. If you are using a different JavaScript framework you will need to adjust the code above to fit your framework.

Configuration Options

We have tried to pick sensible defaults for all configuration options, however we know that sometimes you need to tweak things. Here is a list of the config settings you can change along with an example setting the global config.

      
// Set global config
Recorder.configure({
  
  // Change the size of the flash widget (not the recorded video)
  size : 'small', 
  
  // tiny => 320x240
  // small => 400x300 
  // standard => 480x360 
  // medium => 560x420 
  // large => 640x480 

  // Change the border style
  border: 'round shadow', // other option is 'square shadow'
  
  // Adjust video recording settings
  resolution: '320x240', // ('320x240', '480x360', '640x480') 
  quality: 80, // (0-100)
  fps: 20, // (10-24) frames per second
  bandwidth: 150, // client upload bandwidth recommended < 200 kbps.
    
  // Adjust audio options
  gain: 100, // (0-150)
  silence_level: 0, // (0-1.0) best left at 0
  silence_timeout: 0 // (seconds) best left at 0
  
}); 

Further Examples

For more examples please see embed example and popup example