I am trying to make a React Native App that will stream the video.

I have two problems:

1. The react native app aggressively streams/downloads the video
2. the component refreshes often and starts the stream/download even after it already downloaded the video.

I believe #1 will resolve itself if I am not at a strong wifi connection. And if it does it once, I guess that’s ok.

My real issue is with #2. If the download/ stream constantly restarts that will be worse than just downloading the videos. Any ideas on how I can prevent this from happening?

Test details

I have been testing with a video (mp4) of 1.7G. When I am connected to my wifi and run both apps, I can see in my API’s console log multiple downloads that seem to stream the video but download it multiple times.

Below I have my React Native code as well as my API's termianl output after only a few seconds of playing the video. I believe it had downloaded/streamed multiple times over already.

React Native code

import ViewTemplate from "../screens_core/components/ViewTemplate";
import { useRef, useState } from "react";
import { View, Button } from "react-native";
import { Video } from "expo-av";

const API_URL = "http://192.168.1.128:3000"; // Replace with your server IP
export default function VideoStreaming09({ navigation }) {
  const videoRef = useRef(null);
  const [status, setStatus] = useState({});

  return (
    <ViewTemplate navigation={navigation}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <Video
          ref={videoRef}
          source={{
            uri: `${API_URL}/videos/stream-only/6`,
            headers: {
              Range: "bytes=0-524288", // Request only 512KB initially
              "Cache-Control": "no-store",
            },
          }}
          useNativeControls
          resizeMode="contain"
          style={{ width: "100%", height: 300 }}
          onPlaybackStatusUpdate={(status) => setStatus(status)}
        />

        <Button
          title="Seek to 10s"
          onPress={() => videoRef.current.setPositionAsync(10000)}
        />
        <Button
          title="Seek to 30s"
          onPress={() => videoRef.current.setPositionAsync(30000)}
        />
      </View>
    </ViewTemplate>
  );
}

Terminal from the API that shows multiple downloads (only a few seconds into video)

database location: /Users/nick/Documents/_databases/KyberVisionAPI10/kv10.db
✅ Associations have been set up
✅ Database connected & synced
- in GET /stream-only/6
Streaming video: /Users/nick/Documents/_project_resources/KyberVisionAPI10/match_videos/1741606264842-781281814.mp4
range: bytes=0-1

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744844665a4596760.html