bashalarmistalt/decimen-optical-transfer

Kết luận: concept-only · Công nghệ: typescript · optical-data-transfer · camera-screen-io · offline-sync · p2p-ux

decimen-optical-transfer có vẻ là một công cụ thử nghiệm truyền dữ liệu qua kênh quang học (màn hình/camera) xây bằng TypeScript, nghiêng về demo/prototype hơn là hạ tầng lõi phổ dụng. Giá trị chính cho kho tri thức cá nhân là ý tưởng về offline / air-gapped transfer, cách đóng gói dữ liệu thành luồng thị giác, và UX ghép nối thiết bị không cần mạng.

📖 Giới thiệu chi tiết

🧩 Nó là gì?

bashalarmistalt/decimen-optical-transfer là một demo truyền file giữa hai thiết bị chỉ bằng màn hình và camera: một máy hiện các QR code động, máy kia dùng camera quét để ghép lại file. Không cần mạng giữa hai thiết bị, không cần app riêng, không cần ghép đôi thiết bị.

🎯 Giải quyết vấn đề gì? Dành cho ai?

Dự án này giải quyết bài toán: “Làm sao chuyển dữ liệu giữa hai thiết bị khi không muốn hoặc không thể dùng mạng, Bluetooth, cáp, hay dịch vụ đám mây?”

Nó đặc biệt hợp với:

• Người muốn tìm hiểu ý tưởng offline / air-gapped transfer: truyền dữ liệu giữa các thiết bị tách biệt mạng.
• Lập trình viên thích thử nghiệm với QR code, camera, trình duyệt và truyền dữ liệu.
• Người làm prototype UX cho kiểu “đưa máy này quét màn hình máy kia là nhận được dữ liệu”.
• Người quan tâm đến cách truyền file khi kênh truyền rất “khó chịu”: camera rung, mất khung hình, lệch tốc độ, autofocus làm mờ.

Nói đơn giản: đây không phải một sản phẩm hoàn chỉnh để thay AirDrop hay Nearby Share, mà là một proof of concept rất thú vị cho việc “truyền dữ liệu bằng ánh sáng”.

⚙️ Hoạt động ra sao?

• Thiết bị gửi mở trang /send/, rồi liên tục hiển thị file dưới dạng các QR code thay đổi nhanh.
• Thiết bị nhận mở trang /receive/, bật camera và hướng vào màn hình thiết bị gửi.
• Mỗi QR code không chứa “một mảnh file theo thứ tự đơn giản”, mà chứa một phần dữ liệu được tạo bằng fountain codes.
• Fountain codes có thể hiểu nôm na là: bên gửi tạo ra rất nhiều “mảnh pha trộn” từ file gốc; bên nhận chỉ cần gom đủ số mảnh hợp lệ là tự khôi phục được file, không cần nhận đúng từng mảnh theo thứ tự.
• Vì vậy nếu camera bỏ lỡ vài QR code do rung tay, mờ hình, lệch tốc độ màn hình/camera… thì vẫn ổn; chỉ cần đợi thêm một chút.
• Mỗi frame có header 20 byte chứa thông tin như session id, số thứ tự frame, kích thước block, độ dài file và hash.
• Không có bước bắt tay phức tạp: thiết bị nhận có thể bắt đầu giữa chừng, thấy stream hợp lệ là theo dõi và ghép file.
• Khi nhận xong, file được kiểm tra bằng hash để đảm bảo dữ liệu khớp.
• Việc đọc QR dùng zxing-cpp biên dịch sang WASM thông qua zxing-wasm, chạy trong worker để xử lý camera frame hiệu quả hơn.
• Dự án được xây bằng TypeScript, Vite, node-qrcode và zxing-wasm.

🆚 Khi nào nên dùng / không nên

Nên dùng khi:

• Bạn muốn thử nghiệm truyền dữ liệu không cần mạng giữa hai thiết bị.
• Bạn muốn học cách QR code động, camera browser API và fountain codes phối hợp với nhau.
• Bạn cần demo một luồng truyền dữ liệu “máy này hiện, máy kia quét”.
• Bạn chấp nhận đây là prototype để nghiên cứu, không phải công cụ sản xuất ổn định.

Không nên dùng khi:

• Bạn chỉ cần chuyển file nhanh trong đời thường; AirDrop, Nearby Share, USB, Wi-Fi Direct hoặc gửi qua mạng thường tiện hơn.
• Bạn cần truyền file lớn, ổn định, có giao diện người dùng hoàn chỉnh.
• Bạn cần bảo mật cấp sản phẩm; repo này là PoC tối giản, không phải giải pháp bảo mật đầy đủ.
• Bạn không có điều kiện dùng camera hoặc màn hình đủ sáng/rõ.

So với cách “chia file thành nhiều QR code tuần tự”, decimen-optical-transfer thông minh hơn ở chỗ bên nhận không cần bắt đủ từng QR theo đúng vòng lặp. Nhờ fountain codes, mất frame chỉ làm chậm quá trình, không làm hỏng toàn bộ phiên truyền.

🚀 Bắt đầu nhanh

Cài đặt và chạy:

npm install
npm run dev

Sau đó:

1. Trên thiết bị gửi, tốt nhất là laptop, mở:

https://localhost:5173/send/

Trang này sẽ bắt đầu stream ngay. Tăng độ sáng màn hình sẽ giúp camera đọc tốt hơn.

2. Trên thiết bị nhận, thường là điện thoại, mở URL Network mà Vite in ra, ví dụ:

https://<lan-ip>:5173/receive/

3. Vì dev server dùng chứng chỉ tự ký, trình duyệt có thể cảnh báo bảo mật. Hãy chấp nhận cảnh báo một lần để tiếp tục.

4. Nhấn Start camera rồi hướng camera vào QR code trên màn hình thiết bị gửi.

5. Giữ điện thoại ổn định. Nếu được, hãy tựa điện thoại vào vật gì đó để tránh rung và tránh autofocus liên tục.

Ví dụ tối thiểu:

git clone https://github.com/bashalarmistalt/decimen-optical-transfer.git
cd decimen-optical-transfer
npm install
npm run dev

Mở trang gửi:

https://localhost:5173/send/

Mở trang nhận trên điện thoại:

https://<lan-ip>:5173/receive/

Lưu ý quan trọng: trang nhận cần https vì trình duyệt chỉ cho dùng camera qua getUserMedia trong “secure context”. localhost được miễn, nhưng điện thoại truy cập qua IP LAN thì không, nên dự án dùng @vitejs/plugin-basic-ssl để tạo HTTPS khi chạy dev.

✅ Điểm mạnh & ⚠️ Hạn chế

Điểm mạnh:

• Không cần mạng giữa hai thiết bị; dữ liệu đi qua ánh sáng từ màn hình sang camera.
• Không cần cài app riêng, chỉ dùng trình duyệt.
• Chịu được việc mất frame nhờ fountain codes.
• Có cơ chế kiểm tra hash để xác nhận file nhận được là đúng.
• Ý tưởng gọn, dễ demo, rất phù hợp để học về truyền dữ liệu qua kênh quang học.
• Có phần Settings để chỉnh payload size, tx fps, bytes per frame, QR error correction, kích thước hiển thị, capture width, capture fps và số decode worker.

Hạn chế:

• Đây là proof of concept tối giản, không phải sản phẩm hoàn chỉnh.
• Tốc độ phụ thuộc mạnh vào camera, màn hình, độ sáng, khoảng cách, độ rung và autofocus.
• File demo chủ yếu là ảnh 512 KB hoặc 2 MB theo thiết lập có sẵn.
• Cần HTTPS để trình duyệt cho phép dùng camera trên thiết bị nhận.
• Trình duyệt có thể cảnh báo chứng chỉ vì dev server dùng self-signed certificate.
• Không phù hợp nếu bạn cần truyền file lớn, nhanh, ổn định và tiện như các công cụ chia sẻ file chuyên dụng.