React Native View Shot not capturing video of live stream on ios

Question

I am using React Native View Shot and I need our product to be able to capture live streaming from a m3u8 uri from React Native video package.

Currently on android it is capturing the screen fine, but on IOS there seems to be an issue of View Shot capturing just a blank video. How it looks on IOS

The livestream is the one playing below and the screenshot is the one taken of the video.

Are they just not compatible, or how would I resolve the issue of capturing a screenshot of a live stream on ios?

  <TouchableOpacity onPress={()=>saveCapturedImage()} style={capturedShot ? styles.capturedShotStyle : styles.beforeShotStyle}> 
  {capturedShot ? <Text/> : <Text>Click to capture shot</Text> }
  </TouchableOpacity>
 <Image style={capturedShot ? styles.captureContainerPost : styles.captureContainerPre} source={capturedShot ? {uri: capturedShot } : null} />
 {/* Viewshot component from React Native Viewshot */}
  <ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
  {/* Video component from React Native Video, resizeMode cover to get full height on the component. Add pause controls for default, and controls can be toggled true/false */}
  {videoUri && <Video
      source={{
        uri: videoUri,
      }}
      style={{
        width: "100%",
        height: "100%",
      }}
      resizeMode="cover"
      controls={true}
      paused = {false}
    />}
      
  </ViewShot>

Ru Lette · Answer 1 · 2021-02-08T15:17:19.097

If anyone else wants an answer for this problem in future, I wrapped View shot capturing screen over a react native webview component playing a video on ios. It took a photo of a paused Youtube video playing. But even though View Shot captured a WebView of a video embedded, the content of the video was empty.

Not sure if this is because of RN View Shot, have emailed the founder of the package. Or does Ios block video content playing?

 <View collapsable={false} style=Template:Height: "80%">
           <WebView
             originWhitelist={["*"]}
             source={{
               html:
                 '<iframe playsinline controls autoplay src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" ></iframe>',
             }}
             useWebKit={true}
             originWhitelist={["*"]}
             allowsInlineMediaPlayback={true}
             style={{
               height: 600,
               width: 400,
             }}
           />
         </View>
       </ViewShot>

But if anyone finds a better alternative solution let me know.

React Native View Shot not capturing video of live stream on ios

1 Answers1