React Native Camera

1. The installation

Rn > 0.6

npm install react-native-camera --save / yarn add ...
pod installCopy the code

Please refer to the document for related permission configuration:

React Native Camera

2. Usage

<RNCamera            style={styles.preview}            type={this.state.cameraType}            flashMode={              this.state.isFlashOn === true                ? RNCamera.Constants.FlashMode.on                : RNCamera.Constants.FlashMode.off            }            whiteBalance="auto"            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',            }}          >            {({ camera, status }) => {              console.log(status)              return( <> {this.state.type == 2 ? ( <View style={styles.countDown}> <Text style={styles.seconds}>{this.state.countDown}s</Text> </View> ) : null} <View style={styles.operation}> <TouchableOpacity onPress={this.isShowVideofun.bind(this)}> <Text Style ={styles.cancel}> Cancel </Text> </TouchableOpacity> {this.state.type == 1? <TouchableOpacity onPress={() => this.takePicture(camera)}> <Image style={styles.tap}source={require('App/Assets/Images/tap.png')} />                      </TouchableOpacity>                    ) : (                      this.state.isRecording === false? <TouchableOpacity onPress={() => this.takerecord (camera)}> <Image style={styles.tap}source={require('App/Assets/Images/play.png')} /> </TouchableOpacity> ) : <TouchableOpacity onPress={() => this.stopRecord(camera)}> <Image style={styles.tap}source={require('App/Assets/Images/pause.png'/> </TouchableOpacity>))} {/* switchCamera */} <TouchableOpacity onPress={this.switchcamera.bind (this)}> <Image style={styles.cameraR}source={require('App/Assets/Images/cameraR.png')}                      />                    </TouchableOpacity>                  </View>                </>              )            }}          </RNCamera>Copy the code

Common properties and methods

• Type = {RNCamera. Constants. The back/front} set up front and rear cameras
• FlashMode = {RNCamera. Constants. FlashMode. On/off} whether have flash

3. Record video recordAsync()

TakeRecord = asyncfunction(camera) {    if (camera) {      this.timer = setInterval(() => {this.setState({countDown: this.state.countDown + 1,})}, 1000) // Compression video const options = {quality: RNCamera.Constants.VideoQuality['480p'], //4:3 maxFileSize: 10 * 1024 * 1024,// maxDuration: 14,// Max duration s} try {const promise = camera. RecordAsync (options)if (promise) {          this.setState({ isRecording: true}) const data = await promise this.setState({ videourl: data.uri, })} catch (e) {console.error(e)}} // Stop recording (camera) {this.timer && clearInterval(this.timer) this.setState({ isRecording:false, isShowVideo: false })    camera.stopRecording()  }Copy the code

takePicture = async function(camera) {    let that = this    if(camera) {const options = {quality: 0.5, base64:true }      try {        const promisep = camera.takePictureAsync(options)        if (promisep) {          let curpurl = this.state.pictureurl          const data = await promisep          console.log('dd', this.state.pictureurl) this.setState({// pictureUrl: curpurl.concat([data.uri]),// Shoot multiple pictureUrl: [data.uri], }) } } catch (e) { console.error(e) } } }Copy the code