ricohapi / theta-client

A library to control RICOH THETA
MIT License
15 stars 11 forks source link

Getting jitters in live preview in react native (platform android) #27

Closed kishanj918 closed 6 months ago

simago commented 1 year ago

The demo application displays each frame of live preview simply using <image source={data URL of a frame}>. Some components for display may be needed.

Adding fadeDuration={0} to <image>, duration for displaying each frame gets liittle longer. The 54th line of demos/demo-react-native/src/TakePhoto.tsx like this:

<Image style={styles.takePhoto} source={{uri: dataUrl}} fadeDuration={0} />
kishanj918 commented 1 year ago

Tried that. Still having the same issue.

codetricity commented 1 year ago

I can replicate the problem with fadeDuration{0}, but do not have a solution at the moment.

https://youtu.be/roOYmw5ZmfA

I hope to try the package below in the future:

https://github.com/Segware/react-native-mjpeg-player

There may be an algorithm to hold the previous frame until the current frame has finished loading. Flutter has gapless playback. Maybe React Native <Image /> has a similar property or if not, maybe an existing package can buffer the frames. If you find a solution, please post.

codetricity commented 9 months ago

It works great with the new 1.6. Thanks for all your work! I tested it with physical device Google Pixel 4a and made a video. https://youtu.be/NsfKQiChcOg
Nice job on the constant improvements.