The `Video` component can't read my video

[thedenver]

Problem

I’m using the Video component for a my React-Native application.

I’ve following the Official documents for using it, but it’s not work.

Reproduction

When I set the source prop as like as a example:

<Video
    key={`video${idx}`}
    style={styles.video}
    source={{
      uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
    }}
    useNativeControls
    resizeMode="contain"
    isLooping
/>

It’s work normally.

But when I using the uri with my own url provided by a Fast-api server,

<Video
    ...(same)
    source={{
      uri: "http://localhost:8000/getfrontvideo/?filename='A-13_3_1667031414177-front.webm'",
    }}
    (same)...
/>

It’s not work.

Questions

The Browser Test

• Both of URLs are response by .mp4 video, and can play with browser. Why my URL is not work?

The Encoding Test

• If I download the big_buck_bunny.mp4 video that normally played in the example, and response it by fast-api server,
  The app can’t read it again. What’s wrong with my server?

Codes and Screenshot

• app(React Native):

  <ScrollView style={{ width: "100%", height: "100%" }}>
    <View style={{ widht: "100%", height: 30 }}>
      <Text style={{ fontSize: 24 }}>22년 10월</Text>
    </View>
    <View style={styles.videoWrapper}>
      {videos?.map((video, idx) => {
        return (
          <Video
            key={`video${idx}`}
            style={styles.video}
            source={{
              // uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4", // work
              uri: "http://localhost:8000/getfrontvideo/?filename='A-13_3_1667031414177-front.webm'", // doesn't work
            }}
            useNativeControls
            resizeMode="contain"
            isLooping
          />
        );
      })}
    </View>
  </ScrollView>
  

• The “Network” tap of developer console

  

[amanhimself]

It seems like the connection is getting refused on a device when using localhost.
This happens especially when testing on Android because in Android using localhost points to the device’s/emualtor’s localhost not the computer’s where the API is being served.

Try replacing localhost in the API URL with the IP address of your computer (for this, both your desktop and phone are connected to the same WiFi). For more info, see: BigBinary Books - Accessing localhost from React Native

Alternatively, you also try serving your API using ngrok: React Native Android Fetch failing on connection to local API - Stack Overflow. In the same forum, you will find other methods as well.

[thedenver]

Thanks for replying. But I don’t think it’s a problem of localhost connection.

Cuz,

1. When I used the localhost source, I can see that the Python server is working.

   • The Python server print:

     INFO:     127.0.0.1:50133 - "GET /getfrontvideo/?filename='A-13_3_1667031414177-front.webm' HTTP/1.1" 200 OK
     

2. And, this problem is also showed on iOS, not only Android.

[thedenver]

Solved

Well, actually not solved, I just have choose AWS S3 storage for save and load us videos.

The logic will be :

1. Record a video
2. Upload to the server
3. AI analyzing
4. Upload to AWS S3 Storage
5. Get shareable S3 uri
6. Save it to the db(mongoDB)
7. When need to render it at the mobile app, get S3 uri from the db
8. render it!

Testing

The testing video that uploaded to the S3 storage rendered normally to my mobile app.