Membangun lingkungan QA simulator iOS/Android di browser — alasan kami meninggalkan MSE

Kalau Anda bekerja di tim yang membuat aplikasi mobile, kemungkinan besar pernah mengalami ini setidaknya sekali. Perangkat uji selalu kurang, dan sulit juga mencakup berbagai versi OS secara merata. Di sisi lain, kalau memakai simulator, Anda butuh Xcode atau Android Studio, jadi anggota tim seperti product manager, desainer, atau developer server yang tidak punya lingkungan pengembangan mobile bahkan terhalang untuk mulai mencoba. Setiap kali ada permintaan seperti, "Saya perlu lihat yang sudah di-deploy ke sandbox, bagaimana cara pasang aplikasinya?", developer mobile harus menghentikan pekerjaannya untuk membantu.

Kami juga sempat mempertimbangkan Appetize dan BrowserStack. Namun, kami keberatan dengan (1) biaya yang cepat naik seiring membesarnya tim dan (2) struktur yang mengharuskan binary aplikasi diunggah ke cloud eksternal, jadi kami akhirnya membuatnya sendiri menggunakan Mac yang menganggur.

Hasilnya adalah tapflow — alat open source self-hosting yang memungkinkan siapa pun di tim melakukan QA mobile dengan simulator iOS dan emulator Android langsung dari browser. Dari sisi pengguna, tidak perlu memasang apa pun, cukup buka browser saja, dan karena self-hosting, data aplikasi juga tidak keluar dari Mac milik tim.

Bagian tersulit saat membuatnya bukanlah fitur, melainkan latensi. Kalau tampilan tertinggal setengah ketukan saja, biasanya orang akan coba scroll sekali lalu menutupnya. Ditambah lagi, layar simulator melewati pipeline render agent → relay → browser, sehingga latensi menumpuk di tiap titik. Berikut hal-hal yang kami rapikan sambil mengurangi latensi di jalur ini:

• Kami meninggalkan MSE. Buffer media <video> secara struktural menambahkan sekitar ~235ms, jadi kami menggantinya dengan dua tingkat: WebCodecs (secure context) / WASM tinyh264 (HTTP biasa). Dengan mendeklarasikan reorder=0 pada SPS, decode→present turun dari 267ms menjadi 2.5ms. (diukur pada localhost dengan single clock)
• Kami membenchmark 4 decoder (tinyh264/FFmpeg/openh264), tetapi pada akhirnya tetap memakai tinyh264 — FFmpeg hanya unggul pada layar diam, tetapi selalu kalah saat scroll, dan ukuran bundlenya juga 11 kali lebih besar. Bottleneck-nya bukan decoder, melainkan beban dan transmisi.
• Kami meningkatkan encoding SW Android menjadi encoding HW di Mac. Emulator tidak memiliki encoder HW H.264, sehingga scrcpy terhambat oleh encoder SW (22–29fps). Frame mentah dikeluarkan ke host lewat gRPC lalu di-encode dengan Mac VideoToolbox → 59fps (downscale). (capture default 30fps, perangkat fisik tetap memakai scrcpy)
• Tanpa WDA, touch iOS dilakukan dengan injeksi langsung ke CoreSimulator HID API, dan Mac Agent hanya membuat koneksi outbound ke relay (tanpa perlu aturan firewall inbound).

Keterbatasan: agen iOS hanya untuk macOS, touch memakai Private API sehingga bisa rusak setelah update macOS, masih v0.x, dan belum mendukung perangkat fisik.

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

Lisensi MIT
GitHub: https://github.com/jo-duchan/tapflow
Dokumentasi: https://www.tapflow.dev

Bagi yang pernah mengalami masalah akses simulator, atau punya pendapat soal pendekatan streaming latensi rendah / akses Private API, masukan sangat kami sambut.