New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
dynamsoft-camera-enhancer
Advanced tools
dynamsoft-camera-enhancer - npm Package Compare versions
Comparing version 3.0.0-beta07241826 to 3.0.0-beta07261816
@@ -169,2 +169,3 @@ import { PlayCallbackInfo } from '../interface/playcallbackinfo'; | ||
| private set bOpen(value); | ||
| readonly isCameraEnhancer: boolean; | ||
| readonly isDisposed: boolean; | ||
@@ -236,2 +237,6 @@ /** | ||
| _btnClose: any; | ||
| /** @ignore */ | ||
| _selMinLtr: any; | ||
| /** @ignore */ | ||
| _optGotMinLtr: any; | ||
| private regionMaskFillStyle; | ||
@@ -238,0 +243,0 @@ private regionMaskStrokeStyle; |
@@ -15,3 +15,3 @@ export declare class DrawingItem { | ||
| protected mapEvents: Map<string, Function[]>; | ||
| readonly _isDrawingItem = true; | ||
| readonly isDrawingItem: boolean; | ||
| constructor(fabricObject: fabric.Object, styleId?: number); | ||
@@ -18,0 +18,0 @@ private _setFabricObject; |
@@ -14,2 +14,3 @@ import { fabric } from "dm-fabric"; | ||
| private _visible; | ||
| _manager: any; | ||
| constructor(canvas: HTMLCanvasElement, id: number, mapDrawingStyles: Map<number, DrawingStyle>, options?: Object); | ||
@@ -16,0 +17,0 @@ getId(): number; |
| import DrawingLayer from "./drawinglayer"; | ||
| import { DrawingStyle } from "../interface/drawingstyle"; | ||
| export declare class DrawingLayersManager { | ||
| private _arrDrawingLayer; | ||
| _arrDrawingLayer: DrawingLayer[]; | ||
| private _mapDrawingStyles; | ||
@@ -14,2 +14,4 @@ private _defaultStyleTemplate; | ||
| createDrawingLayer(baseCvs: HTMLCanvasElement, drawingLayerId?: number): DrawingLayer; | ||
| deleteDrwaingLayer(drawingLayerId?: number): void; | ||
| clearDrawingLayers(): void; | ||
| getDrawingLayer(drawingLayerId: number): DrawingLayer; | ||
@@ -28,4 +30,4 @@ getDrawingLayers(): Array<DrawingLayer>; | ||
| setVisible(visible: boolean): void; | ||
| dispose(): void; | ||
| _switchPointerEvent(): void; | ||
| } | ||
| //# sourceMappingURL=drawinglayermanager.d.ts.map |
| { | ||
| "name": "dynamsoft-camera-enhancer", | ||
| "version": "3.0.0-beta07241826", | ||
| "version": "3.0.0-beta07261816", | ||
| "description": "Allow your website to easily control cameras on desktop and mobile devices.", | ||
@@ -5,0 +5,0 @@ "private": false, |
184
README.md
@@ -7,3 +7,3 @@ # Dynamsoft Camera Enhancer for Your Website | ||
| In this guide, you will learn step by step on how to integrate this library into your website. | ||
| In this guide, you will learn step by step on how to integrate this SDK into your website. | ||
@@ -13,38 +13,38 @@ **Table of Contents** | ||
| * [Getting Started](#getting-started) | ||
| + [Include the library](#include-the-library) | ||
| + [Interact with the library](#interact-with-the-library) | ||
| * [Hosting the Library](#hosting-the-library) | ||
| * [Include the SDK](#include-the-sdk) | ||
| * [Interact with the SDK](#interact-with-the-sdk) | ||
| * [Hosting the SDK](#hosting-the-sdk) | ||
| * [FAQ](#faq) | ||
| **Example Usage** | ||
| > **Example Usage** | ||
| > | ||
| > Read the user guide of Dynamsoft Label Recognizer on how DCE helps the SDK achieve video recognition: | ||
| > | ||
| > * [Dynamsoft Label Recognizer User Guide](https://www.dynamsoft.com/label-recognition/programming/javascript/user-guide.html?ver=latest&utm_source=dceguide) | ||
| Read the user guide of Dynamsoft Label Recognizer on how DCE helps the SDK achieve video recognition: | ||
| * [Dynamsoft Label Recognizer User Guide](https://www.dynamsoft.com/label-recognition/programming/javascript/user-guide.html?ver=latest&utm_source=dceguide) | ||
| ## Getting Started | ||
| ### Include the library | ||
| ### Include the SDK | ||
| #### Use a CDN | ||
| The simplest way to include the library is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. | ||
| The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. | ||
| * jsDelivr | ||
| ```html | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.0/dist/dce.js"></script> | ||
| ``` | ||
| ``` | ||
| * UNPKG | ||
| ```html | ||
| ```html | ||
| <script src="https://unpkg.com/dynamsoft-camera-enhancer@3.0.0/dist/dce.js"></script> | ||
| ``` | ||
| ``` | ||
| #### Host the library yourself (recommended) | ||
| #### Host the SDK yourself | ||
| Besides using the CDN, you can also download the library and host it locally. | ||
| Besides using the CDN, you can also download the SDK and host it locally. | ||
| The following shows a few ways to download the library. | ||
| The following shows a few ways to download the SDK. | ||
@@ -57,16 +57,17 @@ * From the website | ||
| ```cmd | ||
| $ yarn add dynamsoft-camera-enhancer | ||
| ``` | ||
| ```cmd | ||
| yarn add dynamsoft-camera-enhancer | ||
| ``` | ||
| * npm | ||
| ``` | ||
| $ npm install dynamsoft-camera-enhancer --save | ||
| ``` | ||
| ```cmd | ||
| npm install dynamsoft-camera-enhancer --save | ||
| ``` | ||
| Depending on how you downloaded the library and where you put it. You can typically include it like this: | ||
| Depending on how you downloaded the SDK and where you put it. You can typically include it like this: | ||
| ```html | ||
| <script src="/dce-js-2.3.2/dist/dce.js"></script> | ||
| <script src="/dce-js-3.0.0/dist/dce.js"></script> | ||
| ``` | ||
@@ -79,9 +80,15 @@ or | ||
| Read more on [how to host the library](#hosting-the-library). | ||
| or | ||
| ### Interact with the library | ||
| ```typescript | ||
| import { CameraEnhancer } from 'dynamsoft-camera-enhancer'; | ||
| ``` | ||
| Read more on [how to host the SDK](#hosting-the-sdk). | ||
| ### Interact with the SDK | ||
| #### Create a `CameraEnhancer` object | ||
| To use the library, we need to create a `CameraEnhancer` object first. | ||
| To use the SDK, we need to create a `CameraEnhancer` object first. | ||
@@ -100,7 +107,7 @@ ```javascript | ||
| <script> | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement()); | ||
| await enhancer.open(true); | ||
| })(); | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| await enhancer.open(); | ||
| document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement()); | ||
| })(); | ||
| </script> | ||
@@ -113,3 +120,3 @@ ``` | ||
| * Modify the file `dist/dce.ui.html` directly. | ||
| * Modify the file `dist/dce.ui.html` directly. | ||
@@ -126,3 +133,3 @@ This option is only possible when you host this file on your own web server instead of using a CDN. | ||
| * Append the default UI element to your page as shown in [Configure the CameraEnhancer object](#configure-the-cameraenhancer-object), customize it before showing it. | ||
| * Append the default UI element to your page as shown in [Configure the CameraEnhancer object](#configure-the-cameraenhancer-object), customize it if necessary. | ||
@@ -133,9 +140,11 @@ ```html | ||
| <script> | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement()); | ||
| // The following line hides the close button | ||
| document.getElementsByClassName("dce-btn-close")[0].style.display = "none"; | ||
| await enhancer.open(true); | ||
| })(); | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| // In order to get the UIElement to put on the page, call open() first. | ||
| await enhancer.open(); | ||
| // Gets the internally built UI element and bind it to an element on the page. | ||
| document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement()); | ||
| // The following line hides the close button | ||
| document.getElementsByClassName("dce-btn-close")[0].style.display = "none"; | ||
| })(); | ||
| </script> | ||
@@ -146,50 +155,49 @@ ``` | ||
| + Embed only the video | ||
| * Embed only the video | ||
| ```html | ||
| <div id="enhancerUIContainer" style="width:100%;height:100%;"> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| <script> | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| await enhancer.setUIElement(document.getElementById("enhancerUIContainer")); | ||
| await enhancer.open(true); | ||
| })(); | ||
| </script> | ||
| ``` | ||
| ```html | ||
| <div id="enhancerUIContainer" style="width:100%;height:100%;"> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| <script> | ||
| (async () => { | ||
| let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(); | ||
| await enhancer.setUIElement(document.getElementById("enhancerUIContainer")); | ||
| 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. Besides, the CSS property `position` of the DIV element must be either `relative`, `absolute`, `fixed`, or `sticky`. | ||
| + Add the camera list and resolution list. If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching. | ||
| * Add the camera list and resolution list. If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching. | ||
| ```html | ||
| <select class="dce-sel-camera"></select> | ||
| ``` | ||
| ```html | ||
| <select class="dce-sel-camera"></select> | ||
| ``` | ||
| ```html | ||
| <select class="dce-sel-resolution"></select> | ||
| ``` | ||
| ```html | ||
| <select class="dce-sel-resolution"></select> | ||
| ``` | ||
| > 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. | ||
| > By default, only 4 hard-coded resolutions (3840 x 2160, 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 | ||
| <select class="dce-sel-resolution"> | ||
| <option class="dce-opt-gotResolution" value="got"></option> | ||
| <option data-width="1280" data-height="720">1280x720</option> | ||
| <option data-width="800" data-height="600">800x600</option> | ||
| <option data-width="640" data-height="480">640x480</option> | ||
| </select> | ||
| ``` | ||
| ```html | ||
| <select class="dce-sel-resolution"> | ||
| <option class="dce-opt-gotResolution" value="got"></option> | ||
| <option data-width="1280" data-height="720">1280x720</option> | ||
| <option data-width="1920" data-height="1080">1920x1080</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 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 `dce-opt-gotResolution` (as shown above) and the library will then use it to show the **actual resolution**. | ||
| > 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 `dce-opt-gotResolution` (as shown above) and the SDK will then use it to show the **actual resolution**. | ||
| ## Hosting the library | ||
| ## Hosting the SDK | ||
| ### Step One: Deploy the dist folder | ||
| Once you have downloaded the library, 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: | ||
| 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 library file | ||
| * `dce.mjs` // For using the library as a module (`<script type="module">`) | ||
| * `dce.js` // The main SDK file | ||
| * `dce.mjs` // For using the SDK as a module (`<script type="module">`) | ||
| * `dce.ui.html` // Defines the default enhancer UI | ||
@@ -201,12 +209,12 @@ | ||
| To use the library, 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](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). | ||
| 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](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). | ||
| > For convenience, self-signed certificates are allowed during development and testing. | ||
| > For convenience, self-signed certificates are allowed during development and testing. Or use "http://localhost". | ||
| ### Step Three: Include the library from the server | ||
| ### Step Three: Include the SDK from the server | ||
| Now that the library is hosted on your server, you can include it accordingly. | ||
| Now that the SDK is hosted on your server, you can include it accordingly. | ||
| ```html | ||
| <script src="https://www.yourwebsite.com/dynamsoft-camera-enhancer/dist/dce.js"></script> | ||
| <script src="https://www.yourwebsite.com/PATH-TO-THE-SDK/dynamsoft-camera-enhancer/dist/dce.js"></script> | ||
| ``` | ||
@@ -218,3 +226,3 @@ | ||
| Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. 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**. 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](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). | ||
| Yes, for simple testing purposes, it's perfectly fine to open the file directly from the hard drive. 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**. 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](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/package/http-server). | ||
@@ -225,3 +233,3 @@ ### Why can't I use my camera? | ||
| > [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. | ||
| > [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](https://goo.gl/rStTGz) for more details. | ||
@@ -236,5 +244,5 @@ * In Safari 12 the equivalent error is: | ||
| + NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html) | ||
| + IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) | ||
| + Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) | ||
| + Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html) | ||
| * NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html) | ||
| * IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) | ||
| * Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) | ||
| * Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html) |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Lines of code
- increased by0.5%
4846
- Number of lines in readme file
- increased by3.51%
236
Worsened metrics
- Total package byte prevSize
- decreased by-36.52%
1088374
No dependency changes