慣性聚合 高效追讀感興趣之博客、新聞、科技資訊
閱原文 以慣性聚合開啟

推薦訂閱源

博客园 - 司徒正美
V
V2EX
T
Tailwind CSS Blog
有赞技术团队
有赞技术团队
aimingoo的专栏
aimingoo的专栏
Apple Machine Learning Research
Apple Machine Learning Research
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
A
About on SuperTechFans
月光博客
月光博客
T
The Blog of Author Tim Ferriss
宝玉的分享
宝玉的分享
Martin Fowler
Martin Fowler
博客园 - 聂微东
The GitHub Blog
The GitHub Blog
V
Visual Studio Blog
WordPress大学
WordPress大学
酷 壳 – CoolShell
酷 壳 – CoolShell
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python)
构建PROTO RECON——自朦胧之念至浏览器战术HUD
Katsuo Imai · 2026-05-24 · via DEV Community

引言

是篇文,述说PROTO RECON之方术 — 一实验之应用,合手机之感应器与浏览器内之机器学习,自编程之前之需求演至于今。吾已验其界面之行,然犹初读其源码之阶。于此,吾辑其原之需求与人工智能所生之源码图,以为将来深究之基。

此乃测试之中。繁重任务之调优未竟——自行承担风险。


其始也

起于一疑: 可乎筑数字之体验于真实世界之上? 其念之萌,在今之电话传感,能否将旧时科幻游戏之机器人视或机舱视之景,叠于实景之上。

著码之先,吾撮其要,与灵机对谈,化功能之约于文辞,而后始事。


技术之择(未施之先)

采用 / 考量 注记
物形之辨 TensorFlow.js (COCO-SSD / BlazeFace) "物象辨识"为机器人视感之枢,尽在浏览器中
地图 小叶 游戏中所习见之"此处即你"之示也
躁声 / 效应 初时GLSL / three.js 欲复用旧时筑效之经验

噪层乃后加之。吾使游标行之,三.js 被弃,而择 Canvas 2D 与 CSS 以效 CRT。直书无赘,故体轻——此决实偿于真器.

陀螺、罗盘、高程(于所支之器),GPS 及类此之器亦在目,联于HUD与微图.


当时之需(概要)

谋篇之文——经与人工智能反复商讨而成——题曰战术侦察&指揆终局"项目:锁定(暂名)"。彼时,传感之精微,使吾辈推度第二阶段必需以Unity(原生)为基重撰之。。然以游标编程,事竟顺遂,虽无three.js,景亦转佳,遂向。一阶段或可独于网中成之

核心之旨

  • 形貌:单色绿之军式界面,扫描线,噪影
  • 。人工智能。:实时目标侦测,锁定追踪
  • :沉浸感:陀螺仪、高度计、蜂鸣声——仪器与音效反馈
  • :未来:VR眼镜HUD,视线控制(概念阶段)

计划与现状

:项目 :计划(截至2026年4月) :当前(原型侦察)
堆栈 Next.js + Three.js + TF.js Vite + 纯 JS + TF.js (无 Three.js)
Altimeter 气压传感器 (假定原生支持) 地理位置altitude (仅支持特定设备)
地图 (计划中仅略作说明) Leaflet 微缩图已实现
导弹效果 点击发射虚拟导弹 尚未实现
第二阶段Unity 气压高度、触觉等 尚未开始 (网页原型持续进行中)
距离显示 (规划中多未明确) WebXR击测仅计(无边界框预估距离)

全规划文卷因长而收

全规划文卷(项目:锁定之击草稿)

战术侦察&指导终端应用——"项目:锁定之击(暂名)规划文卷"

此篇总括一智能手机相机滤镜之构思,融复古未来主义界面与现代人工智能于一体。

一、项目概览

一"戏"之应用,复现八十至九十年代科幻电影游戏中所见之军事侦察终端之体验,以实时智能手机相机馈路与人工智能为之。军事侦察终端

二、核心构思

  • 视觉:單色緑,呼應舊式終端。掃線與雜訊,復古之趣盎然。
  • :人機互動。:實時物體辨識,自動鎖定目標。
  • :沉浸體驗。:陀螺儀,氣壓高度計,蜂鳴反饋。
  • :擴展性。:VR眼鏡(如Hacosco)與視線控制HUD——概念階段。

三、主功能(节选)

三、一、视频滤镜

  • 绿幕覆盖(夜视镜纹理)
  • 边缘条形图及扫描指示器

三、二、AI锁定

  • 自动移动目标检测,以绿框追踪
  • 目标恒定于准星中心时,SE加速
  • 锁启毕:匣转赤,警音鸣。
  • 轻点以发射虚拟导弹(效果)

3.3 传感仪器

  • 旋仪:俯仰偏转之数显
  • 气压计:相对高度(源自气压传感器,如 iPhone 等)

四、发展之期(当时之路线图)

  • 一阶段:網絡原型(Next.js 與 Three.js 與 TF.js)。可通 URL 分享。
  • :第二階段。:Unity 端口。氣壓高度,震動。
  • :第三階段。:VR/XR。立體顯示,視線鎖定。

:五、發布策略。

:Qiita / Zenn 記錄開發,社交短視頻,Reddit 記錄等。

肇于丙申年四月廿九日(规划之期)


开发之序

编撰之事委诸光标,渐次增其能,至于今之状。至若示之方,吾载其要于金米,询以何方为善。已察其行于界面,然观其本,乃其次事。下所列之目次及相倚之图,乃智工所造,为是文而洁之。


本源之陈

众木之根,乃乎HTML

角色
index.html 主界面。BIOS/启动画面,启动进度,相机画面,准星/检测覆盖,指南针/高度条,小地图,CRT效果等。加载/src/main.js为模块
privacy.html 隐私政策(静态页面:收集数据,使用目的等)
oss-notice.html 静态开源软件/第三方许可声明

src/ — 运行时文件

入口,配置,界面

文件 角色
main.js 应用中心。启动序列,相机获取,模块启停,HUD更新,用户操作(启停、锁定等)
appConfig.js 开发者调校默认值(相机、CRT、物体检测、面部遮罩、小地图、动作联动、实时健康等)
applyDevConfig.js 应用于devConfig.crt作为CSS变量于document.documentElement(光晕、扫描线等)
uiLexicon.js 一源统合界面文字(如启动画面、状态显示、错误提示、缩略图标签等),兼具将文字应用于HTML之能
style.css 全局布局、HUD、CRT、缩略图及准星样式(绿军风界面)

视频与人工智能推演

文件 角色
tfBackend.js 一次性TensorFlow.js后端初始化(WebGPU→WebGL→CPU)
personDetection.js COCO-SSD 物体检测。边界框绘制,锁定区域,目标事件,推理健康通知
facePrivacy.js 焰面识形隐面(私域覆层)
lockTrackKeys.js 锁区目标稳定ID(位置量化+与前帧匹配)

遥距&增强现实

文牍 职司
objectRange.js HUD上目标距离——仅测量实际距离(WebXR等);不包含bbox估算距离
webxrHitTestRange.js WebXR沉浸式AR结合真实世界距离(米)输入至objectRange

导航,地图,传感器

文件 角色
compass.js 设备朝向(指南针)封装。朝向解析,方位标识,iOS权限请求
miniMap.js 地望监察与微图之表(位、向、速、高之应)
miniMapLeaflet.js 叶图之始,现位之标(向箭),瓦片之显
motionHud.js 倾β/γ于DeviceOrientation,以适右立之HUD
motionStabilityLink.js 倾/震之连,于准星/微图之视差及警(含振)

应 &监察

文件 角色
liveHealth.js 轻量级实时健康监察(推理延迟、连续失败、视频停滞)及HUD通知
audioFx.js Web音频API用于启动、检测、锁定、错误音效等

src/—仅测试(未在屏幕上使用)

文件 角色
lockTrackKeys.test.js 单元测试lockTrackKeys.js
liveHealth.test.js 之单元測試,liveHealth.js
tfBackend.test.js 之单元測試,tfBackend.js

依賴關係(概覽)

flowchart TB
  index[index.html] --> main[main.js]
  main --> config[appConfig / applyDevConfig / uiLexicon]
  main --> cam[camera + HUD]
  main --> det[personDetection]
  main --> face[facePrivacy]
  det --> tf[tfBackend]
  face --> tf
  main --> map[miniMap]
  map --> leaf[miniMapLeaflet]
  main --> nav[compass / motionHud / motionStabilityLink]
  main --> range[objectRange]
  range --> xr[webxrHitTestRange]
  main --> health[liveHealth]
  main --> sfx[audioFx]

進入全屏模式 退出全屏模式

main.js 統攝萬物;appConfig.js 設置與 uiLexicon.js 复制驅動行為與顯示,跨模塊傳遞之。


結束 — 次當閱讀何者

后之文将开源并逐细探之。下之研习路径乃所定阅文次序(01已以此文之文图毕之)

源文研习路径(三十二部——点击展之)

第一阶——配置与骨格(无需权限)

[#] 题/旨 主文件 核心技术 常见陷阱
01 全图—角色于src/ - 何文件主何 不读码而记文件名
02 devConfig — 远程控制行为 appConfig.js 相机、检测、CRT键义 一变而涉全应用
03 一源供界面文字——uiLexicon uiLexicon.jsindex.html 集中字符串与错误信息 寻遗硬编码文字
04 CRT标记至CSS——applyDevConfig applyDevConfig.jsstyle.css JS配置→CSS变量(:root) 变量名拼写误破样式
05 HTML之骨 — 浮影 & HUD之DOM index.html 层叠(视频/画布/HUD) z-index vs hidden属性

第二幕 ⭐⭐ — 观之而启"戏台"(无镜亦可试之)

界面之动与音之控,无需器之权.

# 標題 / 題旨 主文件 核心之技 常犯之失
水花,基本输入输出系统,乱码文 main.jsstyle.css 首运行界面流程,计时控制 计时器重置,文句错乱
启动覆盖层——进度与步骤 main.js 启动时异步状态 失败步骤永无过渡至error
08 Web音频——点击后播放 audioFx.js AudioContext及用户手势 自动播放策略,静默错误
09 十字准星SVG与固定布局 index.htmlstyle.css 居中固定CSS布局 何故motionStabilityLink 已禁用
10 实时HUD帧与CRT噪声 style.cssmain.js 视频扫描线效果 噪声渲染成本canvas

第三阶段 ⭐⭐⭐ — 媒体、传感器、磁带(需真实设备)

[#] 标题/主题 主文件 核心技术 常犯之失
十一 鏡頭 —getUserMedia且蓄好尚 main.js facingMode, 流水之取 iOS之权限时序,连接悬滞
十二 視頻演講——object-fit: cover style.cssmain.js 隐晦渐显之预览过渡 非所愿之镜缩
十三 启动全序列——startCamera main.js 轻触后:相机→模型载入 并行与串行切换时之故障日志
14 航向胶带——连续角度与N跳 compass.jsmain.js 0°–360°展开,SVG控制 北向(N)剪裁,填充不足
15 倾斜胶带——β / γ与motionHud motionHud.jsmain.js DeviceOrientation deviceorientationabsolute行为异同
16 Altitude tape — GPS altitude callback miniMap.jsmain.js Geolocation API Devices where altitude is null
17 Minimap — Leaflet and OSM/CARTO miniMap.js External tile map, marker 處理位置拒絕
18 速度HUD — 公里每小時自coords.speed miniMap.js 坐標變更之速度 速度顯--當靜止時

第四階段 ⭐⭐⭐⭐ — 檢測、隱私、機器學習

# 標題/主題 主要文件 核心技術 常遇陷阱
19 TF.js后端—WebGPU→WebGL→CPU tfBackend.js 图形API回退 不兼容设备,首编译,发热
20 COCO-SSD简介—ensureModel与节流 personDetection.js 模型载入,推理节流 CDN载入失败,动态import()
21 框线绘制drawVideoCover且画布 personDetection.js 对齐绘制video方之理也 失谐之变,DPR
廿二 锁定区—驻留,键位稳定 personDetection.js 追踪标识,平滑 身份易位,明灭闪烁
廿三 距離—僅WebXR觸發測試 objectRange.jswebxrHitTestRange.js HUD上测距 不兼容设备无距离显示
二十四 面部马赛克—BlazeFace与画布合成 facePrivacy.js rAF加限速推理 绘制周期与推理冲突
二十五 马赛克间隔与热度—intervalMs facePrivacy.js 推理FPS与负载权衡 機器凍結,熱節流

第五階 ⭐⭐⭐⭐⭐ — 整合,運作,錯誤

[#] 標題 / 主題 主要文件 核心技術 常見陷阱
26 實時健康 — 延遲,視頻停滯 liveHealth.js 主線程停滯監測 负载峰值之下的误报
廿七 初创企业之错误处理——超时及catch main.js 异步之误隙 模型载入超时
廿八 再访而存其迹 vite.config.js PWA(Progressive Web App),Vite构建 failed to fetch dynamically imported module
廿九 重审重启 — 模型废弃 main.js 谨防内存泄漏 再试甚重
30 motionStabilityLink — 何以视差被裁 motionStabilityLink.js 视差与可读性 渲染滞涩
31 整合 — main.js协奏 main.js (全) 生命周期管理 触控时紧密耦合破除
32 回望录——瑕疵录及来日之计 此应用整体 定于减负之策 论"致命之虫已逝"

后篇将启于路图《二》(appConfig.js)。