相机视频无法工作 - React Native

Question

问题

我一直在尝试弄清楚为什么这不起作用已经有一段时间了。我使用了很多示例代码，但是我仍然无法弄清楚。

代码

 takeVideo() {
    console.log('started to take video');
    this.camera.capture({
      audio: true,
      mode: Camera.constants.CaptureMode.video,
      target: Camera.constants.CaptureTarget.disk
    }).then((data) => {
      this.setState({ path: data.path });
      console.log(data);
    }).catch((err) => console.log(err));
  }

  stopVideo() {
    this.camera.stopCapture();
    console.log(this.state.path);
  }

  renderCamera() {
    return (
      <View>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
          captureTarget={Camera.constants.CaptureTarget.disk}
          captureMode={Camera.constants.CaptureMode.video}
        >
          <TouchableHighlight
            style={styles.capture}
            onPressIn={this.takeVideo.bind(this)}
            onPressOut={this.stopVideo.bind(this)}
            underlayColor="rgba(255, 255, 255, 0.5)"
          >
            <View />
          </TouchableHighlight>
        </Camera>
      </View>
    );
  }

问题描述

当我使用console.log(this.state.path)时，输出的结果是false，这意味着它没有改变，视频没有录制成功。

信息

• 这是在IOS系统上进行的
• 如果我将Camera.constants.CaptureMode.video更改为Camera.constants.CaptureMode.still(.video => .still)，则这个问题就被解决了
• RN版本: react-native-cli: 2.0.1 react-native: 0.44.0

代码库

我找到了一个与我几乎完全相同的代码库，也遇到了同样的问题。这是代码库链接：https://github.com/MiLeung/record

- zoecarver

---

是的，我已经添加了。问题可能与模拟器有关吗？ - zoecarver

你能调用这些函数吗：https://github.com/lwansbrough/react-native-camera#component-static-methods 请让我知道结果，我今天尝试了这个仓库，在Android上一切都正常。如果可以，我很乐意提供帮助。 - eden

还可以尝试这个：captureTarget= {Camera.constants.CaptureTarget.cameraRoll}，在 render 中定义相机。 - eden

很高兴你解决了它。 - eden

@pudility 请试试这个链接：https://github.com/ColCh/SO-4962215 对我来说它是有效的。在XCode 8，react-native@0.44.0，iPhone 5C iOS 10.3.2上进行了测试。它可以保存视频和图片。控制台截图中有视频录制内容：http://imgur.com/a/aHtCz 。如果您尝试在真实设备上启动此项目，是否会出现任何问题？ - ColCh

Answer 1

你的代码里面一切都没问题，但是你缺少了一个重要的东西。

this.camera.capture({
      audio: true,
      mode: Camera.constants.CaptureMode.video,
      target: Camera.constants.CaptureTarget.disk
}).then((data) => {
      this.setState({ path: data.path });
      console.log(data);
}).catch((err) => console.log(err));

在上面的代码中，您告诉状态在保存数据后设置对象路径。

但是，在那里：

stopVideo() {
    this.camera.stopCapture();
    console.log(this.state.path);
}

在保存数据之前，您正在获取路径对象。

只需尝试这个：

this.camera.capture({
          audio: true,
          mode: Camera.constants.CaptureMode.video,
          target: Camera.constants.CaptureTarget.disk
}).then((data) => {
          this.setState({ path: data.path });
          console.log(this.state.path); // You should have your path set
          console.log(data);
}).catch((err) => console.log(err));

stopCapture 函数告诉本地代码停止录制并保存视频 - 这可能需要一些时间，因此在stopCapture之后立即执行this.state.path是不起作用的。

有关更多信息，请查看https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Promise

- kGielo