🐛 [desktop] Use the Barcode Detector

desktop-dev/import_map.json

@@ -9,8 +9,6 @@
     "electron": "https://esm.sh/v124/[email protected]",
     "extract-zip": "https://esm.sh/v124/[email protected]",
     "jszip": "https://esm.sh/v124/[email protected]",
-    "jimp": "https://esm.sh/v124/[email protected]",
-    "jsqr": "https://esm.sh/v124/[email protected]",
     "lit": "https://esm.sh/v124/[email protected]",
     "lit/": "https://esm.sh/v124/[email protected]/",
     "mime": "https://esm.sh/v124/[email protected]",

desktop-dev/src/helper/openNativeWindow.ts

@@ -319,6 +319,7 @@ async function openDevToolsWindowAsFollower(
       devWin.moveTop();
       return devWin;
     }
+    // deno-lint-ignore no-empty
   } catch {}
 
   /// 使用最原始的方式打开webview，放在独立的窗口中

desktop-dev/src/main.ts

@@ -7,7 +7,6 @@ import { setFilter } from "./helper/devtools.ts";
 import { BluetoothNMM } from "./std/bluetooth/bluetooth.main.ts";
 import { HttpServerNMM } from "./std/http/http-server.ts";
 import { BarcodeScanningNMM } from "./sys/barcode-scanning/barcode-scanning.main.ts";
-import { BiometricsNMM } from "./sys/biometrics/biometrics.main.ts";
 import { BootNMM } from "./sys/boot/boot.ts";
 import { DnsNMM } from "./sys/dns/dns.ts";
 import "./sys/dns/localeFileFetch.ts";
@@ -71,7 +70,7 @@ dns.install(dwebBrowser);
 // dns.install(new ShareNMM());
 // dns.install(new HapticsNMM());
 dns.install(new BarcodeScanningNMM());
-dns.install(new BiometricsNMM());
+// dns.install(new BiometricsNMM());
 dns.install(new BluetoothNMM());
 
 import { JmmNMM } from "./browser/jmm/jmm.ts";

desktop-dev/src/std/http/http-server.ts

@@ -89,7 +89,7 @@ export class HttpServerNMM extends NativeMicroModule {
         // }, 3e4 /* 30s 没有任何 body 写入的话，认为网关超时 */);
         const fullReqUrl =
           info.protocol.prefix + (req.headers["host"] ?? info.host) + req.url;
-        console.always("fullReqUrl", fullReqUrl);
+        // console.always("fullReqUrl", fullReqUrl);
         // 源代码
         void gateway.listener.hookHttpRequest(req, res, fullReqUrl);
       }

desktop-dev/src/sys/barcode-scanning/barcode-scanning.main.ts

@@ -1,50 +1,33 @@
 // 模拟状态栏模块-用来提供状态UI的模块
-
-import Jimp from "jimp";
-import jsQR from "jsqr";
-import { Buffer } from "node:buffer";
 import { NativeMicroModule } from "../../core/micro-module.native.ts";
 
 export class BarcodeScanningNMM extends NativeMicroModule {
   mmid = "barcode-scanning.sys.dweb" as const;
-
+  // barcodeDetector = new BarcodeDetectorDelegate([
+  //   Html5QrcodeSupportedFormats.QR_CODE,
+  //   Html5QrcodeSupportedFormats.CODE_39,
+  //   Html5QrcodeSupportedFormats.CODABAR,
+  //   Html5QrcodeSupportedFormats.EAN_13,
+  // ]);
   _bootstrap = () => {
-    console.always(`[${this.mmid} _bootstrap]`);
-    let isStop = false;
     this.registerCommonIpcOnMessageHandler({
       method: "POST",
       pathname: "/process",
       matchMode: "full",
       input: {},
       output: "object",
-      handler: async (_args, _client_ipc, ipcRequest) => {
-        // 直接解析二维码
-        return await Jimp.read(Buffer.from(await ipcRequest.body.u8a())).then(
-          ({ bitmap }: Jimp) => {
-            const result = jsQR(
-              bitmap.data as unknown as Uint8ClampedArray,
-              bitmap.width,
-              bitmap.height
-            );
-            return result === null ? [] : [result.data];
-          }
-        );
-      },
+      handler: async (_args, _client_ipc, ipcRequest) => {},
     });
-
     this.registerCommonIpcOnMessageHandler({
       method: "GET",
-      pathname: "/stop",
+      pathname: "/getSupportedFormats",
       matchMode: "full",
       input: {},
       output: "boolean",
-      handler: (_args, _client_ipc, _ipcRequest) => {
-        // 停止及解析
-        isStop = true;
+      handler: () => {
         return true;
       },
     });
   };
-
   _shutdown() {}
 }

plaoc/demo/src/pages/BarcodeScanning.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import FieldLabel from "../components/FieldLabel.vue";
-import { barcodeScannerPlugin, HTMLDwebBarcodeScanningElement, CameraSource } from "../plugin";
-import LogPanel, { toConsole, defineLogAction } from "../components/LogPanel.vue";
+import LogPanel, { defineLogAction } from "../components/LogPanel.vue";
+import { CameraSource, HTMLDwebBarcodeScanningElement, barcodeScannerPlugin } from "../plugin";
 
 const title = "Scanner";
 

plaoc/src/client/components/barcode-scanning/barcode-scanning.plugin.ts

@@ -1,7 +1,6 @@
+import { PromiseOut } from "../../helper/PromiseOut.ts";
 import { bindThis } from "../../helper/bindThis.ts";
 import { BasePlugin } from "../base/BasePlugin.ts";
-// import { cameraPlugin } from "../camera/camera.plugin.ts";
-// import type { ImageOptions } from "../camera/camera.type.ts";
 import { SupportedFormat } from "./barcode-scanning.type.ts";
 
 export class BarcodeScannerPlugin extends BasePlugin {
@@ -22,6 +21,40 @@ export class BarcodeScannerPlugin extends BasePlugin {
     rotation = 0,
     formats = SupportedFormat.QR_CODE
   ): Promise<string[]> {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf(" electron/") > -1 && "BarcodeDetector" in window) {
+      // Electron-specific code
+      // deno-lint-ignore no-explicit-any
+      const barcodeDetector = new (window as any).BarcodeDetector({
+        formats: ["qr_code", "code_39", "codabar", "ean_13"],
+      });
+      const po = new PromiseOut<string[]>();
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = function () {
+        // 在图像加载完成后执行以下步骤
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d")!;
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+        const imageData = ctx.getImageData(0, 0, img.width, img.height);
+        barcodeDetector
+          .detect(imageData)
+          .then((barcodes: DeCodeType[]) => {
+            const data = barcodes.map((barcode) => {
+              return barcode.rawValue;
+            });
+            po.resolve(data);
+            return barcodes;
+          })
+          .catch((err: Error) => {
+            console.log(err);
+            po.reject(err);
+          });
+      };
+      return await po.promise;
+    }
     const value = await this.buildApiRequest("/process", {
       search: {
         rotation,
@@ -46,4 +79,8 @@ export class BarcodeScannerPlugin extends BasePlugin {
   }
 }
 
+export type DeCodeType = {
+  rawValue: string;
+  format: string;
+};
 export const barcodeScannerPlugin = new BarcodeScannerPlugin();

plaoc/src/client/components/barcode-scanning/barcode-scanning.wc.ts

@@ -98,10 +98,7 @@ export class HTMLDwebBarcodeScanningElement extends HTMLElement {
    * 不断识图的任务
    * @returns
    */
-  taskPhoto(
-    rotation: number,
-    formats: SupportedFormat
-  ): Promise<string[]> {
+  taskPhoto(rotation: number, formats: SupportedFormat): Promise<string[]> {
     this._activity = true;
     return new Promise((resolve, reject) => {
       const task = () => {
@@ -307,7 +304,7 @@ customElements.define(
   HTMLDwebBarcodeScanningElement
 );
 declare global {
-  interface HTMLElementTagNameMap{
-    [HTMLDwebBarcodeScanningElement.tagName]: HTMLDwebBarcodeScanningElement
+  interface HTMLElementTagNameMap {
+    [HTMLDwebBarcodeScanningElement.tagName]: HTMLDwebBarcodeScanningElement;
   }
 }

plaoc/src/server/http-api-server.ts

@@ -90,13 +90,14 @@ export class Server_api extends HttpServer {
     const { pathname, search } = event;
     // 转发file请求到目标NMM
     const path = `file:/${pathname}${search}`;
-    const ipcProxyRequest = event.body
+    const body = await event.ipcRequest.body.stream();
+    const ipcProxyRequest = body
       ? IpcRequest.fromStream(
           jsProcess.fetchIpc.allocReqId(),
           path,
           event.method,
           event.headers,
-          event.body,
+          body,
           jsProcess.fetchIpc
         )
       : IpcRequest.fromText(