前言:
第一次写文章,写得好嗨哦。大神就掠过。
欢迎喷我,我好改正。哈哈
Flutter集成原生UI组件官方提供了两个方法:
一种是基于纹理(Texture),这种方法一般用于集成视频插件,该方法是通过OpenGL进行渲染
另一种则是基于PlatformView方式,flutter通过UiKitView(IOS)或 AndroidView(Android)进行原生组件的渲染,这种方式在性能上有较大的开销。
纹理方式:
IOS:
1. 继承FlutterTexture
2. 管理已注册textures集合
_registry = [registrar textures]
3. 通过_registry注册registerTexture获得一个_textureId
_textureId=[_registry registerTexture]
4. 重写
- (CVPixelBufferRef)copyPixelBuffer
返回你的CVPixelBufferRef
5. 通知Texture去获取CVPixelBufferRef
[_registry textureFrameAvailable:_textureId];
Android:
1. 管理已注册textures集合
TextureRegistry textures = registrar.textures();
2. 创建一个SurfaceTextureEntry 实例
TextureRegistry.SurfaceTextureEntry textureEntry= textures.createSurfaceTexture();
textureId=textureEntry.id() //这个就是们在flutter Textrue中要用到的id
3. 实例化一个surface
surface = new Surface(textureEntry.surfaceTexture());
4.XXXX.setSurface(surface);//XXXX就是要封装的插件,要支持surface
至此就是整个flutter基于纹理(Texture)集成的简要过程,具体细节可参考flutter官方插件 video_player代码
了解了整个处理过程,我封装的了ijkplayer组件,支持Android/IOS 支持直播流和点播,地址:Flutter_IJKPlayer
结语:
在封装的过程中走了很多坑,其中一个最要的就是在IOS端集成的时候,由于从未做IOS视频开发,在初始化pixelBufferRef的时候没有为CVPixelBufferRef加kCVPixelBufferIOSurfacePropertiesKey属性,导致在flutter端一直渲染不出画面来,加断点查看又有图像,但始终没有视频画面。这一坑让我整个人都觉得好嗨哦。Android方面还进行得很顺利
#插件截图
网友评论