flutter进阶之封装ijkplayer使其支持rtsp播放

【原创不易,转载请注明出处:https://blog.csdn.net/email_jade/article/details/86650561】   

【20190222更新】

flutter_ijk 是flutter端的ijkplayer播放器,在IOS和Android native端都使用的是bilibili的ijkplayer,由于GitHub大小限制,本项目的ijkplayer源码放在https://gitee.com/jadennn/flutter_ijkplayer_source.git,已经定制过编译脚本和部分的功能代码,可以参考以下步骤来获取:

 1. ijkplayer的源码如下,支持ios和Android编译:

     编译步骤请查看源码根目录的readme.txt

     默认使用的是module-rtsp.sh,如果要增加配置,请修改此文件。

     ijkplayer源代码:

      https://gitee.com/jadennn/flutter_ijkplayer_source.git

 2. 对于Android ijk的编译,参考如下链接,请注意,使用上面的ijkplayer代码,不用再通过脚本重复下载ijkplayer了:

     a.配置jdk,sdk,ndk环境

     b.查看ijkplayer下的readme.txt,参考编译Android so库

     c.拷贝修复bug后的编译完成的so库替换flutter_ijk Android目录下的so库,注意的是多平台支持

     https://blog.csdn.net/coder_pig/article/details/79134625

  1. 对于IOS ijk的编译,参考如下链接,请注意,使用上面的ijkplayer代码,不用再通过脚本重复下载ijkplayer了:

    a. 配置环境

    b.查看ijkplayer下的readme.txt,编译ios代码

    c.制作framework(需要注意的是我的IJKMediaPlayer里面有一些关于CVPixelBufferRef的定制,都加了//add for flutter的注释,这些修改不能去掉)

    d.拷贝修复bug后的编译完成的IJKMediaFramework.framework替换flutter_ijk IOS目录下的IJKMediaFramework.framework库

    https://www.jianshu.com/p/3108c8a047ee

以上步骤可以得到ijkplayer在Android端的so库和IOS的framework文件,dart层见GitHub仓库。

    

【前言】

    项目中要用到rtsp视频流的播放,但是flutter原生播放器video_player不支持rtsp,因为原生播放器在安卓native采用的是EXOPlayer,而在IOS端采用的是AVPlayer,这两个播放器目前都不支持rtsp(可以自定义支持,但是video_player集成的版本不支持),因此必须自己来封装一个播放器,以便进行rtsp的播放。

      github地址 【https://github.com/jadennn/flutter_ijk

    【正文】

    播放器的选择,因为之前做安卓项目用过ijkplayer,并且只要重新编译一下就可以支持rtsp了,因此,在Android和IOS的native层都采用的是ijkplayer。

    先放上效果图:

    

     首先来了解一下flutter的插件开发,就是利用平台通道在原生与flutter之间建立一个桥梁,以便在flutter中使用native的功能,具体见https://book.flutterchina.club/chapter11/platform-channel.html,所以插件的开发一般分为三个部分:native,flutter以及平台通道相关。由于平台通道部分比较简单,一般的插件都大同小异,我们本篇文章就着重讲一下ijkplayer的native和flutter部分。

    要使用ijkplayer并且支持rtsp,无论是Android还是IOS,都必须配置脚本重新编译,而在这之前,我们要先了解一下flutter的纹理渲染方式,也就是我们的视频怎么展示到屏幕上的,详见http://www.cocoachina.com/ios/20180926/25027.html,大意是说在flutter中采用的是OpenGL来进行渲染的,并且Android端和IOS端还是有一些差别的。对于Android而言,可以直接通过

TextureRegistry textures = registrar.textures();
TextureRegistry.SurfaceTextureEntry handle = textures.createSurfaceTexture();
Surface surface = new Surface(handle .surfaceTexture());

这样简单几步得到我们常见的surface,然后就可以直接将ijkplayer的视频流输出到surface上了。对于IOS而言,要渲染到屏幕上,系统提供了一个api:

@protocol FlutterTexture <NSObject>
- (CVPixelBufferRef _Nullable)copyPixelBuffer;

因此我们需要得到ijkplayer的视频流CVPixelBufferRef,但是对于ios而言,ijkplayer并没有这样的接口,也就是说,我们需要去对ijkplayer做一些简单的修改,让我们能够直接获取CVPixelBufferRef流,这里参考的是ARVRSchool的三篇文章:

https://www.jianshu.com/p/8c8dceb86915

https://www.jianshu.com/p/852d7429897b

https://www.jianshu.com/p/1802b45ed612

    理清了Android和IOS对flutter的渲染方式后我们就可以着手修改编译ijkplayer了,要支持rtsp,首先要修改一下config下面的module脚本,建议基于module-lite.sh修改,这样编出来的库不至于太大,当然,除了rtsp,其他的协议格式或者编解码格式也是在module.sh里面修改配置的,如下:

##新增
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-demuxer=rtsp"
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-demuxer=sdp"
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-demuxer=rtp"
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-protocol=tcp"
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-protocol=udp"

##修改
export COMMON_FF_CFG_FLAGS="$COMMON_FF_CFG_FLAGS --enable-protocol=rtp"

    Android端编译即可,IOS端,前文说到过,要修改源码,支持获取CVPixelBufferRef, 参考以上链接即可。

    有了Android和IOS的库然后可以开始ijkplayer flutter库的封装了,本代码参考的是官方库video_player进行封装的,值得注意的是,要保持Android和IOS native端接口的统一,因为它们最终都是通过平台通道映射到flutter中的,对于Android和IOS,ijkplayer的时间单位分别为ms和s, 这点尤其注意。为了提升rtsp的播放质量,在播放之前配置了一些ijkplayer的option,具体可以参考GitHub的源代码。

    由于本篇内容实在太多,很多细节只有在阅读代码的时候才能体现出来,因此就不再赘述了,详见https://github.com/jadennn/flutter_ijk 。

   当然,如果不想了解实现过程,想直接体验一下本文的库,参考如下步骤即可:

    1. 在pubspec.yaml中引用库:

  flutter_ijk:
    git:
      url: https://github.com/jadennn/flutter_ijk

    2. 使用:

class VideoPageState extends State<VideoPage> {
  IjkPlayerController _controller;

  @override
  void initState(){
    super.initState();
      _controller = IjkPlayerController.network("rtsp://admin:!QAZ2wsx@172.21.90.3/h264/ch1/main/av_stream")
        ..initialize().then((_) {
          setState(() {});
          _controller.play();
        });
  }


  @override
  Widget build(BuildContext context) {
    return Material(
      child: _controller == null ? Container(): Center(
        child:
          _controller.value.initialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: IjkPlayer(_controller),
                )
              : Container(),
      ),
    );
  }
}

    详细接口api请阅读源码。

 

    flutter很好,路还很长,让我们一起奋斗前行!

 

    

发布了35 篇原创文章 · 获赞 19 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览