• Public
  • Public/Protected
  • All

WebcamJS is a small (~3K minified and gzipped) standalone JavaScript library for capturing still images from your computer's camera, and delivering them to you as JPEG or PNG Data URIs. The images can then be displayed in your web page, rendered into a canvas, or submitted to your server. WebcamJS uses HTML5 getUserMedia, but provides an automatic and invisible Adobe Flash fallback.


Type Aliases

ImageFormat: "jpeg" | "png" | "default"

Format of the images taken by the webcam.

SnapCallback: ((dataUri: string, canvas: HTMLCanvasElement, context2D: CanvasRenderingContext2D) => void)

Type declaration

    • (dataUri: string, canvas: HTMLCanvasElement, context2D: CanvasRenderingContext2D): void
    • A user-defined callback that may be passed to Webcam.snap(callback). It is invokes once an image was taken successfully.


      • dataUri: string
      • canvas: HTMLCanvasElement
      • context2D: CanvasRenderingContext2D

      Returns void


  • attach(selector: string): void
  • WebcamJS is initialized and activated by attaching a live camera viewer to a DOM element. The DOM element must already be created and empty:


    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.


    • selector: string

      CSS selector for the DOM element to which the webcam is attached.

    Returns void

  • freeze(): void
  • Freeze the current live camera frame, allowing the user to preview before saving.

    Returns void

  • Remove an event listener for a given event. Pass in the event name, and the callback function to remove. Omit the callback reference to remove all listeners.

    Type Parameters


    • eventName: K

      Name of the event for which to remove a listener.

    • Optional eventCallback: WebcamEventMap[K]

      Callback to remove. If omitted, removes all callback for the given event.

    Returns void

  • Register an event listener for a given event. Pass in the event name, and a callback function.

    Type Parameters


    • eventName: K

      Name of the event for which to attach a listener.

    • eventCallback: WebcamEventMap[K]

      Callback to attach.

    Returns void

  • reset(): void
  • To shut down the live camera preview and reset the system, call Webcam.reset(). This removes any DOM elements we added, including a Flash movie if applicable, and resets everything in the library to the initial state.

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

    Returns void

  • Updates a global webcam setting with the given new value.

    Type Parameters


    • setting: K

      Name of a settings to change.

    • newValue: WebcamSettings[K]

      New value for the setting.

    Returns void

  • Updates the global webcam settings with the given settings.


    Returns void

  • snap(callback: SnapCallback, canvas?: HTMLCanvasElement): void
  • To snap a picture, just call the Webcam.snap() function, passing in a callback function. The image data will be passed to your function as a daata URI, which you can then display in your web page, or submit to a server:

    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 );


    • callback: SnapCallback

      A callback function that is invoked with the image data once the images was taken.

    • Optional canvas: HTMLCanvasElement

      Optional. If given, draws the image to this canvas.

    Returns void

  • unfreeze(): void
  • Cancel the preview (discard image) and resume the live camera view.

    Returns void

  • upload(imageData: string, endpointUrl: string, onComplete: ((httpStatusCode: number, rawResponseContent: string) => void)): void
  • Upload a saved image to your server via binary AJAX. Fires progress events.

    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.


    • imageData: string

      Data of the image to be sent to the server, usually the data URI.

    • endpointUrl: string

      URL to which the image data is sent.

    • onComplete: ((httpStatusCode: number, rawResponseContent: string) => void)

      Callback that is invoked once the upload is complete. You can alternatively specify the callback using Webcam.on("uploadComplete", callback).

        • (httpStatusCode: number, rawResponseContent: string): void
        • Fires once when the upload completes.


          • httpStatusCode: number

            Status code as received from the server.

          • rawResponseContent: string

            The raw response content as received from the server.

          Returns void

    Returns void

Generated using TypeDoc