I am using react-native-video
And it have a props called poster which is working fine. But my requirement is to get that thumbnail from video (first frame of video). If I don't use poster (which accept an url) then it is showing blank screen.
Any idea how to use first frame of video as thumbnail?
Thank You!!!
You can use the onLoad function callback to achieve it,
const player = useRef(null);
<Video
source={{uri: uri}}
ref={player}
paused={true}
style={styles.backgroundVideo}
onLoad={() => {
player.current.seek(0); // this will set first frame of video as thumbnail
}}
/>
For more details on onLoad prop: here
Related
I am using react-native-video component to play a video.
Problem:
I would like to know the dimensions of the video so I can adapt some other items.
When I store the ref with
<Video
ref={ref => setVideoRef(ref)}
resizeMode={'contain'}
/>
I can access videoRef.props.scaleX and videoRef.props.scaleY, but they are always undefined, even if the video is fully loaded. How can I access the video shape/ dimensions?
You can pass a callback to the onLoad prop, which will receive the naturalSize of the video. Example:
<Video
onLoad={({ naturalSize }) => {
console.log(naturalSize.width, naturalSize.height);
})}
...
The callback has a lot more info if you need it - see more in the docs.
Inside my StackNavigator, one of the components includes web content with a long loading time. However, this screen will only be shown late in my navigation flow.
How can I use this time to render my component in the background before finally switching to it?
I couldn't find anything comparable to ReactDOM.render in React Native that would allow me to render it manually.
I am not aware of any option in react-navigation to preload a screen that is not displayed, except maybe when the screen is part of a tab navigator.
Depending on what is slowing down the rendering, you might be able to do some actions in the first screen and later pass the results to the second screen using a navigation parameter.
For instance, if you are fetching data from an api in the second screen, you could fetch this data in the first screen and pass it to the second one:
this.props.navigation.navigate('SecondScreen', { data: this.data });
If it is a component, you could also try to build it in the first screen and pass it in the same fashion:
this.props.navigation.navigate('SecondScreen', { component: this.component });
If you are rendering a WebView in the second screen, what can help is to render the WebView in the first screen too, but with no width or height. The WebView will not be displayed but the website data will be fetched and cached, making the real render more efficient:
render() {
return (
<View>
<WebView source={{ uri: 'https://github.com/facebook/react-native' }} style={{ height: 0, width: 0 }} />
{this.renderCurrentScreen()}
</View>
);
}
I'm working on an app where we want to allow our users (tech support personnel) to take a photo of an employee's badge so we can analyze the photo and extract the badge ID (we already have an open source algorithm to do this) to create a ticket. I have the app running a webview of the application used by helpdesk personnel from their desktops, as well as a button at the top to open the camera (currently it's just an alert). Code is below:
const onPress = () => {
Alert.alert('Will capture the badge using the camera');
};
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Button
onPress={onPress}
title="Capture Badge"
color="#841584"
accessibilityLabel="Capture a Customer's ID via a picture of their badge"
/>
<WebView
source={{uri: "www.example.com"}}
/>
</View>
);
}
Basically, what do I need to put in onPress so that I can take a picture and then send it to our algorithm (the algorithm will be just a function call at the end of onPress)? I've done research on using a camera in react native, but everything is taking about rendering a camera in the view. I only want to open a camera view if a user taps the "Capture Badge" button at the top of the app.
You can use react-native-image-cropper-picker. If I understood you correctly, you want to be able to launch the camera and then as a promise, send the image to your object detection algorithm. With this library you can launch the camera as follows:
openCamera(){
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
//Your image
console.log(image);
});
}
I want to show video in HTML component, but when I pass a string
let body = '<video src="https://www.youtube.com/watch?v=vJJpnplTBeM" poster="https://img.youtube.com/vi/vJJpnplTBeM/maxresdefault.jpg"></video>';
to the component
return (<ScrollView>
<Html body={body} style={{}}/>
</ScrollView>);
it show an error No suitable image URL loader found for (null).
How to correctly pass video into Shoutem HTML Component?
Shoutem's video component does what you're trying to do, you could simply use it instead.
<Video
source={{ uri: 'https://www.youtube.com/watch?v=myvideo' }}
poster={'https://mypic.png'}
height={200}
width={300}
/>
I'm using fetch to call API for video URL. I have trouble with react-native-video.the video is not showing.
<Video
repeat
resizeMode='cover'
source={{uri:`${this.state.base_url}${item.video}`}}
style = {styles.backgroundVideo}
/>
I'm getting a blank screen. In documentation, they mention like below code.
source={require('../assets/video/turntable.mp4')}
How can I render dynamic URL like mentioned above?
Thanks
I am using this compoenet and it's working properly, fetching from API.
<Video
source={{
uri: this.state.waitingVideoURL,
}}
resizeMode="cover"
style={styles.backgroundVideo}
repeat
onLoad={this.stopLoading}
/>
In your code, why you having two variables in the source; What's item.video ?
source={{uri:`${this.state.base_url}${item.video}`}}