前端通信【免费下载链接】decimen-optical-transfer项目地址https://gitcode.com/gh_mirrors/de/decimen-optical-transfer点击查看免费下载本文以docs/user/install-and-offline.md为骨架结合 package.json、vite.config.ts 与 build/ 目录下的构建插件源码系统讲解 Decimen Optical Transfer 的三种交付形态托管站点、单文件 HTML、Demo 模式的安装、离线能力与限制以及开发服务器为何强制 HTTPS。读完你可以根据是否需要服务器、是否必须离线、部署在什么设备上三个维度为实际场景选对交付形态并能在不联网环境下完成安装与传输。Decimen Optical Transfer 是一个用屏幕 摄像头在两台设备间传输文件的开源项目一端把文件编码为无限滚动的动画二维码流另一端用摄像头拍摄并重建文件设备之间没有任何网络路径详见 README.md。正因为没有网络是它的核心卖点安装与离线就成了用户最关心的部分。同一个源码可以构建出三种形态每种形态的离线能力、依赖条件和适用场景各不相同。三种形态一览同一源码三种交付项目所有构建产物都来自同一份源码三个页面 共享模块每次 release 都会附带三种形态的构建产物。官方文档用一张表概括了三者的关键差异形态是什么需要服务器离线能力Hosted site托管站点三个页面加一个 Service Worker在线托管于 decimen.app需要任意静态托管均可首次访问之后即可离线decimen-sender.html单个文件约 55 KB不需要始终离线decimen-receiver.html单个文件约 1.3 MB视情况而定见下文唯一的例外始终离线三种形态分别由npm run build托管站点、npm run build:standalone两个单文件产出npm run build:all则一次性构建全部产物。下面逐一展开。Hosted sitePWA 安装与离线托管站点形态是三个页面加一个 Service Worker即一个标准 PWAProgressive Web App。它的离线逻辑很简单站点预缓存了一切资源包括解码器 wasm——只要完整加载过一次之后断网也能正常工作。这一点对接收端尤其关键因为接收端需要解码 wasm见下文而vite.config.ts中 PWA 的globPatterns: [**/*.{js,css,html,wasm,png,svg}]明确把 wasm 纳入了预缓存范围。值得一提的细节是从任意页面加载都会缓存整个应用。即使你通过别人分享的链接直接落到/receive/也会把整个应用含发送页资源全部缓存下来。把它安装到主屏以获得全屏应用体验Android— 在 Chrome 菜单里选择Install app安装应用。该项目提供了真实的 manifest 和规范图标见public/目录下的icon-192.png、icon-512.png、icon-maskable-512.pngAndroid 要求 192 与 512 两种尺寸且尺寸信息真实才会认为应用可安装。iOS— 分享菜单 →Add to Home Screen添加到主屏幕。文档特别强调这是手机上最推荐的形态。因为托管站点保留了真实的https://origin而摄像头 API 只存在于安全上下文详见后文为什么开发服务器强制 HTTPS一节这正是摄像头所要求的条件。Service Worker 的两个工程细节源码佐证vite.config.ts的 PWA 配置中有两处值得注意的实现clientsClaim: true配合registerType: autoUpdate新版本 Service Worker 会立即接管已打开的页面。源码注释解释了原因没有clientsClaim时已打开的标签页仍绑定旧 Worker会出现硬刷新能看到新内容、普通刷新又变回旧内容的诡异现象。maximumFileSizeToCacheInBytes: 4 * 1024 * 1024workbox 默认单文件缓存上限是 2 MiB而仓库里的演示图片success-2mb.png恰好是 2 MiB处于边界上显式抬到 4 MiB 既消除边界问题又留出余量。runtimeCaching中的received-media缓存接收端收到的媒体会写入 Cache API对应receive/main.ts中的servableMediaUrl配合rangeRequests: true支持 Range 请求因为 iOS Safari 对blob:URL 的视频/音频播放不可靠但 WebKit 的媒体加载器接受带 Range 的 HTTP 响应。另外build/root-pwa-head.ts这个插件解决了两个 PWA 常见坑一是 manifest 与sw.js位于站点根目录而从/send/、/receive/子路径引用会 404插件会按页面深度自动改写为../前缀的引用二是它注入自定义的 Service Worker 注册脚本处理SKIP_WAITING握手与controllerchange后的自动刷新保证新版本 Worker 不会一直停在waiting状态。Standalone files两个零外部依赖的单文件npm run build:standalone产出两个内部没有任何外部内容的页面——没有script src、没有样式表、没有fetch。这意味着它们不依赖任何 CDN、字体、样式资源适合把文件邮件发出去或拷进 U 盘这种纯离线分发场景。体积差异的根源在于接收端把 940 KB 的解码 wasm 以data:URI 内嵌进了页面因此单文件达 1.3 MB发送端没有 wasm所以只有约 55 KB。这个内嵌由 build/inline-codec-wasm.ts 完成Vite 的?inline对.wasm无效Rollup 会把二进制当 JavaScript 解析所以该插件读取vendor/decimen-codec/decimen_codec.wasm并转成 base64 的data:application/wasm;base64,...字符串通过虚拟模块注入。单文件形态的构建管线源码佐证vite.config.ts中standalone-send与standalone-receive两个 mode 走同一套构建逻辑产物重命名后落到dist-standalone/。关键插件链包括useInlineVariantsbuild/use-inline-variants.ts把worker-factory、wasm-url、support三个模块在解析期替换为对应的.inline.ts变体如 receive/worker-factory.inline.ts 用?workerinline把 Worker 打包成 base64 blob URL——因为从file://页面加载 module worker 会被 opaque origin 阻止。之所以用解析期替换而非运行时分支是因为 inline 形态都有模块级副作用Rollup 会把死分支也保留下来。viteSingleFilevite-plugin-singlefile把所有 JS/CSS 内联进 HTML。standaloneCspbuild/standalone-csp.ts给单文件页面注入default-src none的严格 CSP让没有网络从意图变成可执行——任何依赖项改动导致偷偷外联时浏览器会直接拒绝而不是在气密隔离的机器上静默外联。文档还解释了wasm-unsafe-eval是必需的否则WebAssembly.instantiate被 CSP 直接封死解码器永远无法启动以及connect-src data: blob:的原因Emscripten 会 fetch data: URI 的 wasm解码 Worker 是 blob: URL。emitAsbuild/emit-as.ts把send/index.html、receive/index.html重命名为易记的decimen-sender.html、decimen-receiver.html。接收端的唯一例外file://下的 opaque origin这是整篇文档里最重要的一个限制务必记住从file://打开接收页时页面获得的是opaque origin。桌面 Chrome 和 Firefox 一般会弹出摄像头授权并正常工作但iOS Safari 和 Android Chrome 不会把摄像头给一个本地文件。由于接收端通常是手机官方建议通过任意 http(s) 服务来提供这个文件或者改用托管站点的离线模式。而发送端没有这个问题——它在file://下任何平台都能工作发送端不需要摄像头只涉及渲染二维码。顺带一提单文件接收页的 CSP 里img-src data: blob:、media-src blob: mediastream:、worker-src blob:等条目正是为了支撑这种零外联运行而配置的。Demo 模式无人值守的演示机npm run demo # sender locked to the two bundled imagesDemo 模式把发送端锁定到两个内置演示图片上没有文件选择器、没有文本框——适合一台发送机摆在人群前无人值守的展台场景。从源码看send/main.tsDEMO import.meta.env.VITE_DEMO 1demo、diagnostics、benchmark 三个模式共用这套开关逻辑demo 模式下send/main.ts会跳过文件选择与文本输入流程。文档给出了一个非常重要的安全定位这是VITE_DEMO1的 dev server不是加固的 kiosk——任何有键盘的人都能打开 devtools。它只是演示模式不是防篡改模式如果确实需要无人值守且防止被操作需要额外的加固手段。注意Demo 模式是 dev server 形态vite --mode demo不是独立交付物离线场景请用上面的单文件发送页。为什么开发服务器强制 HTTPS这是新手最容易踩的坑官方文档解释得非常清楚接收端使用getUserMedia摄像头 API而浏览器在非安全来源上会直接移除这个 API——手机通过纯 http 访问你的 dev server 时根本没有摄像头彻底不可用localhost是例外但手机不是 localhost。因此 dev server 默认启用 HTTPS开发服务器自带自签名证书由vitejs/plugin-basic-ssl插件在vite.config.ts中提供。手机首次访问时需手动信任证书iOS 上是Show Details → visit this website其他平台是Advanced → Proceed。点过一次之后页面即处于安全上下文摄像头即可正常工作。从源码看vite.config.ts中 dev server 与 preview 都设置了host: true以便局域网内的手机能访问开发服务器或npm run serve预览的生产构建。结合前文托管站点形态天然是https://真实 origin所以手机端最省事单文件接收页则要么走 http(s) 服务、要么用托管站点离线模式才能拿到摄像头。实操把三种形态跑起来在仓库根目录执行npm install # 安装依赖 npm run dev # HTTPS 开发服务器带 HMR npm run serve # 构建后预览生产包 npm run demo # Demo 模式只能发送内置的演示负载 npm run build # 托管站点 → dist/ npm run build:standalone # 两个自包含单文件 → dist-standalone/ npm run build:all # 全部构建离线分发的典型路径是npm run build:standalone后把dist-standalone/decimen-sender.html与decimen-receiver.html拷到 U 盘、邮件附件或内网 http 服务上即可在没有公网的环境完成两端部署其中发送端可以直接双击从file://打开接收端建议经 http(s) 提供见上文 opaque origin 限制。小结按场景选形态你的场景推荐形态原因日常手机互传、想装到主屏托管站点PWA真实https://origin摄像头可用首次访问后离线发送端在气密/离线环境decimen-sender.html55 KB 单文件file://随处可用接收端在气密/离线环境decimen-receiver.html经 http(s) 提供或托管站点离线模式file://在移动端无摄像头权限展台、演示机无人值守npm run demo锁定内置演示内容但非加固 kiosk继续深入可参考架构文档、构建与发布文档、平台怪癖文档其中详细记录了getUserMedia相关的 iOS/Android/Safari 细节。赞分享前端通信【免费下载链接】decimen-optical-transfer项目地址https://gitcode.com/gh_mirrors/de/decimen-optical-transfer点击查看免费下载相关推荐Aptos 执行器Executor深入解析从区块执行到状态提交的完整技术指南Aptos 执行器Executor深入解析从区块执行到状态提交的完整技术指南 导读 Aptos 是一条 Layer 1 区块链其核心架构是一个 复制状态前端通信TerminusDB高级功能解析WOQL Datalog与目标搜索TerminusDB高级功能解析WOQL Datalog与目标搜索 TerminusDB是一个创新的分布式数据库以其独特的协作模型和强大的查询能力在数据管理数据库知识图谱后端如何快速切换游戏DLSS版本DLSS Swapper让升级降级回退一步到位如何快速切换游戏DLSS版本DLSS Swapper让升级降级回退一步到位 游戏更新后画面开始闪烁、帧数莫名下滑你折腾完驱动又调遍游戏内设置最后才发现是它桌面应用上一篇JumpServer高可用部署终极指南一次深夜宕机逼出的集群改造方案下一篇ComfyUI TTP Toolset未来 roadmap即将支持的SD3模型与动态切片功能预览创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考