使用react-native-video播放海康视频

1，最近在用react native开发项目的过程中，需要实现查看海康摄像头视频的功能，于是调研了react-native-video的使用，具体的集成如下文。

第一步 新建一个react native的项目 react-native init videoDemo --version 0.52.1（我使用的是0.52.1版本，版本没有要求）

第二步 使用webstorm打开刚刚创建的项目，执行yarn add react-native-video

image.png

再执行yarn add react-native-orientation,用来横竖屏的切换。

第三步 添加相应的库之后，执行react-native link

android:执行完react-native link之后，android就已经自动配置完成。
ios:首先需要在info.list里添加网络权限

image.png

然后在AppDelegate.m里添加#import "Orientation.h"还有

• (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [Orientation getOrientation];
  }

具体使用方法见demo

最终运行效果

image.png

这里是源码地址：https://github.com/xadlovezy/react-native-video-demo