Dynamsoft Camera Enhancer for Your WebsiteAllow your website to easily control cameras on desktop and mobile devices. Once integrated, your users can open your website in a browser, access their cameras to stream live video and acquire realtime frames.
See how Dynamsoft Camera Enhancer helps in camera control and video recognition:
- Barcode scanning from video stream: check Dynamsoft Barcode Reader JS User Guide
In this guide, you will learn step by step on how to integrate the Dynamsoft Camera Enhancer SDK into your website. Getting Started
- MRZ scanning and OCR from video stream: check Dynamsoft Label Recognizer JS User Guide
- [Include the SDK](#include-the-sdk)
- [Use a CDN](#use-a-cdn)
- [Host the SDK yourself](#host-the-sdk-yourself)
- [Interact with the SDK](#interact-with-the-sdk)
- [Create a `CameraEnhancer` object](#create-a-cameraenhancer-object)
- [Configure the `CameraEnhancer` object](#configure-the-cameraenhancer-object)
- Hosting the SDK
- [Customize the UI](#customize-the-ui)
- [Step One: Deploy the dist folder](#step-one-deploy-the-dist-folder)
- [Step Two: Configure the Server](#step-two-configure-the-server)
- [Step Three: Include the SDK from the server](#step-three-include-the-sdk-from-the-server)
- [Can I open the web page directly from the hard drive?](#can-i-open-the-web-page-directly-from-the-hard-drive)
- API Documentation - Release Notes - Next Steps
- [Why can't I use my camera?](#why-cant-i-use-my-camera)
Include the SDK
Use a CDNThe simplest way to include the SDK is to use either the jsDelivr or UNPKG CDN.
In some rare cases, you might not be able to access the CDN. If this happens, you can use https://download2.dynamsoft.com/dce/dynamsoft-camera-enhancer-js/dynamsoft-camera-enhancer-js-3.3.1/dist/dce.js
Host the SDK yourselfBesides using the CDN, you can also download the SDK and host it locally. The following shows a few ways to download the SDK.
- From the website
Interact with the SDK
To use the SDK, we need to create a
As shown in the code snippet below, before opening the video stream, we need to decide where to place the UI. By default, a full-page-size UI element will be created over the current page.
Customize the UIThe built-in UI of the
CameraEnhancerobject is defined in the file
dist/dce.ui.html. There are a few ways to customize it:
- Modify the file
- Copy the file
dist/dce.ui.htmlto your project, modify it and use the the API
defaultUIElementURLto set it as the default UI.
open()is called. Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL = "THE-URL-TO-THE-FILE"; ```
- Append the default UI element to your page as shown in Configure the CameraEnhancer object, customize it if necessary.
- Build the UI element into your own web page and specify it with the API
<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
dce-video-container, make sure the class name is the same. Besides, the CSS property
positionof the DIV element must be either
sticky. - Add the camera list and resolution list. If the class names for these lists match the default ones,
dce-sel-resolution, the SDK will automatically populate the lists and handle the camera/resolution switching. ```html ``` ```html ``` > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720, 640 x 480), are populated as options. You can show a customized set of options by hardcoding them. ```html
<option class="dce-opt-gotResolution" value="got"></option>
<option data-width="1280" data-height="720">1280x720</option>
``` > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name
<option data-width="1920" data-height="1080">1920x1080</option>
dce-opt-gotResolution(as shown above) and the SDK will then use it to show the actual resolution.
Hosting the SDK
Step One: Deploy the dist folderOnce you have downloaded the SDK, you can locate the "dist" directory and copy it to your project (usually as part of your website / web application). The following shows some of the files in this directory:
dce.js// The main SDK file
dce.mjs// For using the SDK as a module (
dce.ui.html// Defines the default enhancer UI
Step Two: Configure the Server
- Enable HTTPS
Step Three: Include the SDK from the serverNow that the SDK is hosted on your server, you can include it accordingly. ```html ```
Can I open the web page directly from the hard drive?Yes, for simple testing purposes, it's ok to open the file directly from the hard drive (
file://). However, you might encounter some issues in doing so (like unable to access the camera, etc.). The recommendation is to deploy this page to your web server and run it over HTTPS or use "http://localhost" during development. If you don't have a ready-to-use web server but have a package manager like npm or yarn, you can set up a simple HTTP server in minutes. Check out
http-serveron npm or yarn.
Why can't I use my camera?If you open the web page as
http://, the camera may not work and you see the following error in the browser console:
Deprecation getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
- In Safari 12 the equivalent error is:
Trying to call getUserMedia from an insecure document.You get this error because the API getUserMedia requires HTTPS to access the camera. To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
- NGINX: Configuring HTTPS servers
- Node.js: npm tls
Next StepsNow that you have got the SDK integrated, you can choose to move forward in the following directions
- Learn how to make use of the Shape Drawing Feature.
- Check out the official samples on Github.
- Learn about the available APIs.