Cho đến khi xây dựng được môi trường QA mô phỏng iOS/Android trên trình duyệt — Vì sao chúng tôi bỏ MSE

Nếu là một đội ngũ làm ứng dụng di động, có lẽ bạn đã từng gặp chuyện này ít nhất một lần. Thiết bị test thì lúc nào cũng thiếu, còn việc bao phủ đồng đều các phiên bản OS cũng không hề dễ. Nhưng nếu dùng simulator thì lại cần Xcode hoặc Android Studio, nên với những thành viên không có môi trường phát triển di động như PM, designer hay backend developer, ngay từ đầu đã bị chặn đường tiếp cận.

Mỗi khi có những yêu cầu kiểu như "Tôi cần xem bản đã deploy lên sandbox một lần, phải cài app thế nào?", mobile developer lại phải dừng việc đang làm để hỗ trợ.

Chúng tôi cũng đã cân nhắc Appetize và BrowserStack. Tuy nhiên, vì (1) chi phí tăng rất nhanh khi quy mô đội ngũ lớn lên và (2) cấu trúc phải upload binary của app lên cloud bên ngoài khiến chúng tôi lăn tăn, nên cuối cùng đã tự làm bằng chiếc Mac còn dư.

Thứ được tạo ra theo cách đó là tapflow — một công cụ self-hosted mã nguồn mở cho phép bất kỳ ai trong team cũng có thể làm QA di động bằng iOS simulator và Android emulator ngay trên trình duyệt. Phía người xem không cần cài gì cả, chỉ cần mở trình duyệt; và vì là self-hosted nên dữ liệu ứng dụng cũng không rời khỏi máy Mac của team.

Điều khó nhất khi làm ra nó không phải là tính năng mà là độ trễ (latency). Chỉ cần màn hình chậm đi nửa nhịp thôi là mọi người sẽ thử cuộn một lần rồi đóng ngay. Hơn nữa, màn hình simulator còn phải đi qua pipeline agent → relay → render trên trình duyệt, nên độ trễ tích lũy ở từng chặng. Dưới đây là những gì chúng tôi đã làm để giảm độ trễ trên đường đi đó:

• Chúng tôi đã bỏ MSE. Vì media buffer của <video> về mặt cấu trúc đã chèn thêm khoảng ~235ms, nên chúng tôi thay bằng kiến trúc 2 tầng WebCodecs (security context) / WASM tinyh264 (HTTP thường). Khai báo reorder=0 trong SPS giúp decode→present giảm từ 267ms xuống 2.5ms. (đo trên localhost với một clock duy nhất)
• Đã benchmark 4 decoder (tinyh264/FFmpeg/openh264), nhưng cuối cùng vẫn giữ tinyh264 — FFmpeg chỉ thắng ở khung hình tĩnh, còn khi cuộn thì lần nào cũng thua, chưa kể bundle lớn gấp 11 lần. Nút thắt không nằm ở decoder mà ở tải và truyền tải.
• Chúng tôi cải thiện Android SW encoding bằng HW encoding của Mac. Trong emulator không có HW H.264 encoder nên scrcpy bị chặn bởi SW encoder (22–29fps). Chúng tôi đẩy raw frame ra host qua gRPC rồi encode bằng Mac VideoToolbox → đạt 59fps (downscale). (capture mặc định 30fps, thiết bị thật vẫn dùng scrcpy)
• Không cần WDA cho iOS touch (inject trực tiếp qua CoreSimulator HID API), Mac Agent chỉ tạo kết nối outbound tới relay (không cần rule firewall inbound).

Giới hạn: iOS agent chỉ hỗ trợ macOS, phần touch dùng Private API nên có thể hỏng khi macOS cập nhật, hiện vẫn là v0.x, chưa hỗ trợ thiết bị thật.

npm install -g tapflow  
tapflow start   # → http://localhost:4000  

Giấy phép MIT GitHub: https://github.com/jo-duchan/tapflow Tài liệu: https://www.tapflow.dev

Rất hoan nghênh ý kiến từ những ai từng gặp vấn đề về quyền truy cập simulator, hoặc có quan điểm về streaming độ trễ thấp / cách tiếp cận Private API.