如何使用 Electron 和 JavaScript 构建桌面条形码、MRZ 和文档扫描仪
基于 Web 的视觉 SDK 与 Electron 非常契合：它们完全在 Chromium 渲染器进程中运行，无需任何原生插件，并且可以作为独立的桌面应用程序分发到 Windows、macOS 和 Linux 平台。Dynamsoft Capture Vision (DCV) SDK 底层使用 WebAssembly，这使其成为 Electron 沙盒渲染器的理想之选。
本教程将引导您完成将 Dynamsoft 条形码、MRZ 和文档扫描功能封装到可用于生产环境的 Electron 外壳中的步骤。您将学习 Electron 进程模型的工作原理、如何授予摄像头访问权限、如何放宽 CDN 资源的 Content-Security-Policy 标头，以及如何使用 electron-builder。
先决条件
- Node.js 18+ 和 npm 9+
- Dynamsoft 试用许可证密钥
理解电子过程模型
Electron 将你的应用程序拆分成两种类型的进程：
| 过程 | 角色 | 使用权 |
|---|---|---|
| 主要流程 | Node.js；管理窗口、操作系统 API 和权限 | 完整的 Node.js + Electron API |
| 渲染进程 | Chromium；每个 BrowserWindow；渲染 HTML/JS | 仅限 Web API（除非显式桥接） |
Dynamsoft SDK 完全在渲染器内部运行。主进程负责：
- 创建具有正确窗口 webPreferences
- 授予 getUserMedia（相机）权限
- 修改响应头以放宽默认内容安全策略 (CSP)。
项目结构
electron/
├── main.js # Electron main process
├── preload.js # Context bridge – runs before renderer
├── package.json
└── src/
├── index.html # Renderer HTML
├── renderer.js # All scanning / SDK logic
├── utils.js # MRZ helper
├── styles.css
└── full.json # DCV MRZ capture template
主要进程：浏览器窗口和权限
main.js 是 Electron 应用程序的入口点（由 "main" 引用 package.json）。创建一个 BrowserWindow contextIsolation: true 并 nodeIntegration: false 保持渲染器沙箱化：
// main.js
const { app, BrowserWindow, session } = require('electron');
const path = require('path');
function createWindow() {
win = ({
: ,
: ,
: {
: path.(__dirname, ),
: ,
: ,
: ,
},
});
session..(
{
([, , ].(permission));
}
);
win.(path.(__dirname, , ));
}
app.().(createWindow);
app.(, {
(process. !== ) app.();
});
app.(, {
(.(). === ) ();
});
