I'd like to show a list with image and video files from cameraroll in React Native app. I (accidentally) have seen that the Image component can display probably the first frame of a mov file on iOS. I checked the documentation but they write nothing about video files.
A React component for displaying different types of images, including
network images, static resources, temporary local images, and images
from local disk, such as the camera roll.
My question is if it's good practice to use the Image component for displaying a "thumbnail" from a video file this way or is it better to store a separate thumbnail (image file) for every video and display those in the list instead?
I also noticed this feature when we store '.mp4'(from local storage) in an image component, it can works as thumbnail without degradation in performance. However, I also noticed when you try to render any network video file it doesn't seem to work that way.
So this feature only works when we are displaying videos from phone's gallery.
Therefore, it is good to maintain thumbnails for video files if you are using videos from any other resource
Related
I am creating an a React Native application which streams video. However, the video source is actually images as it is live and these are sent through STOMP sockets. The image sent are base64 encoded uri. I tried to use Image component but the flickering is bad and there is a lot of delay subsequently in rendering (image uri comes in way faster than the application is rendering). I tried to use libraries such as FastImage and NoFlickerImage but all failed to do the trick. Read up abit about the problem and found out that all of them uses Image component as a base. The problem is probably due to React Native Image component. Any way to get around this issue?
Tried NoFlickerImage, FastImage. Same outcome as Image, flickers and renders too slowly.
I am using expo and i am trying to implement a feature similar to snapchat/instagrams draw on video and add text/caption to video before upload it. My problem is not the UI part but editing the original video and getting a uri for the new video
I know with images you can use libraries like expo-pixi then take a snapshot of a view but i am not how to go about this for recorded videos specifically
anyone would be kind enough to point me to the right direction?
I have a screen with a thumbnail sized <Video> playing and then transition to another screen where the video takes up the full window via react-navigation.
Is there a way to preserve that video element and transfer it to the new screen? If I render a new <Video>, it adds a delay as the video has to buffer before it can start playing rather than being a seamless transition where I can animate as the resize happens.
This should be supported in a future version of react-navigation once RFC 17 is completed:
https://github.com/react-navigation/rfcs/issues/17
In the meantime, there is a separate project called Fluid Transitions to support it:
https://github.com/fram-x/FluidTransitions
I have not gotten to test whether this will work for videos yet, but it does allow shared transitions for images, etc.
I am working on a react-native project which uses Agora.io for video calling.
In a video call it shows my camera feed as fullscreen and the reciever's feed as thumbnail which is the opposite of the correct way.
I want to know, Is this the way agora works or is it possible to fix this..?
Because even in their website they have put the images in that way.
image on the home page
I appreciate any help regarding to fix this.
So it seems like you are presenting the local video stream to the larger view. You would need to switch this. Render the remote video stream on the larger view and the local video stream on the thumbnail view.
I've got an application in React Native to be developed in Android and iOS, in which I'd like to take the camera stream, make some processing, and render it multiple times.
Imagine an app like Instagram, in which you can add filters to the camera live and it shows the applied filters with on live previews. It would be more or less the same.
I need to get the camera stream and be able to show it on screen multiple times.
I've tried react-native-camera, but it only lets me to get one instance of the camera to be shown.
With this same library, I've tried to take pictures in intervals of the camera and to render them via <Image> container but, of course, it's a performance kill and the app ends up crashing.
How can I achieve what I'm trying to do? Do you know of any module or any approach that allows me to do so?
Thank you.