![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
dynamsoft-camera-enhancer
Advanced tools
Allow your website to easily control cameras on desktop and mobile devices.
Dynamsoft Camera Enhancer allows your website to easily control the camera in the browser on desktop or mobile devices.
With the SDK integrated, your users can open your website in a browser, access their cameras to stream live video and acquire real-time frames for further processing. The SDK also supports simple shape drawing, allowing information to be presented directly on the video stream or over a static image for integrated user interaction.
In this guide, you will learn step by step on how to integrate the Dynamsoft Camera Enhancer SDK into your website.
The simplest way to include the SDK is to use either the jsDelivr or UNPKG CDN.
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
UNPKG
<script src="https://unpkg.com/dynamsoft-core@3.0.10/dist/core.js"></script>
<script src="https://unpkg.com/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
In some rare cases, you might not be able to access the CDN. If this happens, you can use
Besides 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
yarn
yarn add dynamsoft-camera-enhancer
npm
npm install dynamsoft-camera-enhancer --save
Depending on how you downloaded the SDK and where you put it. You can typically include it like this:
<script src="/dynamsoft-core-js-3.0.10/dist/core.js"></script>
<script src="/dynamsoft-camera-enhancer-js-4.0.0/dist/dce.js"></script>
or
<script src="/node_modules/dynamsoft-core/dist/core.js"></script>
<script src="/node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
or
import { CameraEnhancer, CameraView } from 'dynamsoft-camera-enhancer';
Read more on how to host the SDK.
We can create a CameraEnhancer
instance to open and show the video stream on the page. The following code snippet demonstrates the complete process:
CameraView
instance, view
in our case;view
to the method createInstance()
for creating a CameraEnhancer
instance. This way, view
is bound to the created object enhancer
;view
by appending it to an existing element in the DOM;Step 3 can be done anywhere after step 1.
<!-- Define an element to hold the UI element -->
<div id="enhancerUIContainer" style="width:1280px;height:720px;"></div>
<script>
(async () => {
// Default UI will be used if no parameters are provided to 'CameraView.createInstance()'.
let view = await Dynamsoft.DCE.CameraView.createInstance();
// Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
// Get 'CameraView' instance's UI and append it to DOM.
document.querySelector("#enhancerUIContainer").append(view.getUIElement());
await enhancer.open();
})();
</script>
There are two ways to capture image frames with Dynamsoft Camera Enhancer.
Capture a single latest frame
This is done with the method fetchImage(). The following is a code snippet that shows this
let img = enhancer.fetchImage();
document.body.appendChild(img.toCanvas());
Start a capture loop that captures multiple frames at a steady interval into a buffer and then read frames from the buffer
The following code snippet shows how it works
// Capture an image frame every 2 seconds and subsequently append it to the buffer.
enhancer.setImageFetchInterval(2000);
// The event "frameAddedToBuffer" is triggered whenever a new frame is added to the buffer.
enhancer.on("frameAddedToBuffer", () => {
let img = enhancer.getImage();
console.log(img);
});
// Start the built-in fetching loop.
enhancer.startFetching();
The other view class ImageEditorView is designed to show a single image. The following code snippet shows a single frame in an ImageEditorView
instance and draws a rectangle on the image:
<div id="imageEditorContainer" style="width:1280px;height:720px;"></div>
// The default UI will be used if no parameters are provided to 'ImageEditorView.createInstance()'.
let editorView = await Dynamsoft.DCE.ImageEditorView.createInstance();
// Retrieve the UI of the 'editorView' instance and append it to the DOM.
document.querySelector("#imageEditorContainer").append(editorView.getUIElement());
// When the video is already playing, capture an image and draw it on the ImageEditorView.
let img = enhancer.fetchImage();
editorView.setOriginalImage(img);
// Draw a rectangle on the image.
let drawingLayer = editorView.createDrawingLayer();
let rect = new Dynamsoft.DCE.DrawingItem.RectDrawingItem(
{
x: 100,
y: 100,
width: 1070,
height: 520
});
drawingLayer.addDrawingItems([rect]);
Once the rectangle appears on the image, you can click to select it and adjust its position, size, etc.
The built-in UI of the CameraView
instance is defined in the file dist/dce.ui.html
. There are a few ways to customize it:
Modify the file dist/dce.ui.html
directly.
This option is only possible when you host this file on your own web server instead of using a CDN.
Copy the file dist/dce.ui.html
to your project, modify it and pass its path in the API createInstance
to set it as the default UI.
// To make sure the following line takes effect, put it before the API `open()` is called.
Dynamsoft.DCE.CameraView.createInstance("THE-URL-TO-THE-FILE");
Build the UI element into your own web page and specify it when create instance.
<div id="enhancerUIContainer" style="width:1280px;height:720px;background:#ddd;" >
<div class="dce-video-container" style="width:100%;height:100%;"></div>
</div>
<script>
(async () => {
// Create 'CameraView' instance and pass an element as its UI.
let view = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById("enhancerUIContainer"));
let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
await enhancer.open();
})();
</script>
The video element will be created and appended to the DIV element with the class
dce-video-container
, make sure the class name is the same.
dce-sel-camera
and dce-sel-resolution
, the SDK will automatically populate the lists and handle the camera/resolution switching.<div style="position: absolute;left: 0;top: 0;">
<select class="dce-sel-camera" style="display: block;"></select>
</div>
<div style="position: absolute;left: 0;top: 0;">
<select class="dce-sel-resolution" style="display: block;margin-top: 5px;">
</select>
</div>
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.
<select class="dce-sel-resolution">
<option class="dce-opt-gotResolution" value="got"></option>
<option data-width="1920" data-height="1080">1920x1080</option>
<option data-width="1280" data-height="720">1280x720</option>
<option data-width="640" data-height="480">640x480</option>
</select>
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 closest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name
dce-opt-gotResolution
(as shown above) and the SDK will then use it to show the actual resolution.
Once 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 filedce.mjs
// For using the SDK as a module (<script type="module">
)dce.ui.html
// Defines the default enhancer UIEnable HTTPS
To use the SDK, you must access your website / web application via a secure HTTPS connection. This is due to browser security restrictions which only grant camera video streaming access to a secure context.
For convenience, self-signed certificates are allowed during development and testing. Or use "http://localhost".
Now that the SDK is hosted on your server, you can include it accordingly.
<script src="https://www.yourwebsite.com/PATH-TO-THE-SDK/dynamsoft-camera-enhancer/dist/dce.js"></script>
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-server
on npm or yarn.
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.
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.
You can check out the detailed documentation about the APIs of the SDK at https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/index.html.
DCE requires the following features to work:
Secure context (HTTPS deployment)
When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
Some browsers like Chrome may grant the access for
http://127.0.0.1
andhttp://localhost
or even for pages opened directly from the local disk (file:///...
). This can be helpful for temporary development and test.
MediaDevices
/getUserMedia
This API is only required for in-browser video streaming.
getSettings
This API inspects the video input which is a MediaStreamTrack
object about its constrainable properties.
The following table is a list of supported browsers based on the above requirements:
Browser Name | Version |
---|---|
Chrome | v59+ |
Firefox | v63+ |
Edge | v79+ |
Safari | v11+ |
Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
Learn about what are included in each release at https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/index.html.
Now that you have got the SDK integrated, you can choose to move forward in the following directions
FAQs
Allow your website to easily control cameras on desktop and mobile devices.
The npm package dynamsoft-camera-enhancer receives a total of 5,249 weekly downloads. As such, dynamsoft-camera-enhancer popularity was classified as popular.
We found that dynamsoft-camera-enhancer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.