相机调试

2 years ago · 97aa255f48
3 changed files with 209 additions and 65 deletions
--- a/.env
+++ b/.env
@ -1,4 +1,5 @@
 VITE_BASE_URL=http://192.168.1.111:8899
 VITE_WEBSOCKET_JAVA_URL=ws://127.0.0.1:8899/websocket/nuclear
-VITE_WEBSOCKET_CAMERA_URL=ws://127.0.0.1:8899/websocket/nuclear
-# VITE_WEBSOCKET_CAMERA_URL=ws://192.168.1.194:8080/ws/cmd
+# VITE_WEBSOCKET_CAMERA_URL=ws://127.0.0.1:8899/websocket/nuclear
+VITE_WEBSOCKET_CAMERA_URL=ws://192.168.1.194:8081/ws/cmd
+VITE_HOST_URL=http://192.168.1.194:8081/
--- a/src/command/index.js
+++ b/src/command/index.js
@ -12,21 +12,21 @@ const transformToString = data => {
 export const startCapture = transformToString({
  command: 'startCapture',
  autoRestart: true,
-  messageId: uuidv4(),
+  messageId: 'startCapture',
  need_receipt: true,
 })

 // 停止相机
 export const stopCapture = transformToString({
  command: 'stopCapture',
-  messageId: uuidv4(),
+  messageId: 'stopCapture',
  need_receipt: true,
 })

 // 获取相机状态
 export const getCameraState = transformToString({
  command: 'getCameraState',
-  messageId: uuidv4(),
+  messageId: 'getCameraState',
  need_receipt: true,
 })

@ -87,7 +87,7 @@ export const stopCharacterRecognition = transformToString({
 // 获取识别结果
 export const getCharacterRecognitionResult = transformToString({
  command: 'getCharacterRecognitionResult',
-  messageId: uuidv4(),
+  messageId: 'getCharacterRecognitionResult',
  need_receipt: true,
 })

@ -105,6 +105,13 @@ export const getMechanicalArmState = transformToString({
  need_receipt: true,
 })

+export const getCameraParametersInteger = transformToString({
+  command: 'getCameraParametersInteger',
+  pName: 'ExposureTimeRaw',
+  messageId: 'getCameraParametersInteger',
+  need_receipt: true,
+})
+
 /**
 * 通道1亮度 = 模拟通道亮度*数字通道1亮度
 * 通道2亮度 = 模拟通道亮度*数字通道1亮度
@ -121,6 +128,12 @@ export const setFlashBrightnessAnalog = brightness =>
    need_receipt: true,
  })

+export const getFlashBrightnessAnalog = transformToString({
+  command: 'getFlashBrightnessAnalog',
+  messageId: 'getFlashBrightnessAnalog',
+  need_receipt: true,
+})
+
 // 设置数字通道亮度
 export const setFlashBrightnessDigital = (channel, brightness) => {
  return transformToString({
@ -135,13 +148,22 @@ export const setFlashBrightnessDigital = (channel, brightness) => {
 // 打开闪光灯
 export const openFlashLight = transformToString({
  command: 'openFlashLight',
-  messageId: uuidv4(),
+  messageId: 'openFlashLight',
  need_receipt: true,
 })

 // 关闭闪光灯
 export const closeFlashLight = transformToString({
  command: 'CloseFlashLight',
-  messageId: uuidv4(),
+  messageId: 'CloseFlashLight',
  need_receipt: true,
 })
+
+export const setExposureTimeRaw = value =>
+  transformToString({
+    command: 'setCameraParametersInteger',
+    pName: 'ExposureTimeRaw',
+    value,
+    messageId: uuidv4(),
+    need_receipt: true,
+  })
--- a/src/components/Debug.vue
+++ b/src/components/Debug.vue
@ -10,14 +10,30 @@
      <div class="operation_proposed">
        <div class="top_btns">
          <div class="two_btns">
-            <div class="active_btn" @click="handleStartCpature">打开相机</div>
-            <div class="default_btn" @click="handleStopCpature">关闭相机</div>
+            <div
+              :class="isCameraOpen ? 'default_btn' : 'active_btn'"
+              @click="handleStartCpature"
+            >
+              打开相机
+            </div>
+            <div
+              :class="isCameraOpen ? 'active_btn' : 'default_btn'"
+              @click="handleStopCpature"
+            >
+              关闭相机
+            </div>
          </div>
          <div class="two_btns">
-            <div class="active_btn" @click="handleOpenFlashLight">
+            <div
+              :class="flashStatus ? 'default_btn' : 'active_btn'"
+              @click="handleOpenFlashLight"
+            >
              打开闪光灯
            </div>
-            <div class="default_btn" @click="handleCloseFlashLight">
+            <div
+              :class="flashStatus ? 'active_btn' : 'default_btn'"
+              @click="handleCloseFlashLight"
+            >
              关闭闪光灯
            </div>
          </div>
@ -28,53 +44,60 @@
        <div class="camera_param">
          <div class="slider_wrap mb50">
            <p class="title">模拟通道亮度</p>
-            <t-slider v-model="simulation_brightness" :min="0" :max="65535" />
+            <t-slider
+              v-model="simulation_brightness"
+              :min="0"
+              :max="65535"
+              @change="handleSimulationBrightness"
+            />
            <p class="number">{{ simulation_brightness }}</p>
          </div>
-          <div class="slider_wrap mb50">
-            <p class="title">通道1亮度</p>
-            <t-slider v-model="brightness_1" :min="0" :max="65535" />
-            <p class="number">{{ brightness_1 }}</p>
-          </div>
-          <div class="slider_wrap mb50">
-            <p class="title">通道2亮度</p>
-            <t-slider v-model="brightness_2" :min="0" :max="65535" />
-            <p class="number">{{ brightness_2 }}</p>
-          </div>
-          <div class="slider_wrap mb50">
-            <p class="title">通道3亮度</p>
-            <t-slider v-model="brightness_3" :min="0" :max="65535" />
-            <p class="number">{{ brightness_3 }}</p>
-          </div>
-          <div class="slider_wrap mb50">
-            <p class="title">通道4亮度</p>
-            <t-slider v-model="brightness_4" :min="0" :max="65535" />
-            <p class="number">{{ brightness_4 }}</p>
-          </div>
          <div class="slider_wrap">
            <p class="title">曝光时间</p>
-            <t-slider v-model="exposure" />
+            <t-slider
+              v-model="exposure"
+              :min="0"
+              :max="100000"
+              @change="handleExposureTime"
+            />
            <p class="number">{{ exposure }}</p>
          </div>
        </div>
        <div class="camera_image">
-          <div class="active_btn" @click="handleSetFlashBrightness">
-            修改通道亮度
-          </div>
-          <div class="active_btn">实时</div>
          <div class="active_btn" @click="handleTakePhoto">拍照</div>
-          <div class="active_btn" @click="handleStartCharacterRecognition">
+          <div class="active_btn" @click="handleGetCharacterRecognitionResult">
            识别
          </div>
        </div>
        <div class="identify_results">
          <p class="title">识别结果</p>
+          <div class="result">{{ recognitionResult }}</div>
        </div>
      </div>
    </div>
    <div class="right_camera_container">
      <p class="time_photo">实时照片</p>
-      <div class="photo"></div>
+      <div class="default_photo" v-if="!isCameraOpen">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="85.90400695800781"
+          height="76.7254638671875"
+          viewBox="0 0 85.90400695800781 76.7254638671875"
+        >
+          <g>
+            <path
+              d="M6.91322,0L78.9908,0C82.8088,0,85.904,3.2252,85.904,7.20367L85.904,69.6923C85.8151,73.6041,82.7458,76.7266,78.9908,76.7255L6.91322,76.7255C3.15816,76.7266,0.0888908,73.6041,0,69.6923L0,7.20367C0,3.22519,3.09515,0,6.91322,0ZM63.5689,38.8742C64.784,37.9363,66.4446,37.9363,67.6596,38.8742L78.9908,43.7761L78.9908,7.20367L6.91322,7.20367L6.91322,38.107L22.3351,21.7815C23.6974,20.2285,26.0451,20.2285,27.4074,21.7815L48.6381,49.3601L63.5689,38.8742ZM51.0912,24.6798C51.0912,19.1005,55.4317,14.5776,60.7861,14.5776C66.1404,14.5777,70.4809,19.1005,70.481,24.6798C70.481,30.2591,66.1404,34.7821,60.7861,34.7821C55.4317,34.7821,51.0912,30.2591,51.0912,24.6798ZM58.0045,24.4667C58.0045,26.0675,59.2498,27.3652,60.7861,27.3652L60.7861,27.5357C62.3886,27.5387,63.6621,26.1337,63.5678,24.4667C63.5678,22.8658,62.3224,21.5681,60.7862,21.5681C59.2499,21.5681,58.0045,22.8658,58.0045,24.4667Z"
+              fill-rule="evenodd"
+              fill="#5E5C5C"
+              fill-opacity="1"
+            />
+          </g>
+        </svg>
+      </div>
+      <img :src="photoUrl" class="photo" v-else />
    </div>
  </div>
 </template>
@ -85,38 +108,60 @@ import {
  startCapture,
  stopCapture,
  getCameraState,
-  takePhoto,
+  takeAndSavePhoto,
  startCharacterRecognition,
  getCharacterRecognitionResult,
  stopCharacterRecognition,
+  getFlashBrightnessAnalog,
  getMechanicalArmState,
  openFlashLight,
  closeFlashLight,
  setFlashBrightnessAnalog,
-  setFlashBrightnessDigital,
+  setExposureTimeRaw,
+  getCameraParametersInteger,
 } from '@/command'
+import { MessagePlugin } from 'tdesign-vue-next'
+
+const photoUrl = ref('')
+const recognitionResult = ref({})
+
+setInterval(
+  () => {
+    photoUrl.value = `${
+      import.meta.env.VITE_HOST_URL
+    }app/core/realtime_photo/now.png?${Math.random()}`
+  },
+  500,
+  500,
+)

 const simulation_brightness = ref(0)
-const brightness_1 = ref(0)
-const brightness_2 = ref(0)
-const brightness_3 = ref(0)
-const brightness_4 = ref(0)
 const exposure = ref(0)
+const flashStatus = ref(false)
+
+// 相机参数
+const isCameraOpen = ref(false)

 const handleStartCpature = () => {
-  websocketsend(startCapture)
+  if (!isCameraOpen.value) {
+    websocketsend(startCapture)
+  }
 }
 const handleStopCpature = () => {
-  websocketsend(stopCapture)
+  if (isCameraOpen.value) {
+    websocketsend(stopCapture)
+  }
 }
 const handleGetCameraState = () => {
  websocketsend(getCameraState)
 }
 const handleTakePhoto = () => {
-  // 拍照前需要确保相机是打开状态
-  handleGetCameraState()
-  // 如果相机打开则发送拍照，如果相机关闭 则提醒用户
-  websocketsend(takePhoto)
+  if (isCameraOpen.value) {
+    // 如果相机打开则发送拍照，如果相机关闭 则提醒用户
+    websocketsend(takeAndSavePhoto)
+  } else {
+    MessagePlugin('error', { content: '请先开启相机' })
+  }
 }

 const handleStartCharacterRecognition = () => {
@ -133,18 +178,26 @@ const handleGetMechanicalArmState = () => {
 }

 const handleOpenFlashLight = () => {
-  websocketsend(openFlashLight)
+  if (isOpenCamera()) {
+    if (!flashStatus.value) {
+      websocketsend(openFlashLight)
+    }
+  }
 }
 const handleCloseFlashLight = () => {
-  websocketsend(closeFlashLight)
+  if (isOpenCamera()) {
+    if (flashStatus.value) {
+      websocketsend(closeFlashLight)
+    }
+  }
 }

-const handleSetFlashBrightness = () => {
-  websocketsend(setFlashBrightnessAnalog(simulation_brightness.value))
-  websocketsend(setFlashBrightnessDigital(1, brightness_1.value))
-  websocketsend(setFlashBrightnessDigital(2, brightness_2.value))
-  websocketsend(setFlashBrightnessDigital(3, brightness_3.value))
-  websocketsend(setFlashBrightnessDigital(4, brightness_4.value))
+const isOpenCamera = () => {
+  if (!isCameraOpen.value) {
+    MessagePlugin('error', { content: '请先打开相机' })
+    return false
+  }
+  return true
 }

 // 是否真正建立连接
@ -172,12 +225,57 @@ const reconnect = () => {
 // 接收到消息后改变状态
 const websocketonmessage = e => {
  // 相机启动停止后接收到回执 而后发送获取相机状态指令 实时改变页面状态
-
-  console.log(e.data)
+  const data = JSON.parse(e.data)
+  console.log(data)
+  const { messageId, success } = data
+  if (success) {
+    switch (messageId) {
+      case 'startCapture':
+        MessagePlugin('success', { content: '开启相机成功' })
+        handleGetCameraState()
+        break
+      case 'stopCapture':
+        MessagePlugin('success', { content: '关闭相机成功' })
+        handleGetCameraState()
+        break
+      case 'getCameraState':
+        const { cameraState } = data
+        const { isOpen } = cameraState
+        isCameraOpen.value = isOpen
+        break
+      case 'getCameraParametersInteger':
+        const { value } = data
+        exposure.value = value
+        break
+      case 'openFlashLight':
+        flashStatus.value = true
+        break
+      case 'CloseFlashLight':
+        flashStatus.value = false
+        break
+      case 'getFlashBrightnessAnalog':
+        const { brightness } = data
+        simulation_brightness.value = brightness
+        break
+      case 'getCharacterRecognitionResult':
+        const { result } = data
+        recognitionResult.value = result
+        break
+      default:
+        break
+    }
+  } else {
+    MessagePlugin('error', { content: 'ws发送指令执行错误' })
+  }
 }

 const websocketonopen = () => {
-  console.log('客户端链接1！！！')
+  console.log('客户端链接成功！！！')
+  handleGetCameraState()
+  websocketsend(getCameraParametersInteger)
+  // 无法获取当前闪光灯是开是关。建议上层代码，初始化时候关闭闪光灯，然后在本地保存一个当前状态
+  handleCloseFlashLight()
+  websocketsend(getFlashBrightnessAnalog)
 }

 const websocketonerror = () => {
@ -186,7 +284,6 @@ const websocketonerror = () => {

 // 发送消息
 const websocketsend = data => {
-  console.log(data)
  websock.value.send(data)
 }

@ -210,6 +307,19 @@ const initWebSocket = () => {

 initWebSocket()

+// 业务处理
+const handleExposureTime = value => {
+  if (isOpenCamera()) {
+    websocketsend(setExposureTimeRaw(value))
+  }
+}
+
+const handleSimulationBrightness = value => {
+  if (isOpenCamera()) {
+    websocketsend(setFlashBrightnessAnalog(value))
+  }
+}
+
 onUnmounted(() => {
  websock.value.close()
 })
@ -326,6 +436,9 @@ onUnmounted(() => {
          letter-spacing: 0.07em;
          color: #191919;
        }
+        .result {
+          padding: 10px 0;
+        }
      }
    }
  }
@ -344,12 +457,20 @@ onUnmounted(() => {
      letter-spacing: 0.07em;
      color: #191919;
    }
-    .photo {
+    .default_photo {
      flex: 1;
      width: 100%;
      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
      background: #ebebeb;
    }
+    .photo {
+      flex: 1;
+      width: 100%;
+      border-radius: 6px;
+    }
  }
 }
 </style>