Instant webcam photo uploads for your website

If your site says UPLOAD photo why not also TAKE photo?

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. Give it a go or watch our demo video

Get started
Try it!

  • Use cases

    Building trust & safety for online markets and the dating industry.

    Powering the fun on social networks, competitions, and photo sites.

    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. JPEG and PNG output, optional watermark
    4. Optional filters & photo effects
    5. Adjust, zoom, countdown, flip, & more

  • Customers using Snapper Pro

    1. Airbnb on Snapper

    2. DailyBooth on Snapper

    3. Brizzly on Snapper

    4. White Label Dating on Snapper

    5. 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>
demo

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>
demo

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>
demo

For more examples, have a look at the documentation →