时间戳

首页 > 解决方案 > 在反应原生中单击保存按钮时编写具有旋转/翻转功能的视频

javascript - 在反应原生中单击保存按钮时编写具有旋转/翻转功能的视频

问题描述

我正在使用 React-Native 创建一个屏幕录制应用程序。当用户停止录制保存在文件管理器中的我的应用视频时。当用户想要编辑像旋转/翻转这样的视频时，点击保存按钮更新视频写入文件管理器，但在我的情况下，当点击保存按钮时，原始视频写入文件管理器。我在视频前视图上给出旋转样式。

<View
          style={[styles.videoView, { transform: [this.state.rotate ? { rotate: `${this.state.rotate}deg` } : this.state.flipHor ? { rotateY: `${this.state.flipHor}deg` } : this.state.flipVer ? { rotateX: `${this.state.flipVer}deg` } : { rotate: '0deg' }] }]}>
          <Video
            source={{ uri: this.state.uri.path }} // Can be a URL or a local file.
            ref={(ref) => {
              this.player = ref;
            }} // Store reference
            controls={true}
            style={styles.backgroundVideo}
            resizeMode='contain'
          />
        </View>
        
        
        save = async () => {
    let base64 = await RNFS.readFile(this.state.uri.path, 'base64')
      .catch(error => console.log("error............", error))
    var path = RNFS.ExternalDirectoryPath + '/ReactNativeRecordScreen/abc1.mp4';
    RNFetchBlob.fs.writeFile(path, base64, 'base64').then((res) => console.log("ressssssss", res))
    this.props.navigation.navigate('ShareScreen', { path: this.state.uri.path })
  }

我正在使用这两个库：

  1. https://www.npmjs.com/package/react-native-video
  2. https://www.npmjs.com/package/react-native-fs

请帮忙。

标签： javascriptreact-nativenpm

解决方案

推荐阅读