1

我正在使用 React Native View Shot，我需要我们的产品能够从 React Native 视频包中的 m3u8 uri 捕获实时流。

目前在 android 上它可以很好地捕获屏幕，但在 IOS 上似乎存在 View Shot 仅捕获空白视频的问题。它在 IOS 上的外观

直播是下面播放的，截图是视频的截图。

它们只是不兼容，或者我将如何解决在 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>
4

1 回答 1

2

如果将来有其他人想要解决这个问题，我将 View shot capture screen 包裹在 react native webview 组件上，在 ios 上播放视频。它拍了一张暂停播放的 Youtube 视频的照片。但即使 View Shot 捕获了嵌入视频的 WebView，视频的内容也是空的。

不确定这是否是因为 RN View Shot，已通过电子邮件发送包的创始人。还是 Ios 会阻止视频内容播放？

 <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>

但是，如果有人找到更好的替代解决方案，请告诉我。

于 2021-02-05T15:14:07.623 回答