How to Snap a Photo From a Webcam Using JavaScript

Webcam JavaScript Code Example
Easily access your webcam with JavaScript

We’ve made it easy to take a photo from most popular webcams using our kiosk software and a little JavaScript.  In this article I’ll provide a detailed JavaScript webcam example complete with source code to help you get started quickly.

Webcams have many uses in unattended payment applications like self-service kiosks.  We’ve found our clients often like to snap a photo of a customer completing a transaction.  This especially comes in handy when disputing chargebacks.

Follow along as we explain the JavaScript webcam code example.

The example website we’ve create to get you started quickly is pictured below and has the following features:

  • Enables and disable the webcam
  • Takes a snapshot synchronously and asynchronously
  • Checks if the webcam is enabled
  • Includes a Result Output window which displays diagnostics for troubleshooting
Webcam JavaScript Example App
Webcam JavaScript Example App

You can see from the following webcam JavaScript code example the basic flow for interacting with the webcam via JavaScript is as follows…

  1. Initialize the KioskSimple API “window.external.KioskSimpleAPIInit();”
  2. Wire-up the webcam events (OnSnapshot, OnEnabled, etc…)
  3. Enable the webcam and start snapping photos.

How to get this JavaScript Webcam example working with a free demo of KioskSimple

KioskSimple configuration settings

  1. Download the example here called “Webcam Plugin Example – Web JavaScript” and store the uncompressed folder on your desktop.
  2. Download and install the free demo of KioskSimple.
  3. Connect a webcam to your computer.
  4. Run the KioskSimple Configuration Tool and navigate to the PLUGIN STORE.
  5. Install the Webcam Plugin.  The configuration tool will restart and some dependencies will be installed.  You should now see a menu option called CAMERAS.  Navigate there and select CONFIGURE.
  6. Under the Device Settings ensure the device is enabled and select your webcam and save your settings.
  7. Press TEST CAMERA to ensure your webcam is working properly.
  8. Navigate to BROWSER->BROWSER SETTINGS and set the Start-up Web Page to the HTML file in this example.  In the case of my PC the path is “file:///c:/Users/Andrew/Desktop/ExampleAppWebcamJS/WebcamTest.html”.  This could also point to your web server if you stored the folder there, but I find it easier to store the files locally for this example.
  9. Save your settings and close the KioskSimple Configuration Tool.
KioskSimple webcam configuration screen
KioskSimple webcam configuration screen

Running the webcam example in KioskSimple

  1. Start KioskSimple.
  2. Select “Try the Demo” and then “Test Mode”.
  3. Now you’ll see the webcam website example shown above.  Press “Enable Webcam” and the device should be ready to start snapping photos.  Now if you take a snapshot you should see the Result Output change.
  4. When you’re done press ESC and any password will work while KioskSimple is unregistered.

Got Questions?

Please contact us and we’ll get you in touch with a developer.  We offer free phone and email technical support for all of our code examples.  Try finding that anywhere else in this industry.

We’re dedicated to making your next kiosk project a success and we’re happy to hold your hand through the hardware integration.

Andrew Savala
Follow me

Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.
Andrew Savala
Follow me

Author: Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.