时间戳

首页 > 解决方案 > 如何在 React Native 中显示来自 S3 存储桶的视频？

react-native - 如何在 React Native 中显示来自 S3 存储桶的视频？

问题描述

我正在尝试从 S3 存储桶下载视频并将其传递给 Expo 的视频组件。我正在使用s3.getObject()回调函数将对象作为ArrayBuffer. 但我不知道从这一点上如何使用这些数据。我尝试连接"data:video/mp4;base64," + videoData.body并将其作为对象传递。我也尝试将其转换为Base64String，这也不起作用。

let videoData = {}
const downloadIntro = async () => {

  s3.getObject(bucketParams, function (err, data) {
    if (err) {
      console.log("Error:" + err)
    } else {
      console.log(data.ContentLength)    // 1210362
      console.log(data.ContentType)      // video/mp4
      console.log(data.Metadata)         // Object {}
      console.log(data.Body.buffer)      // ArrayBuffer []
      videoData.body = data.Body.buffer
    }
  })
}

export default function App() {

  let [vidData, setVidData] = useState(null)

  const playVideo = () => {
    console.log("Trying to play")
    setVidData({video: "data:video/mp4;base64," + videoData.body})
  }

  return (

    <SafeAreaView style={styles.container}>

      <Button title={"Load Video"} onPress={downloadIntro}/>
      <Button title={"Start"} onPress={playVideo}/>

      <Video
        source={vidData}  
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={"contain"}
        shouldPlay={paused}
        isLooping={false}
        style={{
          width: 300,
          height: 300
        }}
      />

    </SafeAreaView>

  );
}

标签： react-nativeamazon-s3expoarraybuffer

解决方案

看起来您正试图将原始视频数据放入源中。尝试将属性设置为视频的 url：

<video controls width="250">

    <source src="/media/cc0-videos/flower.mp4"
        type="video/mp4">

</video>

推荐阅读