react-native-view-shot
react-native-view-shot copied to clipboard
gre
captureRef a react-native-video view returns blank(white) image on iPhone devices
Bug report
In the code we have a react-native-video component wrapped by <ViewShot> like this:
<ViewShot
style={viewShotStyle}
ref={ref => {
this.viewShot = ref;
}}
>
<Video
paused={!play}
ref={ref => {
this.player = ref;
}}
repeat
source={source}
resizeMode="contain"
/>
</ViewShot>
And we triggered the following function to use captureRef to generate a thumbnail image for the video.
async getThumbnail() {
if (this.viewShot) {
const thumb = await captureRef(this.viewShot, { format: 'png' });
return thumb;
}
return null;
}
But everytime the getThumbnail function gets called, it returns a blank/white image.
The issue is only happening on iPhone devices. We tested on simulators and Android devices and it worked as expected.
Also, from the interoperability table, it says view shot would not work with react native video, but I saw an example and a thread saying they should work. I'm kind of confused on this as well.
Version & Platform
├─┬ @react-native-async-storage/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ @react-native-community/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ @react-native-firebase/[email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor, ">=0.60 <0.64" from node_modules/react-native-webview
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor
├─┬ [email protected]
│ └── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor, ">=0.60 <0.64" from node_modules/react-native-webview
└─┬ [email protected] invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor, ">=0.60 <0.64" from node_modules/react-native-webview
└─┬ @react-native-community/[email protected]
└── [email protected] deduped invalid: ">=0.57 <=0.62" from node_modules/@react-native-community/cameraroll, ">=0.57 <0.60" from node_modules/@react-native-community/image-editor, ">=0.60 <0.64" from node_modules/react-native-webview
Platform: iOS (more specifically, iPhone physical devices)
Expected behavior
Should correctly captures the snapshot of the video.
Actual behavior
Returns an empty image for iPhone devices.
Steps to reproduce the behavior
@DonghaoLyu any work arounds for this? I would like to use this in my application but having the same issues.
@DonghaoLyu any work arounds for this? I would like to use this in my application but having the same issues.
No work around on this yet..
react-native-view-shot is probably not the best library to look for if you need to capture a frame from a video. this is a feature to ask the video library instead because ViewShot is only here to capture a view, like take a snapshot of the elements, not get an image from a video, there are very likely more efficient and more quality ways to do this. I'm going to close this issue for now and have a clearer warning on the main README about this but unlike there is a solution that someone find and send a PR for it, there is likely no technical solution for this, like if we can't capture the image from the video at the element level it is a os limitation too.
