react-native-beautiful-video-recorder
Thành phần ghi video mở rộng từ react-native-camera. Hoạt động trên cả iOS và Android.
Tính năng:
- Ghi video trên iOS và Android.
- Hỗ trợ
cameraOptionsvàrecordAsyncOptionstừreact-native-camera.
Cài đặt
yarn add react-native-beautiful-video-recorder react-native-camera react-native-vector-icons
Theo dõi react-native-camera và react-native-vector-icons để liên kết thư viện native.
Vui lòng gửi một vấn đề nếu bạn gặp bất kỳ vấn đề gì!
Cấu hình
iOS
Với iOS 10 trở lên, bạn cần thêm khóa “Privacy – Camera Usage Description” vào info.plist của dự án. Điều này nên được tìm thấy tại your_project/ios/your_project/Info.plist. Thêm mã sau:
<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
Thêm quyền trong Android Manifest của bạn (cần thiết cho tính năng ghi video)
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Sử dụng
import VideoRecorder from 'react-native-beautiful-video-recorder';
....
start = () => {
// 30 seconds
this.videoRecorder.open({ maxLength: 30 },(data) => {
console.log('captured data', data);
});
}
render() {
return (
<View>
......
<TouchableOpacity onPress={this.start}>
<Text>Start</Text>
</TouchableOpacity>
<VideoRecorder ref={(ref) => { this.videoRecorder = ref; }} />
</View>
);
}
Thuộc tính
| param | Thông tin |
|---|---|
| cameraOptions | https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md |
| recordOptions | https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md |
Dữ liệu gọi lại
Cuộc gọi lại sẽ được thực hiện với một đối tượng có một số thuộc tính sau:
uri: (chuỗi) đường dẫn đến video được lưu trong thư mục cache của ứng dụng bạn.
videoOrientation: (số) hướng của video
deviceOrientation: (số) hướng của thiết bị
iOS codec: mã codec của video đã ghi. Một trong các giá trị RNCamera.Constants.VideoCodec
isRecordingInterrupted: (boolean) liệu ứng dụng có bị thu nhỏ xuống trong khi ghi
Công việc cần làm
- Hỗ trợ phát lại trước khi lưu.
- Chuyển đổi camera.
Chi tiết tải về:
Tác giả: phuochau
Nguồn: https://github.com/phuochau/react-native-beautiful-video-recorder
