React Native Camera简单介绍与拍照录像示例

1. 安装

rn>0.6

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

相关权限配置详见文档：

React Native Camera

2.用法

<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}> 取消 </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>                      )                    )}                    {/* 切换摄像头 */}                    <TouchableOpacity onPress={this.switchCamera.bind(this)}>                      <Image                        style={styles.cameraR}                        source={require('App/Assets/Images/cameraR.png')}                      />                    </TouchableOpacity>                  </View>                </>              )            }}          </RNCamera>

常用属性和方法

• type={RNCamera.Constants.Type.back/front} 设置前后摄像头
• flashMode={RNCamera.Constants.FlashMode.on/off} 是否开启闪光灯

3.拍摄视频 recordAsync()

//开始录像  takeRecord = async function(camera) {    if (camera) {      this.timer = setInterval(() => {        this.setState({          countDown: this.state.countDown + 1,        })      }, 1000)      // 压缩视频      const options = {        quality: RNCamera.Constants.VideoQuality['480p'], //4:3         maxFileSize: 10 * 1024 * 1024,//最大视频大小
         maxDuration: 14,//最大持续时间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)      }    }  }  //停止录像  stopRecord(camera) {    this.timer && clearInterval(this.timer)    this.setState({ isRecording: false, isShowVideo: false })    camera.stopRecording()  }