更新内容说明
2018-01-19
解决在华为荣耀机型4.4.4 api19上不支持COLOR_FormatYUV420Planar问题
2018-01-17
修改安卓端API19时,闪退问题,19改回COLOR_FormatYUV420Planar编码 isSupportPlanarYUV增加版本判断
2018-01-15
按官方方法,修改IOS端通过style属性来控制KSYVideo,取消videoframe属性
2018-01-14
- 修改安卓端文件保存目录为:
Environment.getExternalStorageDirectory() + "yunkan/screenshots"
Environment.getExternalStorageDirectory() + "yunkan/records"
Environment.getExternalStorageDirectory() + "yunkan/recordScreenshots"
- 修改安卓端返回uri的值
file:/storage/emulated/0/yunkan/screenshots/20180115-012220-109.png
- 关于安卓端目录创建权限问题
保持项目的targetSdkVersion 22,当targetSdkVersion>=23时,安卓需要以显示方式单独申请操作权限,此问题以后再处理
- 修改安卓端isSupportPlanarYUV文件,判断是否为COLOR_FormatYUV420Flexible,解决绿屏问题
2018-01-11 新增加视频录像首页截图功能功能
- 录像返回时,只在开始返回值中包括录像缩略图参数
recordScreenshotPath recordScreenshotURL
- 例子中,VideoList修改原filePath为全局RootPath
let recordScreenshot = "file://"+RootPath+"/recordScreenshots/"+item.name+".png";
recordScreenshot文件名格式为:xxxxxx.mp4.png
-
ios中,目前取网关中rtmp流录像保存时出错,此音频采样为8000,目前调整为小于44100的默认为44100
-
取消example中的KSYVideo.js文件,防止运行时,把组件重复注册
2018-01-10 新增加视频截图和录像功能
- Android 取图片目录
Environment.getExternalStorageDirectory() + "DCIM/video"
-
Android 取视频目录 Environment.getExternalStorageDirectory() + "DCIM/image"
-
IOS 取图片目录 DocumentPath + "/screenshots"
-
IOS 取视频目录 DocumentPath + "/records"
-
取图方法 *
使用react-native-fs库进行取图操作,注意,需要对取出的列表进行倒序显示 取文件时,在android上需要在路径前加"file://"
react-native-video-player
Source Type: Open Source
Media Player for React-Native, base on KSYMediaPlayer.
More details about KSYMediaPlayer, please click the link blow:
- KSYMediaPlayer Android SDK for vod or live streaming playing
- KSYMediaPlayer iOS SDK for vod or live streaming playing
Android support
iOS support
1. About
A <KSYVideo>
component for react-native,requires react-native >= 0.49.0
1.1 Add it to your project
- Install via npm
Run npm install react-native-ksyvideo --save
1.2 Usage Example
<KSYVideo source={{uri: "rtmp://"}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}} // Store reference
volume={1.0}
muted={false}
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
progressUpdateInterval={250.0} // Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
style={styles.backgroundVideo} />
// Later on in your styles..
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
2. Android Integration
Run react-native link
to link the react-native-ksyvideo library.
Or if you have trouble, make the following additions to the given files manually:
android/settings.gradle
include ':react-native-ksyvideo'
project(':react-native-ksyvideo').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ksyvideo/android')
android/app/build.gradle
dependencies {
...
compile project(':react-native-ksyvideo')
}
MainApplication.java
On top, where imports are:
import com.ksyun.media.reactnative.ReactKSYVideoPackage;
Add the ReactKSYVideoPackage
class to your list of exported packages.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactKSYVideoPackage()
);
}
3. iOS Integration
Run react-native link
to link the react-native-ksyvideo library.
Add KSYMediaPlayer.framework(which is in node_modules/react-native-ksyvideo/ios directory) to your project setting 'target->Build Phases->Link Binary With Libraries'.
Add Framework Search Path : '../node_modules/react-native-ksyvideo/ios'
4. Remarks
If you want to updata native sdk for KSYVideo,make the following additions
4.1 Android
The KSYVideo is dependented on jcenter,you can modify the dependencies ,update to high version
build.gradle(Module:react-native-ksyvideo)
dependencies {
compile "com.facebook.react:react-native:+" // From node_modules
compile 'com.ksyun.media:libksyplayer-arm64:2.1.0'
compile 'com.ksyun.media:libksyplayer-x86:2.1.0'
compile 'com.ksyun.media:libksyplayer-armv7a:2.1.0'
compile 'com.ksyun.media:libksyplayer-java:2.1.0'
}
4.2 iOS
Get the latest framework of KSYMeidaPlayer_iOS at https://github.com/ksvc/KSYMediaPlayer_iOS/releases, then replace the old framework in node_modules/react-native-ksyvideo/ios directory