I'm currently using react-native-video and playing HLS video streams through the package. Anyone know how i can download the video onto the phone gallery?
Looking into the package there isn't any methods for that, and wondering if there is another package to use
Thanks!
In my app, I download videos with RNFS (react-native-fs), then play it using react-native-video. Two different libraries that fulfill their purpose.
import RNFS from'react-native-fs'
const LOCAL_PATH_TO_VIDEO = Platform.OS === 'ios' ? `${RNFS.DocumentDirectoryPath}/mood-pixel-${timestamp}.mp4` : `${RNFS.ExternalDirectoryPath}/mood-pixel-${timestamp}.mp4`
RNFS.downloadFile({
fromUrl: REMOTE_URI_OF_VIDEO,
toFile: LOCAL_PATH_TO_VIDEO,
}).then(() => {
console.log('successful video download! Save LOCAL_PATH_TO_VIDEO onto device for later use')
})
After successful download, save the LOCAL_PATH_TO_VIDEO onto the device and use it to play the downloaded video.
In the end i didn't have a good solution for this. I did a ffmpeg to convert the hls back to mp4 (via server) and download it (web).
Here is the code to download and save videos:
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import RNFS from 'react-native-fs';
const DownloadVideo = () => {
const [videoUrl, setVideoUrl] = useState('');
const [downloadPath, setDownloadPath] = useState('');
const handleDownloadVideo = async () => {
const { dirs } = RNFetchBlob.fs;
const dirToSave = `${dirs.DownloadDir}/tiktok_videos`;
try {
const response = await RNFetchBlob.config({
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path: `${dirToSave}/${new Date().getTime()}.mp4`,
description: 'Downloading TikTok video',
},
}).fetch('GET', videoUrl);
setDownloadPath(response.path());
// Copy video to app's document directory
const copyToPath = `${RNFS.DocumentDirectoryPath}/tiktok_video_${new Date().getTime()}.mp4`;
await RNFS.copyFile(response.path(), copyToPath);
// Move video to device's Downloads directory
await RNFS.moveFile(copyToPath, `${dirToSave}/tiktok_video_${new Date().getTime()}.mp4`);
} catch (error) {
console.log('Error downloading video:', error);
}
};
return (
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<TextInput
style={{ height: 40, width: '80%', borderColor: 'gray', borderWidth: 1, marginVertical: 10 }}
onChangeText={(text) => setVideoUrl(text)}
value={videoUrl}
placeholder="Enter TikTok video URL"
/>
<TouchableOpacity onPress={handleDownloadVideo} style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5 }}>
<Text style={{ color: 'white' }}>Download</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default DownloadVideo;
The way HLS is streamed make the data not compatible for saving into single data file. So there is a good reason why you might be unable to save video into file from the stream intended for presentation.
The other reason is that RN Video component does not offer this capability.
The tooling that saves a file, such as MP4, from streaming media content is typically different from streaming media players exactly in the way that they download chunks of data having the limitation in mind that those video chunks are intended for a file.
