How do I access the react-native-camera's video capabilities?

Question

I've been attempting to get the react-native-camera's video feature to work, but and have tried a vast number of methods but keep getting the same errors. Here is my code:

class MainCamera extends Component {
  constructor() {
  super();
  this.render = this.render.bind(this)
  this.state = { cameraType: Camera.constants.Type.back }
}

  render() {

return (
  <View style={styles.container}>
    <Camera
      ref='camera'
      style={styles.preview}
      aspect={Camera.constants.Aspect.fill}
      type={this.state.cameraType}
      captureMode={Camera.constants.CaptureMode.video}
      captureAudio={false}
      target={Camera.constants.CaptureTarget.disk}>

      <TouchableHighlight
        onPressIn={this.onPressIn.bind(this)}
        onPressOut={this.stopVideo.bind(this)}>
        <Icon name="video-camera" size={40} />
      </TouchableHighlight>
    </Camera>
  </View>
);
  }

onPressIn() {
  recordVideo = setTimeout(this.takeVideo.bind(this), 100);
}

takeVideo() {
    this.refs.camera.capture({
      target: Camera.constants.CaptureTarget.disk
    })
      .then(data => {
        console.log(data);
      })
      .catch(err => console.log(err));
  }

stopVideo() {
  this.refs.camera.stopCapture({})
    .then(data => console.log(data))
    .catch(err => console.log(err));
  }
}

When I use the '.then' promise on the stopCapture() method, I receive the error "Cannot read property 'then' of undefined", but if I don't add the '.then', then nothing happens and I don't receive any data. Does anybody have any suggestions?

https://stackoverflow.com/questions/48280005/react-native-camera-video-capture-unable-to-preview-and-upload-as-snapchat-vide — Kamlesh Tilwani, Apr 17 '18 at 09:20

score 0 · Accepted Answer · answered Jun 26 '16 at 21:35

0

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

stopVideo() {
  this.refs.camera.stopCapture();
}

The stopCapture() function is not a promise.

answered Jun 26 '16 at 21:35

Chase Starr

16
1

Okay awesome it takes videos now. But the only way that I knew that was by changing target to 'Camera.constants.CaptureTarget.cameraRoll' and then checked on my camera roll to see the video there. My problem is that it does not console.log any data, because I want to go and do something else with that video data within my app, not just save the video file to my phone. – hermt2 Jun 27 '16 at 01:23
Nevermind, for some reason they are only shown in Xcode's console, not in the Google Chrome debug tool. Nonetheless I am getting the data. Thank you. – hermt2 Jun 28 '16 at 03:04
I unfortunately lost this file and am redoing the project from scratch again. I have everything about exactly as I remember it but the data will still not print out. If you're still able to help that would be great. I'll post the new component below if you could possibly take a look at it. There is not enough space to post it in this comment box. – hermt2 Jul 18 '16 at 02:44

score 0 · Answer 2 · answered Jul 18 '16 at 02:47

The new component after the unfortunate loss of the old file:

 class VideoCamera extends Component {
  constructor() {
    super()
    this.state = {
      captureMode: Camera.constants.CaptureMode.video,
      captureAudio: false,
      captureTarget: Camera.constants.CaptureTarget.cameraRoll,
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Camera
            aspect={Camera.constants.Aspect.fill}
            captureAudio={this.state.captureAudio}
            captureMode={this.state.captureMode}
            captureTarget={this.state.captureTarget}
            ref="camera"
            style={styles.preview}
        >
        <TouchableHighlight
            onPressIn={this._startRecord.bind(this)}
            onPressOut={this._endVideo.bind(this)}
        >
        <Icon
           name={'video-camera'}
           size={40}
           style={styles.recordButton}
        />
          </TouchableHighlight>
          </Camera>
         </View>
          )
      }

  _startRecord() {
    startVideo = setTimeout(this._recordVideo.bind(this), 50)
  }

  _recordVideo() {
    this.refs.camera.capture({})
      .then((data) => console.log(data))
      .catch((err) => console.log(err))
   }

  _endVideo() {
   this.refs.camera.stopCapture()
  }

}

score 0 · Answer 3 · answered Sep 25 '19 at 13:38

Camera is opened, create 2 buttons to start and stop the video below.

                <View style={styles.container}>
                    <RNCamera
                        ref={ref => {
                            this.camera = ref;
                        }}
                        style={styles.preview}
                        type={RNCamera.Constants.Type.back}
                        flashMode={RNCamera.Constants.FlashMode.on}
                        androidCameraPermissionOptions={{
                            title: 'Permission to use camera',
                            message: 'We need your permission to use your camera',
                            buttonPositive: 'Ok',
                            buttonNegative: 'Cancel',
                        }}
                        androidRecordAudioPermissionOptions={{
                            title: 'Permission to use audio recording',
                            message: 'We need your permission to use your audio',
                            buttonPositive: 'Ok',
                            buttonNegative: 'Cancel',
                        }}
                        onGoogleVisionBarcodesDetected={({ barcodes }) => {
                            console.log(barcodes);
                        }}
                        captureAudio={true}
                    />  

       <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity onPress={this.takeVideo.bind(this)} style={styles.capture}>
                    <Text style={{ fontSize: 14 }}> VIDEO </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.stoprec.bind(this)} style={styles.capture}>
                    <Text style={{ fontSize: 14 }}> STOP </Text>
                </TouchableOpacity>
            </View>

Also create two methods to record video and stop the recording as below. and below methods are called in above buttons.

 takeVideo = async () => {
        if (this.camera) {
            try {
                const options = {
                    quality: 0.5,
                    videoBitrate: 8000000,
                    maxDuration: 30
                };
                const promise = this.camera.recordAsync(options);
                if (promise) {
                    this.setState({ recording: true });
                    const data = await promise;
                    this.setState({ recording: false });
                }
            } catch (error) {
                console.log(error);
            }
        }
    }

//stop the recording by below method
    stoprec = async () => {
        await this.camera.stopRecording();
    }

And finally, if you want file path and all you will get as data.uri

Thank you. Hope it gives the clear picture

score -1 · Answer 4 · answered Jun 22 '16 at 11:11

-1

syntax error:

then((data) => {
    console.log(data);
  })

((data)=>{}) should be done instead of (data=>{}).

answered Jun 22 '16 at 11:11

Chiranjhivi Ghimire

1,739
1
19
21

```stopVideo() { this.refs.camera.stopCapture({}) .then((data) => { console.log(data) }) .catch((err) => console.log(err)); }``` Here is the updated function, I still get the same error cannot read 'then' of undefined – hermt2 Jun 22 '16 at 14:15
did you upadate your code in takeVideo() method? if still gets problem then please post your console error screen shot or mobile screenshot – Chiranjhivi Ghimire Jun 23 '16 at 04:07
I did update the takeVideo() method. Here is the image of the error that I continue to get [1]: http://i.stack.imgur.com/HIaU9.png – hermt2 Jun 23 '16 at 04:50

How do I access the react-native-camera's video capabilities?

4 Answers4

Linked