Universal IR Remote

Professional infrared control for all your devices

Comment

Inspiration

The inspiration for Universal IR Remote came from the everyday frustration of having multiple remote controls at home and the need for a unified solution. With the proliferation of smart devices and the infrared capability present in many smartphones (especially Xiaomi/Redmi), we saw an opportunity to create a progressive web app that would transform any compatible phone into a professional universal remote.

What it does

Universal IR Remote is a complete PWA (Progressive Web App) that turns your smartphone into a professional universal remote control. The app:

Automatically detects nearby IR devices using smart scanning Controls multiple types of devices: TVs, air conditioners, audio systems, projectors Allows you to record custom commands from original remotes Works completely offline once installed Includes an interactive demo mode for non-IR devices Multi-language support (Spanish and English) Optimized for mobile with haptic and audio feedback Adaptive interface with multiple color themes

How we built it

Core Technologies: React 18 with TypeScript for a solid, type-safe foundation Tailwind CSS for a responsive and modern design Vite as a bundler for rapid development PWA with service workers for offline functionality Advanced IR Architecture: We implement multiple layers of IR compatibility:

Specific Native APIs:

MiuiIR for Xiaomi/MIUI devices HyperOSIR for the new HyperOS system ConsumerIrManager for Android WebView Android Native Bridge for hybrid apps Smart Hardware Detection:

Database of known IR-enabled devices User Agent analysis for accurate identification Real-time verification of available APIs Real-Time IR Patterns:

NEC, Sony, and RC5 protocols implemented Timings accurate to the microsecond Support for multiple frequencies (36kHz, 38kHz, 40kHz, and 56kHz)

Advanced Features: Device scanner with proximity detection algorithms Recording system for custom commands with signal analysis Interactive demo mode with visual simulation of IR transmission Vendor-specific permission management Multi-sensory feedback (visual, haptic, auditory)

Challenges we ran into

  1. IR API Fragmentation Each manufacturer implements IR differently. We had to create an abstraction system that handled:

Xiaomi's proprietary APIs (MIUI/HyperOS) Standard Android implementations WebView limitations Permission differences by manufacturer

  1. Accurate Hardware Detection Identifying which devices actually have IR was complex:

Inconsistent User Agents Lack of standard APIs Devices with IR but no programmatic access False positives in detection

  1. Mobile Optimization Creating a seamless touch experience required:

Minimum 44px touch targets Safe area management for notch/dynamic island Accidental zoom prevention Accurate haptic feedback

  1. Realistic Demo Mode Convincingly simulate IR transmission:

Smooth IR wave animations Reactive device states Real-time command history Visual-auditory synchronization

Accomplishments that we're proud of

  1. Universal Compatibility We achieved support for the widest variety of IR devices on the market, with specific detection for Xiaomi/Redmi, which are the most common IR devices.

  2. Exceptional User Experience Intuitive interface that works perfectly on mobile devices Immersive multi-sensory feedback Smooth transitions and professional animations Demo mode that truly demonstrates functionality

  3. Robust Architecture Modular system with custom hooks Graceful error handling Local data persistence Fully typed TypeScript code

  4. Complete PWA Native installation on devices Full offline functionality Manifest optimized for app stores Service workers for smart caching

What we learned

  1. Native Mobile APIs We delved into the complexities of accessing specific hardware from web apps, especially RI, which lacks established web standards.

  2. Advanced Mobile Optimization We learned specific techniques for creating native-quality touch experiences:

Viewport and safe areas management Preventing unwanted browser behavior Optimizing performance for low-end devices

  1. Complex Systems Design We developed skills to handle:

Multiple APIs with different interfaces Complex application states Graceful fallbacks for unavailable functionality

  1. Hardware-Specific UX We understood how to design interfaces that adapt to the capabilities of the available hardware without compromising the experience.

What's next for Universal IR Remote

  1. Device Expansion Support for more IR protocols (Panasonic, Sharp, etc.) Cloud-based device database Machine learning for pattern detection Support for RF and Bluetooth devices
  2. Advanced Features Macros and automations Voice control Virtual assistant integration Synchronization between devices
  3. Technical Improvements Battery optimization IR pattern compression More sophisticated signal analysis Support for more manufacturers

What's next for Universal IR Remote

Public API for developers Device marketplace User community for sharing configurations Version for smart TVs and tablets The app represents a perfect example of how PWAs can access device-specific hardware while maintaining the portability and ease of distribution of web apps.

Built With

  • air-conditioners
  • and
  • and-android-native-bridge-for-true-infrared-transmission-ir-protocols:-implementations-of-nec
  • and-audio-systems-mobile-optimization:-touch-targets
  • and-custom-protocols-with-true-timing-patterns-for-universal-compatibility-with-tvs
  • android-consumer-ir-manager
  • detection
  • experimental-web-ir-api
  • frontend:-react-18-+-typescript-+-tailwind-css-+-vite-as-a-build-tool-and-dev-server-mobile-apis:-web-app-manifest
  • haptic-feedback
  • hardware
  • hyperos)
  • ir
  • localstorage-for-a-complete-pwa-with-offline-functionality-specific-ir-apis:-xiaomi-native-apis-(miuiir
  • mobile-first-responsive-design
  • on
  • rc5
  • safe-areas
  • service-workers
  • smart
  • sony
  • vibration-api
  • web-audio-api
  • xiaomi/redmi/samsung/lg
Share this project:

Updates