zl程序教程

您现在的位置是:首页 >  工具

当前栏目

react-native-beautiful-video-recorder 视频记录器组件

组件React 视频 native Video Beautiful
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>
	);
}