【问题标题】:Camera Video not Working - React Native相机视频不工作 - React Native
【发布时间】:2017-07-07 03:47:02
【问题描述】:

问题

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

代码

 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

回购

我发现这个 repo 正在尝试做与我几乎完全相同的事情并且遇到了同样的问题。这是回购:https://github.com/MiLeung/record

【问题讨论】:

  • 你在 info.plist 中填写了 NSCameraUsageDescription 吗?另外,您使用的是哪个视频库?
  • 是的,我已经添加了。有没有什么办法可以解决模拟器的问题?
  • 你能调用这些函数吗:github.com/lwansbrough/… 让我知道结果,我今天尝试了这个 repo,在 android 中一切正常。如果可以的话,我想帮忙
  • 也可以试试这个:captureTarget= {Camera.constants.CaptureTarget.cameraRoll},在 render 中定义相机
  • 感谢您的帮助!我应该如何运行您发送给我的功能?我应该在捕获视频之前运行它们吗?另外,这是我将captureTarget 更改为cameraRoll 后发生的错误:imgur.com/a/SgJSS

标签: ios node.js video react-native react-native-camera


【解决方案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 函数告诉本机代码,停止录制并保存视频 - 可能需要一些时间,所以执行 this.state.path 立即在 stopCapture 之后不行。

欲了解更多信息,请查看https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Promise

【讨论】:

    猜你喜欢
    • 2016-05-01
    • 1970-01-01
    • 2022-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-12
    • 2016-11-26
    相关资源
    最近更新 更多