CODEWITHSUNDEEP
react-nativeexpocameraandroid-camera2expo-go
a0m0rajab
a0m0rajab

Reputation: 475

expo 51 camera: recording was stopped before any data could be produced

I am trying to record a video with expo go 51, after updating the camera API to camera View I got the error mentioned in the title of this question.

The problem is that the code was working in 50 but did not work in 51, which is a bit odd.

here is my code:


async function takeVideo() {
    // request permission to record audio 
    const { status } = await Camera.requestMicrophonePermissionsAsync();
    if (cameraRef.current) {
      if (isRecording) {
        console.log('Stopped recording isRecording:', isRecording);
        cameraRef.current.stopRecording();
        setIsRecording(false);
      } else {
        setIsRecording(true);
        console.log('Start recording');
        const video = cameraRef.current.recordAsync();
        video.then((video) => {
          console.log('Video saved:', video?.uri);
          const asset = MediaLibrary.createAssetAsync(video?.uri as string);
        });
        // console.log('Video saved:', video?.uri);
        // const asset = await MediaLibrary.createAssetAsync(video?.uri as string);
        console.log('Stopped recording');

      }
    }
  }

the camera component:

<CameraView ref={cameraRef} style={styles.camera} facing={type as CameraType}>
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
              <Text style={styles.text}>Flip Camera {selectedRatio}</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={takeVideo}>
              <Text style={styles.text}>{ isRecording? "Stop" : "Take" } Video</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={takePicture}>
              <Text style={styles.text}>Take Picture</Text>
            </TouchableOpacity>
            {image && <Image source={{ uri: image }} style={{
              flex: 1, width: 100, height: 100, alignSelf: 'flex-end',
              alignItems: 'center', justifyContent: 'center', resizeMode: 'contain'
            }} />}
          </View>
        </CameraView>

Upvotes: 3

Views: 1177

Answers (1)

a0m0rajab
a0m0rajab

Reputation: 475

The issue was that I did not have mode in my cameraView component, setting the mode to video solved it.

        <CameraView mode="video" ref={cameraRef} style={styles.camera} facing={type as CameraType}>

Upvotes: 7

Related Questions