Webcam usage

The Webcam tool requires a site to be https:// or on a localhost. The Webcam tool is available, subject to browser support

Webcam user information

The Snapshot Webcam tool enables users to capture images from device cameras such as a desktop webcam or the front and back cameras on a mobile phone. Users can edit a file title and description and even edit and annotate the image before uploading each image snapped.

With the user facing camera in mind, the camera image can be switched between a direct image or a mirror reflection of the image.

Opening the Webcam tool

  The snapshot webcam tool is opened by clicking the webcam button. Your browser will then request permission for the web page to use your webcam. This permission is sticky, so you will only need to grant permission once. If you change your mind, you can revoke permission in your browser settings.

Assuming you grant permission, the webcam button will flash, your webcam will go live and the webcam tool will be shown in an overlay. The tool is now managed by a toolbar shown in the overlay. The actual toolbar buttons shown depend on how the tool is configured and on the status of the webcam.

Webcam toolbar

  The display will initially show a live view from the webcam. This is signified by a flashing red indicator. When an image is snapped, the indicator will toggle to a solid green.
A camera select control will only be shown if a device has more than one camera attached. You can use it to select between cameras. For example, many mobile devices will have a front/user camera and a back/environment camera.
0 180 The image shown can be toggled between a direct image and a mirror/180 image. This can be convenient for composing selfies. Take care to upload the correct image and to not end up with mirrored text annotations!
The zoom controls toggle the preview shown between a smaller preview and a maximum preview.
The upload control is only shown when an image has been snapped. Once any edits of image or text are complete, click to upload the image to the web server.
The image edit control is only shown when an image has been snapped. Clicking will open the image in an image editor for adjustment, mark up and annotation.
The information edit control is shown after an image has been snapped. It toggles the display of a title and description edit window and the display of a feedback panel confirming image upload or error messages.
These buttons toggle. The blue camera button snaps an image from the webcam and the green video button resumes the live webcam image.
Close the snapshot webcam tool. It can be opened again by clicking the webcam button. This button may also be configured to refresh the page.
Kill the snapshot webcam tool. The tool will be closed and the webcam switched off. The webcam cannot be reopened unless the page is refreshed. This button may also be configured to refresh the page.
Upload completed
Upload failed

Image editor

The image editor opens in a new modal display.

Use the image editor controls to adjust the image, crop to size, add annotations and symbols. All changes can be undone up until you click 'Done'.

When finished, click 'Done' to save edits to the snapped image or 'Cancel' to revert.

Additional Pages

Each of the snapshot tool blocks are shown below. Uploading images is disabled, so feel free to have a play with each of the tools and think about how your web sites can benefit from them!


Read this before Purchase

Requires php7+.

See Limitations for guidance on device/browser support for snapshot tools.