react-native-beautiful-video-recorder 视频记录器组件
2023-09-27 14:29:07 时间
视频记录器组件,扩展自react-native-camera。适配iOS和Android。
https://github.com/phuochau/react-native-beautiful-video-recorder
特性:
- 在iOS和Android上记录视频
- 在iOS上将MOV转换为MP4。因此Android&iOS都会返回MP4格式。
安装
npm i --save react-native-beautiful-video-recorder react-native link
配置
iOS
使用iOS 10或者更高的版本,你需要将"Privacy - Camera Usage Description"键添加到项目的info.plist。这将会在'your_project/ios/your_project/Info.plist'中找到。添加下列代码:
<key>NSCameraUsageDescription</key> <string>Your message to user when the camera is accessed for the first time</string> <!-- Include this only if you are planning to use the microphone for video recording --> <key>NSMicrophoneUsageDescription</key> <string>Your message to user when the microsphone is accessed for the first time</string>
Android
在Android Manifest中添加权限
<uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.RECORD_VIDEO"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
使用方法
import VideoRecorder from 'react-native-beautiful-video-recorder'; .... start = () => { this.videoRecorder.open((data) => { console.log('captured data', data); }); } render() { return ( <View> ...... <TouchableOpacity onPress={this.start}> <Text>Start</Text> </TouchableOpacity> <VideoRecorder ref={(ref) => { this.videoRecorder = ref; }} compressQuality={'medium'} /> // quality will be 'low', 'medium' or 'high' </View> ); }
相关文章
- 如何写出漂亮的React组件
- 小程序封装tab组件
- React Native 图表组件Echarts
- Android Jetpack架构组件(七)之WorkManager
- Android新架构组件WorkManager
- React Native 组件之SafeAreaView
- React组件详解
- 深入理解React的组件状态
- 集群通信组件Tribes之怎样维护集群成员信息
- Angular 学习笔记 (组件沟通的思考)
- 中来股份联手PICC 为高效光伏组件质量与功率保驾护航
- 【Scrapy(二)】Scrapy 中的 Pipline,Item,Shell组件
- react-native 安卓手机Text组件文字显示不全问题
- Context - React跨组件访问数据的利器
- 聊聊高并发(二十五)解析java.util.concurrent各个组件(七) 理解Semaphore
- vue component 组件的使用
- 怎样在不使用框架的基础上开发一个 Javascript 组件
- 使用npm发布一个react组件(踩坑实践)
- react 的高阶组件再理解
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- React native全局变量的使用(跨组件的通信)
- react-native制作新手引导组件
- React Native常用一些组件
- React-Native学习--轮播图第三方组件-react-native-swiper
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- React router动态加载组件-适配器模式的应用
- vue——使用轮播组件swiper,设置 loop为true后,点击事件失效及轮播索引错乱问题