fix: add use web channel

app/composables/webChannel.ts

@@ -0,0 +1,92 @@
+/* eslint-disable no-new */
+import QWebChannel, { isQtClient } from '~/utils/web-channel.js'
+
+interface QtWebSocketOptions {
+  onDataUpdated?: (data: any) => void
+  onConnected?: () => void
+  onDisconnected?: () => void
+  onError?: (error: any) => void
+}
+
+export function useWebChannel(options: QtWebSocketOptions = {}) {
+  const { onDataUpdated } = options
+
+  const qtObject = ref<any>(null)
+  // const isConnected = ref(false)
+
+  // const { status: wsStatus, send: wsSend, open, close } = useWebSocket('ws://your-websocket-url', {
+  //   autoReconnect: true,
+  //   onConnected: () => {
+  //     isConnected.value = true
+  //     onConnected?.()
+  //   },
+  //   onDisconnected: () => {
+  //     isConnected.value = false
+  //     onDisconnected?.()
+  //   },
+  //   onError,
+  // })
+
+  const sendMessageToCpp = (message: any) => {
+    if (qtObject.value && typeof qtObject.value.receiveMessage === 'function') {
+      qtObject.value.receiveMessage(message)
+    }
+    else {
+      console.error('myObject or receiveMessage function not available')
+    }
+  }
+
+  const initQtWebChannel = () => {
+    if (import.meta.env.DEV || !isQtClient) {
+      window.qt = {
+        webChannelTransport: {
+          send() {
+            window.console.log(`
+              QWebChannel simulator activated !
+            `)
+          },
+
+          onmessage: () => {
+            window.console.log(`
+              QWebChannel simulator activated !
+            `)
+          },
+        },
+      }
+    }
+
+    new QWebChannel(window.qt.webChannelTransport, (channel: any) => {
+      if (channel.objects.myObject) {
+        window.console.log('myObject is available')
+        qtObject.value = channel.objects.myObject
+        qtObject.value.dataUpdated.connect((data: any) => {
+          if (data) {
+            onDataUpdated?.(data)
+          }
+          else {
+            console.error('data is null')
+          }
+        })
+      }
+      else {
+        console.error('myObject is not available')
+      }
+    })
+  }
+
+  onMounted(() => {
+    initQtWebChannel()
+  })
+
+  // onUnmounted(() => {
+  //   close()
+  // })
+
+  return {
+    // isConnected,
+    // wsStatus,
+    // sendWebSocketMessage: wsSend,
+    sendMessageToCpp,
+    qtObject,
+  }
+}

app/pages/v-screen/index/web-camera.vue

@@ -1,61 +1,66 @@
 <script setup lang="ts">
-import { h, onMounted, ref } from 'vue'
-import PopupMessage from './popup-message.vue'
-
-const { $myObject } = useNuxtApp()
-
-const msgVNode = h(PopupMessage, { name: '👏👏👏' }, {
-  default: () => [
-    h('div', '签到成功'),
-  ],
-})
+// import { h } from 'vue'
+// import PopupMessage from './popup-message.vue'
 
 const containerRef = ref<HTMLCanvasElement | null>(null)
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 
-onMounted(async () => {
-  loadSequenceFrame()
-  //  window.addEventListener("resize", drawSequenceFrameOnResize);
-  window.console.log($myObject, '获取的qt对象')
+const { sendMessageToCpp } = useWebChannel({
+  onDataUpdated(data) {
+    window.console.log('这是QT数据:', data)
+    drawSequenceFrame(data.img)
+    sendMessageToCpp('这是JS数据')
+  },
 })
 
-function loadSequenceFrame() {
-  let frameCount = 1
-  const totalFrames = 32
-  const frameRate = 10 // 每秒10帧
-  const frameDuration = 1000 / frameRate
-  let lastFrameTime = 0
-
-  function animate(timestamp: number) {
-    if (!lastFrameTime)
-      lastFrameTime = timestamp
-
-    const elapsed = timestamp - lastFrameTime
-
-    if (elapsed >= frameDuration) {
-      drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`)
-      frameCount++
-      lastFrameTime = timestamp - (elapsed % frameDuration)
-
-      if (frameCount > totalFrames) {
-        ElMessage.success({
-          message: msgVNode,
-          duration: 5000,
-          offset: 800,
-        })
-
-        setTimeout(() => {
-          navigateTo('/v-screen/data')
-        }, 5000)
-        return
-      }
-    }
-
-    requestAnimationFrame(animate)
-  }
+// const msgVNode = h(PopupMessage, { name: '👏👏👏' }, {
+//   default: () => [
+//     h('div', '签到成功'),
+//   ],
+// })
+
+// onMounted(async () => {
+//   loadSequenceFrame()
+//   //  window.addEventListener("resize", drawSequenceFrameOnResize);
+// })
+
+// function loadSequenceFrame() {
+//   let frameCount = 1
+//   const totalFrames = 32
+//   const frameRate = 10 // 每秒10帧
+//   const frameDuration = 1000 / frameRate
+//   let lastFrameTime = 0
+
+//   function animate(timestamp: number) {
+//     if (!lastFrameTime)
+//       lastFrameTime = timestamp
+
+//     const elapsed = timestamp - lastFrameTime
+
+//     if (elapsed >= frameDuration) {
+//       drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`)
+//       frameCount++
+//       lastFrameTime = timestamp - (elapsed % frameDuration)
+
+//       if (frameCount > totalFrames) {
+//         ElMessage.success({
+//           message: msgVNode,
+//           duration: 5000,
+//           offset: 800,
+//         })
+
+//         setTimeout(() => {
+//           navigateTo('/v-screen/data')
+//         }, 5000)
+//         return
+//       }
+//     }
+
+//     requestAnimationFrame(animate)
+//   }
 
-  requestAnimationFrame(animate)
-}
+//   requestAnimationFrame(animate)
+// }
 
 function drawSequenceFrame(url: string) {
   const canvas = canvasRef.value

public/plugins/web-channel.js → app/utils/web-channel.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-prototype-builtins */
 /****************************************************************************
 **
 ** Copyright (C) 2016 The Qt Company Ltd.
@@ -152,11 +153,12 @@ const QWebChannel = function (transport, initCallback) {
   }
 
   channel.exec({ type: QWebChannelMessageTypes.init }, (data) => {
-    for (var objectName in data) {
+    for (const objectName in data) {
+      // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars
       const object = new QObject(objectName, data[objectName], channel)
     }
     // now unwrap properties, which might reference other registered objects
-    for (var objectName in channel.objects) {
+    for (const objectName in channel.objects) {
       channel.objects[objectName].unwrapProperties()
     }
     if (initCallback) {
@@ -316,6 +318,7 @@ function QObject(name, data, webChannel) {
       const args = []
       let callback
       for (let i = 0; i < arguments.length; ++i) {
+        // eslint-disable-next-line prefer-rest-params
         const argument = arguments[i]
         if (typeof argument === 'function') {
           callback = argument
@@ -401,14 +404,20 @@ function QObject(name, data, webChannel) {
 
   data.signals.forEach((signal) => { addSignal(signal, false) })
 
-  for (var name in data.enums) {
+  for (const name in data.enums) {
     object[name] = data.enums[name]
   }
 }
 
 // required for use with nodejs
-if (typeof module === 'object') {
-  module.exports = {
-    QWebChannel,
-  }
-}
+// if (typeof module === 'object') {
+//   module.exports = {
+//     QWebChannel,
+//   }
+// }
+
+export default QWebChannel
+
+export const isQtClient = (function () {
+  return navigator.userAgent.includes('QtWebEngine')
+})()