我目前正在开展一个项目，试图将视频从 Tello 无人机流式传输到使用 React Native 和 Expo 构建的移动应用程序，我已经在我的应用程序上完成了 EAS Build ...
我目前正在开展一个项目，试图将视频从 Tello 无人机传输到使用 React Native 和 Expo 构建的移动应用程序，我已经在手机上为应用程序进行了 EAS Build。我正在使用 react-native-vlc-media-player 库来处理视频流。
以下是我的 DroneScreen.js 文件中的相关代码：
import React, { useEffect, useState, useRef } from "react";
import {
Button,
StyleSheet,
View,
Dimensions,
Image,
TouchableOpacity,
ScrollView,
Animated,
ActivityIndicator,
} from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import dgram from "react-native-udp";
import KText from "../components/KText";
import { VLCPlayer } from "react-native-vlc-media-player";
import _ from "lodash";
import Icon from "react-native-vector-icons/FontAwesome5";
const screenWidth = Dimensions.get("window").width;
export default function DroneScreen() {
const [isConnected, setIsConnected] = useState(false);
const [isStreaming, setIsStreaming] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isInitialScreen, setIsInitialScreen] = useState(true);
const [fadeAnim] = useState(new Animated.Value(0));
const clientRef = useRef(null);
const serverRef = useRef(null);
const videoServerRef = useRef(null);
const playerRef = useRef(null);
useFocusEffect(
React.useCallback(() => {
fadeAnim.setValue(0);
Animated.timing(fadeAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}, [])
);
useEffect(() => {
clientRef.current = dgram.createSocket("udp4");
serverRef.current = dgram.createSocket("udp4");
videoServerRef.current = dgram.createSocket("udp4");
try {
clientRef.current.bind(8889);
serverRef.current.bind(8890);
videoServerRef.current.bind(11111);
} catch (err) {
console.error("Failed to bind socket", err);
return;
}
let timeoutId = null;
let intervalId = null;
let state = null;
let rinfo = null;
serverRef.current.on("message", (msg, rinfo) => {
state = parseState(msg.toString());
rinfo = rinfo;
setIsConnected(true);
});
intervalId = setInterval(() => {
if (state && rinfo) {
console.log(`server got: ${state} from ${rinfo.address}:${rinfo.port}`);
}
}, 15000);
videoServerRef.current.on("message", (msg, rinfo) => {
setIsStreaming(true);
});
timeoutId = setTimeout(() => {
setIsConnected(false);
}, 5000);
return () => {
clientRef.current.close();
serverRef.current.close();
videoServerRef.current.close();
clearTimeout(timeoutId);
clearInterval(intervalId);
};
}, []);
function parseState(state) {
return state
.split(";")
.map((x) => x.split(":"))
.reduce((data, [key, value]) => {
data[key] = value;
return data;
}, {});
}
const sendCommand = (command) => {
clientRef.current.send(
command,
0,
command.length,
8889,
"192.168.10.1",
(err) => {
if (err) {
console.error("Failed to send command", err);
setIsConnected(false);
} else {
console.log("Command sent: " + command);
}
}
);
};
const connectAndStartStreaming = () => {
setIsLoading(true);
sendCommand("command");
setTimeout(() => {
sendCommand("streamon");
setIsInitialScreen(false);
setIsLoading(false);
}, 5000);
};
return (
<ScrollView contentContainerStyle={styles.container}>
{isInitialScreen || !isConnected ? (
<View style={styles.innerContainer}>
<Animated.Image
source={require("../assets/tello-img.png")}
style={{
width: screenWidth * 1.3,
resizeMode: "contain",
position: "absolute",
opacity: fadeAnim,
}}
/>
<View style={styles.greyContainer}>
<TouchableOpacity
style={[
styles.connectButton,
{ bottom: 120, flexDirection: "row" },
]}
onPress={connectAndStartStreaming}
disabled={isLoading}
>
{isLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<>
<Icon name="link" size={20} color="#fff" />
<KText style={styles.connectButtonText}>Connect</KText>
</>
)}
</TouchableOpacity>
</View>
</View>
) : (
<>
{isStreaming &&
(console.log("isStreaming:", isStreaming),
(
<VLCPlayer
style={{ width: "100%", height: "100%" }}
source={{ uri: "udp://@0.0.0.0:11111" }}
autoplay={false}
initOptions={["--network-caching=150", "--rtsp-tcp"]}
onError={(e) => {
console.log("onError", e);
setIsConnected(false);
setIsStreaming(false);
}}
onOpen={(e) => {
console.log("onOpen", e);
if (
playerRef.current &&
typeof playerRef.current.play === "function"
) {
playerRef.current.play();
}
}}
onBuffering={(e) => {
console.log("onBuffering", e);
if (
e.bufferRate > 0 &&
playerRef.current &&
typeof playerRef.current.play === "function"
) {
playerRef.current.play();
}
}}
onPlaying={(e) => console.log("onPlaying", e)}
ref={playerRef}
/>
))}
<View style={styles.innerContainer}>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => sendCommand("takeoff")}
>
<KText style={styles.buttonText}>Take Off</KText>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => sendCommand("land")}
>
<KText style={styles.buttonText}>Land</KText>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => sendCommand("streamoff")}
>
<KText style={styles.buttonText}>Off Stream</KText>
</TouchableOpacity>
</View>
</>
)}
</ScrollView>
);
}
....
我面临的问题是，我无法在移动应用程序上接收来自无人机的视频流。我已确认我的手机已通过 WiFi 连接到无人机，并且无人机已配置为将视频流发送到端口 11111。我能够连接并发送有效的命令（如“takeoff”）。isStreaming 状态变量已设置为 true，这表明“streamon”命令正在运行。
我尝试了各种解决方案，包括将套接字绑定到端口 11111，但这似乎不起作用，网上大多数解决方案都是针对 Python 定制的。我还检查了控制台日志中是否有任何错误或警告，但似乎没有与此问题相关的。我手机上的官方 Tello 应用程序能够显示视频。
我将非常感激任何关于如何解决此问题的帮助或建议。谢谢！
