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).
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.
Related
I want to integrate Screen Share feature in my react-native application in which I am using Twilio for video communication. In Web we are able to achieve this by following these steps.
1 : We get the media device stream using
navigator.mediaDevices.getDisplayMedia({
video: true,
});
2 : Then we get the first stream tracks using
const newScreenTrack = first(stream.getVideoTracks());
3 : After that we set this newScreenTrack in some useState
const localScreenTrack = new TwilioVideo.LocalVideoTrack(
newScreenTrack
);
4 : After that we first unpublish the previous tracks and publish the new tracks using
videoRoom.localParticipant.publishTrack(newScreenTrack, {
name: "screen_share",
});
5 : And finally we pass these tracks in our ScreenShare component and render these tracks to View the screenShare from remote Participant.
I need to do the same thing in my react-native application as well. Where if localParticipant ask for screenShare permission to another participant. Participant will accept the permission and able to publish the localScreenShare tracks.
If anyone know this please help me in this. It would be really helpful. Thank you
I think this is an issue with the react-native-twilio-video-webrtc package. It seems that, as you discovered in this issue, that screen sharing was previously a feature of the library and it was removed as part of a refactor.
Sadly, the library does more work than the underlying Twilio libraries to look after the video and audio tracks. The Twilio library is built to be able to publish more than one track at a time, however this React Native library allows you to publish a single audio track and a single video track using the camera at a time.
In order to add screen sharing, you can either support pull requests like this one or refactor the library to separate getting access to the camera from publishing a video track, so that you can publish multiple video tracks at a time, including screen tracks.
The purpose is to play a local video on the host side and stream it on the participants' side. The video should pause and seek for everyone when the host does it.
For this, I want to capture a stream (of MediaStream type) of a local video file while it is playing and pass it into WebRTC.
Just like on the web we have a captureStream() method to capture stream from video or canvas, do we have anything similar in react-native? Or any other way to achieve the same goal?
I could not find a relative solution with the RTCView of react-native-webrtc or the react-native-video. Any type of solution or suggestion would be helpful.
Thank you in advance.
I'm running a VueJS application that displays a full screen story of videos. I don't create as many tag as number of media in my story : I'm just changing component video sources each time I play a new video.
But it looks like Safari (Desktop & mobile) still does not cache HTML video once loaded : when I'm playing again a previous media, Safari is downloading again the asset. Instead of getting from cache like Chrome does.
The same issue has already been reported here but sill no correct answer.
Safari even stops downloading the final bytes video (producing a sort of timeout) when we go back and forth quicky in the story, so the story looks stuck.
Here's an example link.
Does anyone know a good alternative that avoids re-downloading video data at each play on Safari ?
Partial solution
Found myself a workaround that works pretty well if video is small size - all video are less than 3Mb in my case.
The trick is to use js fetch API to download full video, then stream it into video tag.
const videoRequest = fetch("/path/to/video.mp4")
.then(response => response.blob());
videoRequest.then(blob => {
video.src = window.URL.createObjectURL(blob);
});
Contrary to video src attribute, fetch API will get video data from cache if the same video was already fetched before.
Here a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).
Pro : Video are now pulled from cache in Safari !
Con : You can't start the video until full data has been downloaded. That's why this solution can be used only for small video (like < 5Mb), else your users may wait a while before being able to play the video.
Is there a way to create App in react native which can be used to record audio and video and save same file on both Android and iOS Devices using App?
Please help me as I am stuck.
Thank You.
I guess you can use 3 library maintained by the React Native community.
react-native-camera (for recording videos)
react-native-video (for playing video)
react-native-audio-toolkit (for recording and playing audio)
To record an audio
import {
Recorder,
} from 'react-native-audio-toolkit';
// function to start recorder
this.recorder = new Recorder(‘filename.mp4’).record();
To record video and play it, there is a really good blog post in medium
https://medium.com/react-native-training/uploading-videos-from-react-native-c79f520b9ae1
For more example, please check examples in the github pages for each library
https://github.com/react-native-community/react-native-camera
https://github.com/react-native-community/react-native-video
https://github.com/react-native-community/react-native-audio-toolkit
I want to make simple project which play flash video file from online.
I've searched some articles and read carefully.
But I can't understand, how to play flash video files on iPad by Code.
So I need help from you.
Please.
Simply put, without being jailbroken, No you cannot.
The closest thing to being able to view flash in iOS is Frash, and I am not even sure if it is actively being developed or supported any more.
You can always check out the open source project for Frash. by Comex.
All IOS devices don´t support Flash player, but is be possible to use a Javascript or HTML5 player for video.
No, iWhatever's currently do not and to the best of my surfing knowledge, have no intention of supporting flash format due to some argument between apple and adobe.
At the end of the day, the Flash video format is a container for a movie that’s been compressed by some codec. If you can get to the source file, you know the format of the container, you know the codec that was used to encode the video, and you know how to write code to convert that into audio streams and video frames, then yes, you can play Flash videos on the iPad.
So, to recap:
Get the Flash video file.
Get to the encoded video data in the Flash file.
Decode the video and convert it, either into raw audio and video or to another format that the iPad can play.
Play the result of #3.
Needless to say, this is quite the endeavor. It’s better to download the movies to your desktop and convert them there before loading them into your application.
Yes you can! The question is whether or not you can play the video itself not whether or not ipads support flash player.
the answer is this.. new versions of "flash video" have a f4v file extension. These videos are basically a h.264 mp4 files. You "may" be able to play it in an ipad simply by renaming it to .mp4
If that doesn't work then use a utility like Miro to convert your "flash video" to a format that your ipad will accept. http://www.mirovideoconverter.com/