Namespace Webcam

Webcam.attach("#my_camera");

This will activate the user's webcam, ask for the appropriate permission, and begin showing a live camera image in the specified DOM element.

Note that the browser itself handles asking the user for permission to use their camera. WebcamJS has no control over this, so there is no way to style the UI. Each browser does it a little differently, typically a bar at the top of the page, and Flash does it inside the view area.

To use the library again after resetting, you must call Webcam.attach() and pass it your DOM element.

Webcam.snap(data_uri => {
  document.getElementById("my_result").innerHTML = `<img src="${data_uri}">`;
});

Your function is also passed a HTML5 Canvas and a 2D Context object, so you can gain access to the raw pixels instead of a compressed image Data URI. These are passed as the 2nd and 3rd arguments to your callback function:

Webcam.snap( (data_uri, canvas, context) => {
  // copy image to my own canvas
  myContext.drawImage(canvas, 0, 0);
});

If you would prefer that WebcamJS simply copy the image into your own canvas, it can do that instead of generating a data URI (which can be an expensive operation). To do this, simply pass your canvas object to the Webcam.snap() method, as the 2nd argument, right after your callback function:

// assumes 'myCanvas' is a reference to your own canvas object, at the correct size
Webcam.snap(() => {
  // the webcam image is now in your own canvas
}, myCanvas );

The Webcam.snap() function delivers your image by way of a client-side JavaScript Data URI. The binary image data is encoded with Base64 and stuffed into the URI. You can use this image in JavaScript and display it on your page. However, the library also provides a way to decode and submit this image data to a server API endpoint, via binary AJAX:

Webcam.snap(data_uri => {
  // snap complete, image data is in "data_uri"
  Webcam.upload(data_uri, "myScript.php", (code, text) => {
    // Upload complete!
    // "code" will be the HTTP response code from the server, e.g., 200
    // 'text' will be the raw response content
  });
});

The image data is uploaded as part of a standard multipart form post, and included as a form element named webcam. To gain access to this data, write some server-side code like this (PHP shown):

// be aware of file / directory permissions on your server
move_uploaded_file($_FILES['webcam']['tmp_name'], 'webcam.jpg');

Treat the uploaded data as if you were receiving a standard form submission with a <input type="file" name="webcam"> element. The data is sent in the same exact way.