（笔记）react-native-camera 视频压缩

android10 文件找不到需配置（android:requestLegacyExternalStorage = “true” ）

用的几个icon可以自行换一下   

需要注意的就是

一定记得要获取权限再开

前后摄像头   录像  的小功能  我只是看了一下android

 

使用：

import {Text,View,PermissionsAndroid } from 'react-native';


   
             <View>
                   <Text  onPress={()=>{this.goCamera()}}>
                      rnCamrea
                   </Text>
             </View>




          async goCamera() {
            try {
                const granted = await PermissionsAndroid.request(
                    PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
                    {
                        'title': '权限',
                        'message': '我需要权限'
                    }
                )
                if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                    this.props.navigation.navigate('camera',{
                        getMp4:(uri,time)=>{
                            console.log(uri+'-----'+time)
                        }
                    })

                   } else {
                      console.log('error')
                   }
              } catch (err) {
               console.log(err)
             }
         }

 

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

export default class rnCamera extends Component {
    constructor(props){
        super(props);
        this.state={                  
            cameraType:RNCamera.Constants.Type.back,        //前后摄像头
            isRecording:false,      //是否在录像
        }
    }
    replace(){
        var state = this.state;
        if(state.cameraType === RNCamera.Constants.Type.back) {
          state.cameraType = RNCamera.Constants.Type.front;
        }else{
          state.cameraType = RNCamera.Constants.Type.back;
        }
        this.setState(state);
    }

    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    style={styles.preview}
                    type={this.state.cameraType}
                    permissionDialogTitle={'Permission to use camera'}
                    permissionDialogMessage={'We need your permission to use your camera phone'}
                >
                    {({ camera, status }) => {
                        return (
                            <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                                <TouchableOpacity onPress={() => this.replace(camera)} style={{position:'absolute',bottom:20,left:-40}}>
                                <Icon name="ios-reverse-camera" style={{fontSize:50}}></Icon>
                                </TouchableOpacity>
                              {this.recordBtn(camera)}
                            </View>
                        );
                    }}
                </RNCamera>
            </View>
        );
    }

    recordBtn(camera){
        if (this.state.isRecording===false){
            return(
                <TouchableOpacity onPress={() => this.takeRecord(camera)} style={styles.capture}>
                   <Icon name="ios-radio-button-off"></Icon>
                </TouchableOpacity>
            )
        } else {
            return (
                <TouchableOpacity onPress={() => this.stopRecord(camera)} style={styles.capture}>
                   <Icon name="ios-power"></Icon>
                </TouchableOpacity>
            )
        }
    }
    //开始录像
     takeRecord= async function(camera){
        this.setState({isRecording:true,
        start:(new Date()).getTime()});
            //功能挺强大的  需求是压缩视频 说白了就是录像像素差  所以我选择的4:3  文件大小10M
        const options = { quality:RNCamera.Constants.VideoQuality["4:3"],maxFileSize:(10*1024*1024) };
        camera.recordAsync(options)
        .then(res=>{
                //停止录像  调用stopRecording方法后 才会返回这个  详情看文档
            let time=(this.state.end-this.state.start)/1000
            this.props.navigation.state.params.getMp4(res.uri,time)
            this.props.navigation.goBack()
        })
        .catch(err=>{
          console.log('err'+err)
        })
    };
    //停止录像
    stopRecord(camera){
        this.setState({isRecording:false,
        end:(new Date()).getTime()});
        camera.stopRecording()
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});