ReactVision / viro

ViroReact: The AR and VR library for React Native 📳💙💛🤍💚
MIT License
1.3k stars 150 forks source link

Unable to take the screenshot. #184

Closed haidernawaz99 closed 5 months ago

haidernawaz99 commented 1 year ago

Hi,I am trying to take a screenshot but i am getting the following error.

onButtonTap = async () => {
if (!this.state.writeAccessPermission) {
this.requestWriteAccessPermission();
}
try {
await this.ARSceneNav.sceneNavigator.takeScreenshot('kartvya', true).then(result => {
console.log(result.url, 'urlurlurlurlurl');
console.log(result.success, 'successsuccesssuccesssuccesssuccess');
console.log(result.errorCode, 'errorCodeerrorCodeerrorCodeerrorCode');
});
} catch (error) {
console.log(error, 'errorerrorerrorerrorerror');
}
};

<TouchableOpacity
style={{justifyContent: 'center'}}
onPress={this.onButtonTap}>
Capture

It throws an error: Arguments appears to not be a React Component. Keys: push,pop,popN,jump,replace,startVideoRecording,stopVideoRecording,takeScreenshot,resetARSession,setWorldOrigin,project,unproject,viroAppProps

195499910-137a3ddd-a105-4474-a2fe-ab9197a49f17 original issue source

ViktorVojtek commented 1 year ago

Hello, same here. It's happening on Viro React 2.23.0. v 2.22.0 works fine. Anybody who can take a look at this issue?

ViktorVojtek commented 1 year ago

Hello @haidernawaz99 meanwhile this issue would be fixed, use this module. react-native-view-shot. It does exactly what viro scene navigator's takeSchreenshot does and more and it works perfectly fine.

haidernawaz99 commented 1 year ago

@ViktorVojtek, thanks for the reply! I did try using that with captureScreen() method, but it wasn't working. I assumed it was because react-native-view-shot doesn't support capturing gl on Android. Did you use the view-shot library on iOS or Android, as iOS does have support for gl according to this table, but Android doesn't?

ViktorVojtek commented 1 year ago

@haidernawaz99 Hi. Unfortunately you are right. react-native-view-shot works only on iOS. I'm looking for another solution that would work.

sjerratsch commented 1 year ago

looks like in version 2.23.0 you have to use the "_takeScreenshot()" function on the ref directly instead of "ref. sceneNavigator.takeScreenshot".

skizzo commented 1 year ago

Did anybody manage to take a screenshot using v2.23.0?

sarimahmad commented 1 year ago

@skizzo You can take screenshot by using ref and calling the method through ref _takeScreenshot() and don't forgot to pass the ref in the ArsceneNavigator

sarimahmad commented 1 year ago

@sjerratsch I am facing the issue in the _startvideorecording , it crash the App when i call this method, Do find any solution for that ?

skizzo commented 1 year ago

@skizzo You can take screenshot by using ref and calling the method through ref _takeScreenshot() and don't forgot to pass the ref in the ArsceneNavigator

Thanks for the hint @sarimahmad, but this method doesn't work when using Viro 2.23.0 with React Native 0.71.7. It throws the error

"Error: Argument appears to not be a ReactComponent. Keys: push,pop,popN,jump,replace,startVideoRecording,stopVideoRecording,takeScreenshot,resetARSession,setWorldOrigin,project,unproject,viroAppProps
    at findHostInstanceWithWarning (ReactNativeRenderer-dev.js:23775:15)
    at Object.findNodeHandle (ReactNativeRenderer-dev.js:24583:20)
    at findNodeHandle (RendererImplementation.js:50:51)
    at Object.<anonymous> (ViroARSceneNavigator.js:376:97)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:24)
    at _next (asyncToGenerator.js:22:9)
    at asyncToGenerator.js:27:7
    at tryCallTwo (core.js:45:5)
    at doResolve (core.js:200:13)

Seems to be a problem with findNodeHandle() not working newer versions of React Native, which I am unable to resolve. Therefore I had to use react-native-view-shot, which these days works for both iOS and Android.

sarimahmad commented 1 year ago

@skizzo I am getting the same error in _startvideorecording function and I also ended up by using native modules for android and IOS for recording video, I have react-native-view-shot for the picture.

andre-sonect commented 5 months ago

Example to use react-native-view-shot with Android:

import {captureScreen} from 'react-native-view-shot';

captureScreen({
  format: "jpg",
  quality: 0.8,
  handleGLSurfaceViewOnAndroid: true // <-- add this property here
}).then(
  (uri) => console.log("Image saved to", uri),
  (error) => console.error("Oops, snapshot failed", error)
);
robertjcolley commented 5 months ago

Can you provide which version of React Native, Mac/Windows, iOS/Android, and Viro? We have a few issues about not being able to take screenshots and I'm trying to collect as much information as possible.

andre-sonect commented 5 months ago

Can you provide which version of React Native, Mac/Windows, iOS/Android, and Viro? We have a few issues about not being able to take screenshots and I'm trying to collect as much information as possible.

Sure, React-native: 0.67.5 Mac, Android 13(OnePlus 8) and "@viro-community/react-viro": "2.22.0",

andresteves commented 2 months ago

@robertjcolley I know a PR was made but I am still not able to take screenshots on Android 13 with latest Viro version on RN 0.74.0.