相机调试

.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/

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: 'CloseFlashLight',
+  need_receipt: true,
+})
+
+export const setExposureTimeRaw = value =>
+  transformToString({
+    command: 'setCameraParametersInteger',
+    pName: 'ExposureTimeRaw',
+    value,
     messageId: uuidv4(),
     need_receipt: true,
   })

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 = () => {
+  if (!isCameraOpen.value) {
     websocketsend(startCapture)
   }
+}
 const handleStopCpature = () => {
+  if (isCameraOpen.value) {
     websocketsend(stopCapture)
   }
+}
 const handleGetCameraState = () => {
   websocketsend(getCameraState)
 }
 const handleTakePhoto = () => {
-  // 拍照前需要确保相机是打开状态
-  handleGetCameraState()
+  if (isCameraOpen.value) {
     // 如果相机打开则发送拍照，如果相机关闭 则提醒用户
-  websocketsend(takePhoto)
+    websocketsend(takeAndSavePhoto)
+  } else {
+    MessagePlugin('error', { content: '请先开启相机' })
+  }
 }
 
 const handleStartCharacterRecognition = () => {
@@ -133,18 +178,26 @@ const handleGetMechanicalArmState = () => {
 }
 
 const handleOpenFlashLight = () => {
+  if (isOpenCamera()) {
+    if (!flashStatus.value) {
       websocketsend(openFlashLight)
     }
+  }
+}
 const handleCloseFlashLight = () => {
+  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>