React native camera not recording video

Question

I want to implement the video recording feature using react native video but the start recording function is not giving any response, I even consoled to see whether it is getting called,actually it is not, am unable to figure what I have done wrong.

Below is the exact code that I have written

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import {RNCamera} from 'react-native-camera';

export default class Shoot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };
  }
  async startRecording() {
    this.setState({recording: true});
    // default to mp4 for android as codec is not set
    const {uri, codec = 'mp4'} = await this.camera.recordAsync();
  }
  stopRecording = () => {
    this.camera.stopRecording();
  };
  render() {
    const {recording, processing} = this.state;

    let button = (
      <TouchableOpacity
        onPress={this.startRecording.bind(this)}
        style={styles.capture}>
        {console.log('aaa')}
        <Text style={{fontSize: 14}}> RECORD </Text>
      </TouchableOpacity>
    );
    if (recording) {
      button = (
        <TouchableOpacity
          onPress={this.stopRecording.bind(this)}
          style={styles.capture}>
          <Text style={{fontSize: 14}}> STOP </Text>
        </TouchableOpacity>
      );
    }
    if (processing) {
      button = (
        <View style={styles.capture}>
          <ActivityIndicator animating size={18} />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <RNCamera
          ref={(ref) => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={
            'We need your permission to use your camera phone'
          }
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
          {button}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#e75480',
    borderRadius: 40,
    width: 80,
    height: 80,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

so here, the button touchability onpress which is startRecording is not getting called at all. Any help would be great, thank you

No, it is still the same @Riddhi – TRINA CHAUDHURI Aug 31 '20 at 07:55 — TRINA CHAUDHURI, Aug 31 '20 at 07:55

score 2 · Accepted Answer · edited Nov 20 '21 at 12:55

2

I still could not figure what went wrong with the above code but using react-native-beautiful-video-recorder as the package, I finally found the app to behave as per my requirements. If anybody meets with the same issue, it is better to use react-native-beautiful-video-recorder.

edited Nov 20 '21 at 12:55

Avisek Chakraborty

8,229
10
48
76

answered Aug 31 '20 at 08:56

TRINA CHAUDHURI

627
1
11
42

BloodyMonkey · Answer 2 · 2020-08-31T07:57:02.247

0

Try onPress with arrowed function

  <TouchableOpacity
    onPress={() => this.startRecording()}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>

And bind this

constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };

    this.startRecording = this.startRecording.bind(this)
}

edited Aug 31 '20 at 07:57

answered Aug 31 '20 at 07:52

BloodyMonkey

1,572
1
9
15

No,binding this with arrow function does not seem to work – TRINA CHAUDHURI Aug 31 '20 at 07:55
I updated my answer, you can bind functions and methods in the constructor – BloodyMonkey Aug 31 '20 at 07:57
still the same behaviour – TRINA CHAUDHURI Aug 31 '20 at 08:09

score 0 · Answer 3 · answered Aug 31 '20 at 07:58

render() {
  const {recording, processing} = this.state;
  let button;

  if (recording) {
    button = (
    <TouchableOpacity
      onPress={this.stopRecording.bind(this)}
      style={styles.capture}>
      <Text style={{fontSize: 14}}> STOP </Text>
    </TouchableOpacity>
  );
}
else if (processing) {
  button = (
    <View style={styles.capture}>
      <ActivityIndicator animating size={18} />
    </View>
  );
}
else {
 button = (
  <TouchableOpacity
    onPress={this.startRecording.bind(this)}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>
);

if you could send a working snack of this just for reference,it would be great, as it is not working for me,and am still unsure why — TRINA CHAUDHURI, Aug 31 '20 at 08:50

score 0 · Answer 4 · edited Jan 22 '21 at 08:44

0

The issue you are dealing with is much simpler than you think

your initial state is this one

this.state = {
      recording: false,
      processing: true,
    };

so the button then renders if processing and recording are false , the initial button starts the video, so your initial state must be this one

this.state = {
      recording: false,
      processing: false,
    };

edited Jan 22 '21 at 08:44

Charith Jayasanka

4,033
31
42

answered Jan 21 '21 at 15:25

tomas goldenberg

1

React native camera not recording video

4 Answers4