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

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.

var webcam = null;

//Assuming using jQuery, lets wait until the document has finished loading. 
$(document).ready(function () {
    //This reaches out to KioskSimple and requests API initialization
    try{
        window.external.KioskSimpleAPIInit();
    }
    catch (err) {

        //If we got here then we are not running within KioskSimple, lets disable all buttons and output to user
        $("#btnEnableWebcam").prop('disabled', true);
        $("#btnDisableWebcam").prop('disabled', true);
       
        outputActionResult("Initialization", "Something went wrong intitializing KioskSimple. Error:" + err)
        return;
    }
    //If we got this far, we are successfully running within KioskSimple's local code domain
    if (K()) {
        // hook up handler for snapshot async action
        webcam = KioskSimple.Plugins.GetPlugin("Webcam");
        if (webcam != null) {
            webcam.OnSnapshot = OnSnapshot;
            webcam.OnEnabled = OnEnabled;
            webcam.OnDisabled = OnDisabled;
            webcamOnError = OnError;

            setupUIButtons();
            outputActionResult("Initialization", "Kiosk Simple loaded.")
        }
       
    }

});

//Not 100% needed but a nice shortcut to determine if KS is preset.
function K() {
    return !(typeof KioskSimple === 'undefined')
}

function OnDisabled() {
    outputActionResult("Disabled", "Disabled")
}

function OnEnabled() {
    outputActionResult("Enabled", "Enabled")
}

function OnError(err) {
    outputActionResult("Error", err)
}

//Plugin Snapshot handler, this will fire when the TakeSnapshotAsyn method of the webcam is executed.
function OnSnapshot(path, filename) {
   
    outputActionResult("OnSnapshot","Path:"+path+",filename:"+filename )
}


function setupUIButtons() {
    $("#btnEnableWebcam").click(function () {
        KioskSimple.Plugins.GetPlugin('_devices').EnableAllDevicesByCategory("Camera");
    });

    $("#btnDisableWebcam").click(function () {
        KioskSimple.Plugins.GetPlugin('_devices').DisableAllDevicesByCategory("Camera");
    });

    $("#btnTakeSnapshot").click(function () {

        if (webcam.Enabled()) {
            var result = webcam.TakeSnapshot("myfileid");
            outputActionResult("Snapshot taken", result)
        }

    });
    
    $("#btnTakeSnapshotAsync").click(function () {
        if (webcam.Enabled()) {
            webcam.TakeSnapshotAsync("myfileidasync");
            //OnSnapshot handler will execute upon completion of this action
        }
    });

    $("#btnIsEnabled").click(function () {
        
            var result = webcam.Enabled();
            outputActionResult("IsEnabled", result)
            //OnSnapshot handler will execute upon completion of this action
        
    });

}

function outputActionResult(actionName, data) {
    var output = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>Action Result: " + actionName + "</h4><p class='list-group-item-text'>" + data + "</p></a>";
    $(".list-group").append(output);
}

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

KioskSimple configuration settings

1. Download the webcam JavaScript example 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.

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.

• Author
• Recent Posts

Follow me

Andrew Savala

CEO at RedSwimmer Inc.

Andrew Savala is the CEO of RedSwimmer, with a background in designing and deploying complex payment kiosk systems.Andrew offers high-value, strategic consulting services to companies looking to develop their payment kiosks.

Follow me

Latest posts by Andrew Savala (see all)

• Avoid These 12 Mistakes Companies Make on Their First Payment Kiosk - April 6, 2019
• 6 Tips for Boosting Customer Engagement at Your Kiosks - March 23, 2019
• How to Create a Customer Survey Kiosk - November 8, 2017