秀HN:通过扫描文本快速连接WiFi,无需打字
Show HN: Quickly connect to WiFi by scanning text, no typing needed

原始链接: https://github.com/yilinjuang/wify

Wify 是一款基于 React Native 和 Expo 的应用,利用图像识别和模糊匹配简化 WiFi 连接过程。它使用 ML Kit 的文字识别功能扫描图片(可拍照或从图库选择),支持拉丁文、中文、日文和韩文。提取的 WiFi 名称会通过 Fuse.js 与附近的网络进行匹配,从而应对细微的差异。应用通过 `react-native-wifi-reborn` 连接到选择的网络,并在必要时提示输入密码或修改密码。Wify 会优雅地处理相机、位置和照片库权限,提供用户友好的提示并在应用恢复时重新检查权限。它拥有结构良好的项目架构,包含用于扫描、连接模态框和权限管理的组件。WiFi 操作、文字识别和权限处理的实用工具增强了模块化。代码已在 GitHub 上开源,并采用 MIT 许可证。

作者ylj开发了一款名为Wify的安卓应用,旨在简化在酒店、咖啡馆等场所连接WiFi的过程。Wify无需手动输入SSID和密码,而是利用手机摄像头扫描打印的WiFi信息(网络名称和密码),然后在屏幕上生成二维码。用户随后可以使用谷歌搜索或谷歌镜头通过此二维码立即连接到网络。该应用还允许从图库导入图片。目前Wify仅限安卓系统,因为iOS的API存在差异。 Hacker News上的评论讨论了这款应用的实用性,一些评论建议使用安卓自带的功能,例如WifiNetworkSuggestion,并质疑生成二维码的必要性。另一些评论则强调了该应用在没有二维码且显示屏上显示WiFi名称和密码为文本时的实用性。评论中也提到了其他替代方案,例如使用安卓自带的二维码扫描器或iOS上的“扫描文本”功能。

原文

A React Native application that scans WiFi text to extract WiFi credentials, matches them with nearby networks, and connects to them.

  • Text Recognition (OCR): Extract WiFi credentials from text in images.
  • Image Picker: Select images from gallery for WiFi credential extraction.
  • WiFi Network Scanning: Scan for nearby WiFi networks.
  • Fuzzy Matching: Match extracted WiFi names with available networks using Fuse.js.
  • WiFi Connection: Connect to matched WiFi networks using react-native-wifi-reborn.
  • Permission Handling: Proper handling of camera and location permissions with user-friendly prompts.
  • Multi-language Support: OCR recognition for Latin, Chinese, Japanese, and Korean scripts.
  • Framework: React Native with Expo
  • Router: Expo Router
  • WiFi Management: react-native-wifi-reborn
  • Camera: expo-camera
  • Text Recognition: @react-native-ml-kit/text-recognition
  • Image Picker: expo-image-picker
  • Location Services: expo-location
  • Fuzzy Search: Fuse.js
  • Icons: @expo/vector-icons
  1. Clone the repository:

    git clone https://github.com/yourusername/wify.git
    cd wify
  2. Install dependencies:

  3. Run the app:

  4. For development on physical devices:

    # For Android
    npm run android
    
    # For iOS
    npm run ios
  1. Launch the app and grant the required permissions (camera and location).
  2. Point the camera at a WiFi text containing WiFi credentials.
  3. Alternatively, tap the gallery icon to select an image containing WiFi information.
  4. The app will scan for nearby WiFi networks and match them with the extracted credentials.
  5. If multiple networks match, you can select the correct one from a list.
  6. Confirm the connection and edit the password if needed.
  7. Connect to the WiFi network.

The app requires the following permissions:

  • Camera: To scan WiFi text.
  • Location: Required by the WiFi scanning functionality to discover nearby networks.
  • Photo Library: To access images for WiFi credential extraction.
  • app/: Main application code using Expo Router
    • index.tsx: Main app component
    • _layout.tsx: App layout configuration
  • components/: React components
    • WiFiScanner.tsx: Main component for camera and WiFi text scanning
    • WiFiConnectionModal.tsx: Modal for connecting to WiFi networks
    • PermissionsModal.tsx: Modal for handling permission requests
  • utils/: Utility functions
    • wifi.ts: WiFi operations including scanning, connecting, and parsing
    • textRecognition.ts: OCR functionality for extracting WiFi credentials from images
    • permissions.ts: Permission handling utilities
  • assets/: Images and other static assets

Key Features Implementation

  • Text Recognition: Uses ML Kit to recognize text in multiple languages and extract WiFi credentials.
  • Fuzzy Matching: Uses Fuse.js to match extracted WiFi names with available networks, even with slight differences.
  • Permission Handling: Gracefully handles permission requests and provides guidance when permissions are denied.
  • Background App State: Rechecks permissions when the app returns from background.
demo.mp4

MIT

联系我们 contact @ memedata.com