Skip to content
This repository was archived by the owner on Oct 11, 2024. It is now read-only.

Commit f801637

Browse files
Cube-JCube-J
committed
Merge branch '_dev'
2 parents 9315e8c + 2743988 commit f801637

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+2075
-645
lines changed

‎.gitignore

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.DS_Store
2+
node_modules
3+
build
4+
dist
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?
23+
24+
__pycache__
25+
~~*
26+
--*
27+
==*
28+
package-lock.json
29+
yarn.lock
30+
.git
31+
/*.zip
32+
/*.py
33+
/*.exe
34+
/*.jar
35+
/*.md
36+
/*.json
37+
/*.js
38+
/*.txt
39+
/.gitattributes
40+
/.*ignore
41+
42+
!bower.json
43+
!composer.json
44+
!package.js

‎control-camera/index.html

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Dynamsoft Camera Enhancer Sample - Control Camera</title>
8+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
10+
</head>
11+
<body>
12+
<button id="btn-open-camera">open camera</button>
13+
<button id="btn-close-camera">close camera</button>
14+
<br />
15+
<label for="select-camera">camera: </label>
16+
<select name="" id="select-camera"></select>
17+
<br />
18+
<label for="select-resolution">resolution: </label>
19+
<select name="" id="select-resolution">
20+
<option value="got-resolution" selected>1920*1080</option>
21+
<option value="3840*2160">3840*2160</option>
22+
<option value="1920*1080">1920*1080</option>
23+
<option value="1280*720">1280*720</option>
24+
<option value="640*480">640*480</option>
25+
</select>
26+
<div
27+
id="div-ui-container"
28+
style="width: 90vw; height: 80vh; border: 1px solid black"
29+
>
30+
<div class="dce-video-container" style="width: 100%; height: 100%"></div>
31+
</div>
32+
<script>
33+
const uiContainer = document.querySelector("#div-ui-container");
34+
const cameraSelection = document.querySelector("#select-camera");
35+
const resolutionSelection = document.querySelector("#select-resolution");
36+
37+
let cameraView, cameraEnhancer;
38+
39+
const init = async () => {
40+
if (cameraEnhancer) return;
41+
42+
// 'testCameraAccess()' help judge if cameras in the device are available. Also, it makes the first opening of the camera faster.
43+
const testResult =
44+
await Dynamsoft.DCE.CameraEnhancer.testCameraAccess();
45+
if (!testResult.ok) {
46+
alert(testResult.message);
47+
console.error(testResult.message);
48+
return;
49+
}
50+
51+
// Create 'CameraView' instance and set 'uiContainer' as its UI.
52+
cameraView = await Dynamsoft.DCE.CameraView.createInstance(uiContainer);
53+
// Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
54+
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
55+
cameraView
56+
);
57+
58+
await getCameraList();
59+
};
60+
61+
// Get all cameras in the devices and show them on 'select' element.
62+
const getCameraList = async () => {
63+
if (!cameraEnhancer) return null;
64+
65+
const cameraList = await cameraEnhancer.getAllCameras();
66+
cameraSelection.innerText = "";
67+
for (let camera of cameraList) {
68+
const option = document.createElement("option");
69+
option.innerText = camera.label;
70+
option.value = camera.deviceId;
71+
cameraSelection.add(option);
72+
}
73+
};
74+
75+
// Update camera that is using in the DOM.
76+
const renderCurCamera = () => {
77+
if (!cameraEnhancer) return;
78+
const curCamera = cameraEnhancer.getSelectedCamera();
79+
for (let option of cameraSelection.options) {
80+
if (option.value == curCamera.deviceId) {
81+
cameraSelection.value = option.value;
82+
break;
83+
}
84+
}
85+
};
86+
87+
// Update camera's resolution in the DOM.
88+
const renderCurResolution = () => {
89+
if (!cameraEnhancer) return;
90+
const curResolution = cameraEnhancer.getResolution();
91+
resolutionSelection.item(
92+
0
93+
).innerText = `${curResolution.width}*${curResolution.height}`;
94+
resolutionSelection.selectedIndex = 0;
95+
};
96+
97+
init();
98+
99+
document.querySelector("#btn-open-camera").onclick = async () => {
100+
if (!cameraEnhancer)
101+
throw new Error(`Instance is not yet initialized.`);
102+
103+
await cameraEnhancer.open();
104+
renderCurCamera();
105+
renderCurResolution();
106+
};
107+
108+
document.querySelector("#btn-close-camera").onclick = async () => {
109+
if (!cameraEnhancer) return;
110+
111+
await cameraEnhancer.close();
112+
};
113+
114+
cameraSelection.addEventListener("change", async () => {
115+
if (!cameraEnhancer) return;
116+
117+
await cameraEnhancer.selectCamera(cameraSelection.value);
118+
renderCurCamera();
119+
});
120+
121+
resolutionSelection.addEventListener("change", async () => {
122+
if (!cameraEnhancer) return;
123+
const str = resolutionSelection.value;
124+
const index = str.indexOf("*");
125+
const width = parseInt(str.slice(0, index)),
126+
height = parseInt(str.slice(index + 1));
127+
await cameraEnhancer.setResolution({width, height});
128+
renderCurResolution();
129+
});
130+
</script>
131+
</body>
132+
</html>

‎customize-the-ui/index.html

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎customize-ui/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Dynamsoft Camera Enhancer Sample - Customize UI</title>
7+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.10/dist/core.js"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.0/dist/dce.js"></script>
9+
</head>
10+
<body>
11+
<script>
12+
let cameraView;
13+
let cameraEnhancer;
14+
(async () => {
15+
// Create 'CameraView' instance and set element in './ui.html' as its UI.
16+
cameraView = await Dynamsoft.DCE.CameraView.createInstance("./ui.html");
17+
// Set video's CSS style 'object-fit' to 'cover'.
18+
cameraView.setVideoFit("cover");
19+
// Get 'CameraView' instance's UI and append it to DOM.
20+
document.body.append(cameraView.getUIElement());
21+
// Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
22+
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
23+
cameraView
24+
);
25+
await cameraEnhancer.open();
26+
})();
27+
</script>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)