Downloading private videos inapp react native

Question

I am trying to implement something in react native: I have a url of video which i'm showing in react native video component, how can i give a button to download that same video in mobile but it should not appear in gallery. Also if the video is private where the headers can be passed and how?

Cecilius

There can be multiple approaches for this. – Deeprooted

Answer 1

How to download any file ?

Well for downloading any file like video,img you first need permission to read and write into internal/external storage of phone and after that you need a native module that can download files from server to the local folders of phone.

there are two best known libraries for downloading files

1. https://www.npmjs.com/package/react-native-fs

2. https://www.npmjs.com/package/react-native-fetch-blob

Now you can follow their documentation to download files like Videos,images or whatever you want to your user's phone.

Now Lets come to the part that you dont want it to be available to user via gallery.

For this i suggest using react-native-fetchblob as it has builtin intent actions and views. You can download a video file with any random name like 1234CACHE any random name without any extension to it, specially dont give it extension like video.mp4 because gallery detects .mp4 files so dont give it any extension and the file won't be available in any gallery.

Now how to hide the file? react-native-fetch-blob allow us to save files into directories that are not publicly available i mean user cannot reach those directory and these directories are used only for saving App's data so you can save your video file in one of these directories.

Now after completing your download, You can open your file with the Intent.

For Example:-

const VIDEO_PATH = res.path() //the path where your downloaded video is saved, you will actually receive this in the response of download function.

const MIME_TYPE = "video/mp4"

//Now finally call the intent with video mime so the video will be opened in user's media player, or if you want  your own media player you can use any library for that.

 android.actionViewIntent(VIDEO_PATH , MIME_TYPE)

Note: You can only download a video if you have a path URL to the video file, You must not mix web URL with Video File URL, Video file url has file name and video extension at the end of the url. such as https://someURL.com/video.mp4 this is video file url, but if you have something like https://SomeURL.com/video it is not a video file instead it is a webpage displaying that video file so you cant really download that specific video from a webpage!.

Briseno

Thank you for such an explanation, I am already familiar with the difference between a video url and a webpage. Can you guide me through the procedure of downloading a video with react-native-fs or fetch-blob. – Cecilius

I have used this method and downloaded the video by removing the extension it is working fine in android and I am able to play the videos in my own app but in ios downloaded files are still visible even after removing the extension and downloading. – Ratel

Answer 2

There can be multiple approaches to this.

I hope you have an idea about your video player, download option depends on your server and site.

1. You can change the file extension of downloaded video, like my_video.notMP4. So the video will not show in the Gallery as it not detected as a video file now.

2. Hide the folder where the video file is downloaded, adding a dot(.) before the folder name can hide the folder in Android/Unix and video will be hidden from Gallery. Example .my_Video_folder

3. For more safety, you can encrypt the video and make them in custom chunk which only your player can play. But you may need to make or find such a video player.

I could not understand the headers part, please explain.

Deeprooted

Well the main part i wanted to know was 'how to download any video while having a url to the video' while showing a download button as in youtube where you can download the videos. I edited the question, Sorry for misconception! – Cecilius

Video download depends on the website brother if you can specify the website name, I will look into it. You can try catch.tube – Deeprooted

I had assumed you have your own server to host videos, it's illegal to download videos from most of the websites. Please be aware of this before implementing it. – Deeprooted

I do have my own server to host the videos. – Cecilius