React Native Expo应用无法显示Tello无人机视频流求助

• 确认Tello流已正确开启
  必须先向Tello发送command指令进入SDK模式，再发送streamon指令启动视频流，仅设置isStreaming状态不会触发Tello推流。示例代码：

  import dgram from 'react-native-udp';
  
  const startTelloStream = () => {
    const socket = dgram.createSocket('udp4');
    // 进入SDK模式
    socket.send('command', 8889, '192.168.10.1', (err) => {
      if (err) console.error('Command error:', err);
      // 启动视频流
      socket.send('streamon', 8889, '192.168.10.1', (err) => {
        if (err) console.error('Stream on error:', err);
        socket.close();
      });
    });
  };
  

• 检查VLC播放器的流地址格式
  Tello的视频流是UDP协议，正确的地址写法有两种，都可以尝试：

  • udp://0.0.0.0:11111（监听所有网卡的11111端口）
  • udp://@:11111（简化写法，省略IP）
    避免使用Tello的IP（192.168.10.1）作为流地址，因为Tello是向客户端的11111端口推送流，而非提供拉流地址。

• 验证EAS Build的权限配置
  Expo打包需要确保APP拥有必要的网络权限：

  1. Android：在app.json中添加权限配置：

     "android": {
       "permissions": [
         "INTERNET",
         "ACCESS_WIFI_STATE",
         "CHANGE_WIFI_STATE",
         "ACCESS_NETWORK_STATE"
       ]
     }
     

  2. iOS：允许任意网络加载（因为UDP流是非HTTPS的）：

     "ios": {
       "infoPlist": {
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
         }
       }
     }
     

• 排查react-native-vlc-media-player的配置与兼容性

  • 确保库版本与你的React Native/Expo版本兼容，比如React Native 0.7x需要使用react-native-vlc-media-player的最新稳定版。
  • 监听播放器的onError事件，捕获潜在的未显示报错：

    <VLCPlayer
      source={{ uri: 'udp://0.0.0.0:11111' }}
      style={{ flex: 1 }}
      onError={(error) => console.error('VLC Player Error:', error)}
    />
    

• 验证手机能否接收UDP流
  用手机自带的VLC APP测试：打开VLC → 点击「网络流」→ 输入udp://0.0.0.0:11111并播放。如果VLC APP也无法播放，说明是手机WiFi设置问题（比如系统防火墙阻止UDP端口）；如果能播放，说明问题出在React Native组件的配置上。

• 检查手机网络设置

  • 确保手机已连接Tello的WiFi（SSID通常为TELLO-XXXXXX），且未开启VPN或代理。
  • 部分安卓手机需要手动允许APP访问WiFi网络，可在「设置→应用→你的APP→权限」中确认网络权限已开启。

内容的提问来源于stack exchange，提问作者darukun