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.
Related
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
Is it possible to add Video component into the react-native-snap-carousel? I want to try to create a carousel similar to Instagram's swipe
I was able to get swiping to work, but when I tried to add the video component from expo, it didn't show up.
const _renderItem = ({item, index}) => {
return (
<View>
<Video uri={item.uri}/>
<Text>{index} What are we trying to accomplish here {item.uri}</Text>
<ComponentVideo uri={item.uri} />
</View>
);
}
<ComponentVideo /> is another component I created, works normally. <Video /> is a component from expo that's inside ComponentVideo. I just brought it out to see if it works.
Thoughts?
Perhaps there's another package I should check out?
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 have a list of items with a Video URL in each row.I have used React-Native-Video component for Video view.
<TouchableOpacity
style={styles.fullScreen}
onPress={() => this.setState({ paused: !this.state.paused })}
>
<Video source={{ uri: rowData.podcastUrl }} // URL
ref={(ref) => {
// Store reference
this.player = ref
......
......
}}
paused={true}
</TouchableOpacity>
Above code is inside renderMyList() function which is called on the rendering of each row.
When I load my UI all the videos are either in play mode or stopped based on 'paused' state false or true(whatever I pass in above. But I want to properly handle the play/pause of individual video(list item).I have maintained a paused state variable.
Please suggest some sample code.
If you are planning to let only one video to play any given moment you can do something like below
onPress={() => { this.setState({ playing: 'someUniqueIdForThisVideo'}) }}
And check if that video is playing
paused={this.state.playing !== 'videoIdOrSomething'}
If you want multiple videos to be played you can do something like below
onPress={() => { this.setState({ ['someUniqueIdForThisVideo']: true}) }}
And check state like below
paused={this.state['someUniqueIdForThisVideo'] !== true}
This is just to give you a rough idea. You need to implement some sort of logic to set state to false if its already playing.