I am trying save some video in react native app privately. So that i can download videos within app and can watch within app after download. So i am not able to get it how can i do this. Let me know if anybody have resolution for this approach. i was checking that we can convert files into byte than can store within react native app. again then convert into video and can watch it within app. Let me know if this can be done by anyone. Thanks
<Video source={{uri: "background"}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onError={this.videoError}
style={styles.backgroundVideo} />
Watch this video
You can watch the above video. Anybody have a idea that how mx doing this thing. I want to do same. Download videos and save and will be private and play in my app.
For downloading any file like video,img ..
there are two best known libraries for downloading files
https://www.npmjs.com/package/react-native-fs
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.
For the part that you dont want it to be available to user via gallery.
For this you can use 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.
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)
you can use https://github.com/RonRadtke/react-native-blob-util to download any remote files
Related
I created a repository and then I uploaded audio files into it.
When I go to the audio files, for example: https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3
It goes to the github page, rather than playing the audio file directly.
My ultimate aim is to upload a few audio files so that a website using React can play the audio file
for instance I'd like to load
const audioTune = new Audio("https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3");
and play that file.
Thank you
I"m sure you already figured it out but append the url with "?raw=true" and it should run.
so like:
"https://github.com/cre8ture/audioFilesForBL/blob/main/1.mp3?raw=true"
I am looking for a solution to display doc file in React app. I am using react-docx library to create a file I need and the documentation says we can do whatever we want with the binary file created. Anyway it shows only examples to save it on computer. What I wanna do is to make this blob tyle file display in a browser as doc. I wanted to use preview-docx library for that but it has very poor documentation and I am not sure if that would be a solution. Anyway there is another library like react-doc-viewer but it accepts only strings for document we want to display. Maybe anyone would know if it is even possible to display binary type files?
Packer.toBlob(doc).then((blob) => {
// instead of save as I want to display the file
saveAs(blob, "example.docx");
});
I have created a video editor using React Native. I need to choose a way to save all of the user's projects locally. Each project has a video file, thumbnails (images) and its current Redux state.
My first idea is to save everything in files using RNFS. Each Project's folder would have a video file, Thumbnails folder and a state.txt file containing my application's current state (current text size selected, background color, etc...).
Do I need a database like SQLITE or should I save everything in files? I know I'll have to use RNFS for the binary data like videos and images. But what about the state.txt file? is that a good idea? The idea of each user having their own local database just for that sounds strange to me.
You have your Redux state that just represents local state. Have a look at https://github.com/rt2zz/redux-persist
This allows you to serialize the Redux State and save it using whatever storage you provide, but you can use asyncStorage in the react native apps.
You are right about using RNFS for videos etc. For the metadata in state.txt, in my opinion, it would be better to go with async-storage or other offline storage options (like Realm )
It will be much more performant to query it instead of reading from a file.
I am trying to download a file from amazon s3 but with a different name. i.e. not the name of the stored file which has timestamps attached_to_it.
But If I download it from s3.getObject
s3.getObject({
Key: fileKey,
Bucket: `/${albumBucketName}`,
//ResponseContentDisposition: `attachment; filename="${fileKey}"`,
//ResponseContentType: "audio/wav"
}, function (
err,
data
) {
....
});
it will not let the download being handled by browser. so, I will not get download progress in general. I dont want to handle the download progress in my app. I want it to download from browser.
I didn't go with URL approach because it won't let me specify a name for the file being downloaded.
EDIT:
there is a solution for this, which is giving anchor tags download attribute specifying the file name in it. but it wont work in ios safari. but still I dont want to loose accessibility of the feature for some user.
This part is on the right track:
ResponseContentDisposition: `attachment; filename="${desired_filename_here}"`,
...but instead of s3.getObject(), you need s3.getSignedUrl(). This generates a URL that contains embedded credentials, in a format that allows access to this one object but does not make the credentials reusable for any other purpose. Pass this URL to the browser and the file will be downloaded with the desired name.
You can use ResponseContentDisposition with s3.getSignedUrl().
Im using React-360 to display a 360 photo. It works fine when we give remote url as src in Environment.setBackgroundImage(src, {format: format});
But i have a requirement to allow user to select a local 360 photo file and preview it.
Using Input tag and javascript i'm getting the file choose by user; but i'm not able to pass that file as src.
i tried this too.. didn't work.
src = URL.createObjectURL(file);
Environment.setBackgroundImage(src, {format: format});
Is it not possible to load local file in react 360.
Same Problem in google vr view also. Anything i can do to load local file choose by user.
have you tried using the asset method like so?
Environment.setBackgroundImage(asset('your_image.jpg'));
I think this could be what you are looking for.