Как мне получить доступ к видеовозможностям реакционной камеры?

Я пытался заставить работать видео-функцию реагирующей нативной камеры, но пробовал огромное количество методов, но продолжал получать одни и те же ошибки. Вот мой код:

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));
  }
}

Когда я использую обещание «.then» в методе stopCapture(), я получаю сообщение об ошибке «Невозможно прочитать свойство «then» неопределенного», но если я не добавлю «.then», ничего не происходит, и я не не получают никаких данных. У кого-нибудь есть предложения?


react-native react-native-camera
person hermt2    schedule 22.06.2016    source источник
comment
stackoverflow.com/questions/48280005/   -  person Kamlesh Tilwani    schedule 17.04.2018

Ответы (4)


arrow_upward
0
arrow_downward 

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();
}

Функция stopCapture() не является обещанием.

person Chase Starr    schedule 26.06.2016
comment
Хорошо, круто, теперь он снимает видео. Но единственный способ, которым я это знал, заключался в том, чтобы изменить цель на «Camera.constants.CaptureTarget.cameraRoll», а затем проверить свою камеру, чтобы увидеть видео. Моя проблема в том, что он не записывает в console.log какие-либо данные, потому что я хочу пойти и сделать что-то еще с этими видеоданными в своем приложении, а не просто сохранить видеофайл на свой телефон. - person hermt2; 27.06.2016
comment
Неважно, по какой-то причине они отображаются только в консоли Xcode, а не в инструменте отладки Google Chrome. Тем не менее я получаю данные. Спасибо. - person hermt2; 28.06.2016
comment
К сожалению, я потерял этот файл и снова переделываю проект с нуля. У меня все примерно так, как я помню, но данные все равно не распечатываются. Если вы все еще можете помочь, это было бы здорово. Я опубликую новый компонент ниже, если вы могли бы взглянуть на него. Недостаточно места, чтобы опубликовать это в этом поле для комментариев. - person hermt2; 18.07.2016

arrow_upward
0
arrow_downward

ошибка синтаксиса:

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

((data)=>{}) should be done instead of (data=>{}).
person Chiranjhivi Ghimire    schedule 22.06.2016
comment
stopVideo() { this.refs.camera.stopCapture({}) .then((data) => { console.log(data) }) .catch((err) => console.log(err)); } Вот обновленная функция, я все еще получаю ту же ошибку, не могу прочитать «тогда» из неопределенного - person hermt2; 22.06.2016
comment
вы обновили свой код в методе takeVideo()? если проблема все еще возникает, опубликуйте снимок экрана с ошибкой консоли или снимок экрана с мобильного устройства. - person Chiranjhivi Ghimire; 23.06.2016
comment
Я обновил метод takeVideo(). Вот изображение ошибки, которую я продолжаю получать [1]: i.stack.imgur. com/HIaU9.png - person hermt2; 23.06.2016

arrow_upward
0
arrow_downward

Новый компонент после досадной потери старого файла:

 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()
  }

}
person hermt2    schedule 18.07.2016

arrow_upward
0
arrow_downward

Камера открыта, создайте 2 кнопки для запуска и остановки видео ниже.

                <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();
    }

И, наконец, если вам нужен путь к файлу и все, что вы получите, как data.uri

Спасибо. Надеюсь, это дает четкую картину

person Deepak N    schedule 25.09.2019