Initialization APIs
API Name | Description |
---|---|
createInstance() | Creates a CameraEnhancer instance. |
defaultUIElementURL | Returns or sets the URL of the .html file that defines the default UI Element. |
getUIElement() | Returns the HTML element that is used by the CameraEnhancer instance. |
setUIElement() | Specifies an HTML element for the CameraEnhancer instance to use as its UI element. |
createInstance
Creates a CameraEnhancer
instance.
static createInstance(): Promise<CameraEnhancer>;
Parameters
None.
Return value
A promise resolving to the created CameraEnhancer
object.
Code Snippet
let pEnhancer = null;
(async () => {
let enhancer = await (pEnhancer = pEnhancer || Dynamsoft.DCE.CameraEnhancer.createInstance());
})();
defaultUIElementURL
Returns or sets the URL of the .html file that defines the default UI Element. The URL can only be set before the API createInstance is called.
static defaultUIElementURL: string;
Code Snippet
Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.3.2/dist/dce.ui.html";
let pEnhancer = null;
(async () => {
let enhancer = await (pEnhancer = pEnhancer || Dynamsoft.DCE.CameraEnhancer.createInstance());
await enhancer.open();
})();
getUIElement
Returns the HTML element that is used by the CameraEnhancer instance.
getUIElement(): HTMLElement;
Parameters
None.
Return value
The HTML element used as the UI by the CameraEnhancer instance.
Code Snippet
<!-- Define an element to hold the UI element -->
<div id="enhancerUIContainer"></div>
<script>
let pEnhancer = null;
(async () => {
let enhancer = await (pEnhancer = pEnhancer || Dynamsoft.DCE.CameraEnhancer.createInstance());
await enhancer.open();
document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
})();
</script>
setUIElement
Specifies an HTML element for the CameraEnhancer instance to use as its UI. The structure inside the element determines the appearance of the UI.
setUIElement(elementOrURL: HTMLElement | string): Promise<void>;
Parameters
elementOrURL
: specifies an existing element on the page or the URL of an HTML file which contains an element.
Return value
A promise that resolves when the operation succeeds.
Code Snippet
<!-- Define an element to hold the video input -->
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
<script>
let pEnhancer = null;
(async () => {
let enhancer = await (pEnhancer = pEnhancer || Dynamsoft.DCE.CameraEnhancer.createInstance());
await enhancer.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
await enhancer.open();
})();
</script>
<!-- Use a UI element defined in a HTML file. -->
<script>
let pEnhancer = null;
(async () => {
let enhancer = await (pEnhancer = pEnhancer || Dynamsoft.DCE.CameraEnhancer.createInstance());
// The following line is not needed if you just want to use the official UI element.
// Only use it when you want to specify a different HTML page that contains a different UI definition.
await enhancer.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.3.2/dist/dce.ui.html");
// Note that because the element is not on the current page, you need to pass "true" when calling open() in order to show it.
await enhancer.open(true);
})();
</script>