I'm trying to implement local video caching into my video-streaming application.
I'm using:
- react-native-video for video playback
- rn-fetch-blob for downloading files
I've managed to start the download at the beginning, replace the original URL with the local one and continue with the playback from my local file (it works as expected) - even with partial file (as long as I start from 0).
The main problem is seek function. If a user wants to start watching at e.g. 120s - download will still start at 0B. I've implemented Range header in the Fetch API looking something like this:
"Range": "bytes: {oneSecondInBytes * whereYouWantToStartWatchingInSeconds}-{fileSizeInBytes}"
to overcome this problem. Now download starts at desired Bytes and downloads only desired part of the video file.
The download works normally but video playback throws Unrecognized media format error. Also tried adding some bytes for headers at the beginning (0-10000B) - to try and recognize the video file, no luck.
So I'm wondering if it's possible to implement partial video file download with rn-fetch-blob and be able to play the file back using react-native-video (not starting at the beginning of the file), later also add other pieces to the file (until the whole download is complete). How could I convince react-native-video that my partial download is indeed proper mp4 file?
UPDATE
I've messed around with HTTP GET headers for a while and actually got somewhere. Not a complete solution but might help someone:
"Content-Type": "video/mp4",
"Range": `bytes=0-1000, 45111150-`,
"Accept-Ranges": "bytes",
"Content-Length": "89024062"
^^ these are my test headers. Had to add two value to Range. The first one just downloads the first part of the file to get headers and to recognize the file type. The second one is from the "seek point" owards. Video now plays and file type is recognized.