camera-enhancer-javascript-samples/control-camera/index.html at main · Dynamsoft/camera-enhancer-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamsoft Camera Enhancer Sample - Control Camera</title>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
  </head>
  <body>
    <button id="btn-open-camera">open camera</button>
    <button id="btn-close-camera">close camera</button>
    <br />
    <label for="select-camera">camera: </label>
    <select name="" id="select-camera"></select>
    <br />
    <label for="select-resolution">resolution: </label>
    <select name="" id="select-resolution">
      <option value="got-resolution" selected>1920*1080</option>
      <option value="3840*2160">3840*2160</option>
      <option value="1920*1080">1920*1080</option>
      <option value="1280*720">1280*720</option>
      <option value="640*480">640*480</option>
    </select>
    <div
      id="div-ui-container"
      style="width: 90vw; height: 80vh; border: 1px solid black"
    >
      <div class="dce-video-container" style="width: 100%; height: 100%"></div>
    </div>
    <script>
      const uiContainer = document.querySelector("#div-ui-container");
      const cameraSelection = document.querySelector("#select-camera");
      const resolutionSelection = document.querySelector("#select-resolution");

      let cameraView, cameraEnhancer;

      const init = async () => {
        if (cameraEnhancer) return;

        // 'testCameraAccess()' help judge if cameras in the device are available. Also, it makes the first opening of the camera faster.
        const testResult =
          await Dynamsoft.DCE.CameraEnhancer.testCameraAccess();
        if (!testResult.ok) {
          alert(testResult.message);
          console.error(testResult.message);
          return;
        }

        // Create 'CameraView' instance and set 'uiContainer' as its UI.
        cameraView = await Dynamsoft.DCE.CameraView.createInstance(uiContainer);
        // Create 'CameraEnhancer' instance and pass 'cameraView' to it for UI control.
        cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
          cameraView
        );

        await getCameraList();
      };

      // Get all cameras in the devices and show them on 'select' element.
      const getCameraList = async () => {
        if (!cameraEnhancer) return null;

        const cameraList = await cameraEnhancer.getAllCameras();
        cameraSelection.innerText = "";
        for (let camera of cameraList) {
          const option = document.createElement("option");
          option.innerText = camera.label;
          option.value = camera.deviceId;
          cameraSelection.add(option);
        }
      };

      // Update camera that is using in the DOM.
      const renderCurCamera = () => {
        if (!cameraEnhancer) return;
        const curCamera = cameraEnhancer.getSelectedCamera();
        for (let option of cameraSelection.options) {
          if (option.value == curCamera.deviceId) {
            cameraSelection.value = option.value;
            break;
          }
        }
      };

      // Update camera's resolution in the DOM.
      const renderCurResolution = () => {
        if (!cameraEnhancer) return;
        const curResolution = cameraEnhancer.getResolution();
        resolutionSelection.item(
          0
        ).innerText = `${curResolution.width}*${curResolution.height}`;
        resolutionSelection.selectedIndex = 0;
      };

      init();

      document.querySelector("#btn-open-camera").onclick = async () => {
        if (!cameraEnhancer)
          throw new Error(`Instance is not yet initialized.`);

        await cameraEnhancer.open();
        renderCurCamera();
        renderCurResolution();
      };

      document.querySelector("#btn-close-camera").onclick = async () => {
        if (!cameraEnhancer) return;

        await cameraEnhancer.close();
      };

      cameraSelection.addEventListener("change", async () => {
        if (!cameraEnhancer) return;

        await cameraEnhancer.selectCamera(cameraSelection.value);
        renderCurCamera();
      });

      resolutionSelection.addEventListener("change", async () => {
        if (!cameraEnhancer) return;
        const str = resolutionSelection.value;
        const index = str.indexOf("*");
        const width = parseInt(str.slice(0, index)),
          height = parseInt(str.slice(index + 1));
        await cameraEnhancer.setResolution({width, height});
        renderCurResolution();
      });
    </script>
  </body>
</html>