Instant webcam photo & video uploads for your website

Capturing photos and videos has never been easier!

Over 80% of people have webcams, yet only a few big sites support them. Simply drop in a couple of lines of JavaScript and your users can instantly publish webcam photos & videos. Give it a go or watch our demo video

Get started
Try it!
  • Use cases

    Building trust & safety for online markets, recruitment, and
    the dating industry. Powering the fun on social networks and competitions. Priced for sites of all sizes with free, hosted, and pro versions.

  • Features

    1. Overlay or embed to fit your design
    2. Dead easy server-side integration
    3. All common file types outputted (jpeg, png, fov, mp4)
    4. Optional photo filters & effects
    5. Adjust, zoom, countdown, flip, & more
  • Customers using Snapper Pro

    1. Airbnb on Snapper

    2. SpareRoom on Snapper

    3. Dailybooth on Snapper

    4. Brizzly on Snapper

    5. White Label Dating on Snapper

    6. Airbnb on Snapper

Integrate with your site in under 5 minutes

View the full documentation →

HTML forms

Taking inspiration from HTML5 forms Snapper adds something browsers are missing: <input type="webcam" />

Include this tag in your form and Snapper will render a "Take Photo" button, which when clicked will reveal the Snapper in an overlay.

After taking a photo Snapper will pass the image to the form so you can save it on your server. It can't get much easier than that.

<html>
  <head>
    <!-- load Snapper -->
    <script src="http://www.webcamsnapper.com/latest.js"></script>
  </head>
  <body>
    <form method="post" action="/save_snap">
      <input type="webcam" name="snap" />
      <input type="submit" />
    </form>
  </body>
</html>

Embed in page

Snapper comes with a simple JavaScript API making it easy to integrate into your page.

Use the Snapper.embed() function to replace any div with a Snapper widget.

Pass a callback function to handle the saved image however you wish. In this example we display the snap in page.

Other common actions might be to pass the image url into a form or post it to the server using Ajax.

<html>
  <head>
    <!-- load Snapper -->
    <script src="http://www.webcamsnapper.com/latest.js"></script>
    <script>
      Snapper.embed({target: 'snapper', complete: function(image){
        var snap = document.getElementById('snap');
        snap.innerHTML = '<img src='+image+' />';
      }});
    </script>
  </head>
  <body>
    <div id="snapper"></div><div id="snap"><div>
  </body>
</html>

JavaScript overlay

Another option for integration is to show Snapper in a modal overlay window (sometimes called a lightbox). This works well with any design and brings the Snapper into full focus.

Use the Snapper.show() function to open the overlay window, passing a callback function to handle the saved image.

In this example we use it to set the value of a hidden form field then submit the form.

In all the examples shown here we have used simple code, obviously you can use Snapper with any JavaScript framework such as JQuery!

<html>
  <head>
    <!-- load Snapper -->
    <script>
      function submitForm(image){
        alert('saved snap url will be passed in query string');
        var form = document.forms[0];
        var input = form.elements[0]; 
        input.value = image;
        form.submit();
      };
    </script>
    <script src="http://www.webcamsnapper.com/latest.js"></script>
  </head>
  <body>
    <a href="#" onclick="Snapper.show(submitForm)">Take Photo</a>
    <form><input type="hidden" name="snap" value="" /></form>
  </body>
</html>

For more examples, have a look at the documentation →

Video

The easiest way to integrate Recorder into your site is with a modal overlay window (sometimes called a lightbox). This works well with any design and brings the Recorder into full focus.

Use the Recorder.show() function to open the overlay window, passing a callback function to handle the links to created videos and thumbnail image.

In this simple example we use it to set the value of a hidden form field to be the url of the .flv (flash) video, then submit the form.

Of course you can use Recorder with any JavaScript framework such as JQuery!

<html>
  <head>
    <!-- load Snapper -->
    <script>
      function submitForm(outputs){
        alert('saved flv url will be passed in query string');
        var form = document.forms[0];
        var input = form.elements[0]; 
        input.value = outputs['flv'];
        form.submit();
      };
    </script>
    <script src="http://www.webcamsnapper.com/recorder.js"></script>
  </head>
  <body>
    <a href="#" onclick="Recorder.show(submitForm)">Record Video</a>
    <form><input type="hidden" name="flv" value="" /></form>
  </body>
</html>

For more examples, have a look at the documentation →