第三方依赖

• react-native-syan-image-picker 图片视频选择器，优势是国人维护好沟通。也可以选react-native-image-picker。
• react-native-aliyun-vod-upload 阿里云上传SDK的封装。

视频选择、拍摄

react-native-syan-image-picker非常好用，按照文档先配置：

const videoOptions = {
  MaxSecond: 600,
  MinSecond: 0,
  recordVideoSecond: 600,
  videoCount: 1,
}

接着就可以拿到选择结果：

ImagePicker.openVideoPicker(videoOptions, (err, data) => {
   // 这里处理结果
 });

视频压缩、上传

用户上传的视频分辨率、帧率、格式等信息都不确定，因此有一个统一化的处理、压缩过程是必要的。
需要注意的是，react-native-syan-image-picker依赖PictureSelector，而不管是react-native-syan-image-picker还是react-native-image-picker，都自带图片压缩而只有很简陋的视频压缩，这意味着视频要么压过头，要么分辨率过高且过大。react-native-syan-image-picker目前没有进一步支持视频压缩的计划，那么比较好实现的方案就是使用阿里云的视频转码。

先在阿里云后台配置转码模板，详见阿里云视频转码文档。
然后开始思考流程：

1. 客户端SDK向服务端获取上传凭证
2. 服务端向阿里云服务器请求凭证，将凭证返回客户端
3. 客户端上传视频，上传成功后通知服务端
4. 服务端保存原始视频地址等信息
5. 服务端请求视频转码，转码完成在回调中更新视频地址等信息

要点就是转码其实是一个需要时间的过程，客户端不必等待转码，如果需要上传视频后立即播放视频，可以使用“播放本地视频”或者“播放上传阿里云后的原始视频地址”等方案，转码完成后再用新地址。

理清思路后就好办了，之后无论react-native-aliyun-vod-upload还是阿里云后端SDK的文档都比较完备，使用简单，就不再赘述了。

容易遇到的问题

上传时，需要传入一个path参数：

AliyunVodFileUpload.addFile({
  path: '',
  type: 'mp4',
  title: '',
  desc: '',
  cateId: 1,
  tags: ''
})

AliyunVodFileUpload.start()

这个路径是否就是react-native-syan-image-picker返回的结果呢？答案是，iOS上没问题，直接取uri即可；Android上uri会是一个file://开头的路径。参考阿里云SDK Demo发现，SDK需要的只是纯粹的路径（例如/storage/emulated/0/...），不需要file://开头或者content://开头，最快的解决办法就是修改react-native-syan-image-picker中的RNSyanImagePickerModule.java，大约362行的位置，将

videoMap.putString("uri", "file://" + filePath);

改为

videoMap.putString("uri", filePath);

问题搞定！（坑爹的阿里云工单客服，误导了我好久……）