接入声网音视频SDK-视频悬浮窗功能

一、前言

视频悬浮窗功能还是比较难的，也比较复杂。声网也是没有提供相应的api或者demo，得自己做。
难点如下：

1. 悬浮框显示了，原来界面怎么办，怎么让它隐藏起来
2. 点击悬浮窗，怎么回到原来界面
3. 从悬浮窗回到原来界面，通话时间怎么延续下去，而不是从0开始
4. 在悬浮窗时，对方挂断了通话，怎么关闭悬浮窗
5. 等等要处理的问题

二、先看下效果图

QQ图片20220506145204.jpg

三、解决思路

针对上面已知问题，说下解决方案

1. 悬浮窗显示时，直接finish调原来界面，但需要做个标记，这种关闭是不能退出频道的，否则会挂断通话的
2. 上面说到出现悬浮窗会直接finish界面，所以点击悬浮窗，也是新起一个通话界面，但是这是时通话中的界面。界面上所需的数据，就定义个对象，用于悬浮窗和界面之间互相传递的数据
3. 从悬浮窗到原来界面，通话时间怎么延续问题。就是在悬浮窗上也开一个计时器
4. 直接关闭悬浮窗即可。能做退出频道处理最好。

四、给下关键视频悬浮窗代码提供思路

/**
 * @desc : 显示视频悬浮窗
 * @author : congge on 2022-04-07 10:38
 **/
private fun showVideoFloat(isCallOutGoing:Boolean,startCallBean:StartCallBean,microphoneStatus:Boolean,speakerStatus:Boolean,cameraCloseStatus:Boolean) {
    
    EasyFloat.with(this.applicationContext)
        // 设置浮窗xml布局文件/自定义View，并可设置详细信息
        .setLayout(R.layout.layout_call_video_float) {

            val fl_video_small = it.findViewById<FrameLayout>(R.id.fl_video_small)
            fl_video_small.removeAllViews()
            val surfaceView = RtcEngine.CreateRendererView(mContext)
            LogUtils.i("surfaceViewRemote",surfaceViewRemote.toString())
            fl_video_small.addView(surfaceView)
            LogUtils.i("surfaceViewRemote1",fl_video_small.childCount.toString())

            // Initializes the video view of a remote user.
            rtcEngine?.setupRemoteVideo(
                VideoCanvas(
                    surfaceView,
                    VideoCanvas.RENDER_MODE_HIDDEN,
                    videoUid
                )
            )
            surfaceView.tag = videoUid
            val ch_video_time = it.findViewById<Chronometer>(R.id.ch_video_time)
            ch_video_time.base = mBinding.chChatVideoCallAcceptingTime.base
            ch_video_time.start()
            startCallBean.isCallOutGoing = isCallOutGoing
            startCallBean.remoteCloseCamera = mBinding.tvVideoCallRemoteCameraStatus.visibility == View.VISIBLE
            ch_video_time.setOnChronometerTickListener { ch ->
                    if (isCallOutGoing){
                        dealChatMediaCheckGold(ch.base,startCallBean.mediaId,rtcEngine,true)
                    }
                    startCallBean.secondCall = ((SystemClock.elapsedRealtime() - ch.base)/1000)
                    startCallBean.chBase = ch.base
                    //用于对方退出频道时，请求接口用
                    fl_video_small.setTag(R.id.startCallBean_tag,startCallBean)
            }
            //设置tag,保证activity关闭时，mRtcEventHandler不会回收
            fl_video_small.setTag(R.id.rtcEventHandler_tag,mRtcEventHandler)
            fl_video_small.setTag(R.id.rtcEngine_tag,rtcEngine)
            RxViewUtils.prClick(fl_video_small) {
                startCallBean.isFloatBackCall = true
                startCallBean.videoUid = videoUid
                startCallBean.callBaseTime = SystemClock.elapsedRealtime() - ch_video_time.base
                startCallBean.microphone = microphoneStatus
                startCallBean.speaker =speakerStatus
                startCallBean.closeCamera = cameraCloseStatus
                startCallBean.isShowGoldFloat = EasyFloat.appFloatIsShow(gold_float_tag)
                CRouter.go(AppRouter.appSingleCall, obj = startCallBean, arg1 = if (isCallOutGoing) outGoing else inComing)
                EasyFloat.dismissAppFloat(video_float_tag)

            }
        }
        // 设置浮窗显示类型，默认只在当前Activity显示，可选一直显示、仅前台显示
        .setShowPattern(ShowPattern.ALL_TIME)
        // 设置吸附方式，共15种模式，详情参考SidePattern
        .setSidePattern(SidePattern.RESULT_HORIZONTAL)
        // 设置浮窗的标签，用于区分多个浮窗
        .setTag(video_float_tag)
        // 设置浮窗是否可拖拽
        .setDragEnable(true)
        // 设置浮窗的对齐方式和坐标偏移量
        .setGravity(
            Gravity.TOP or Gravity.RIGHT,
            -CUtils.dp2px(mContext, 16),
            CUtils.dp2px(mContext, 40)
        )
        // 设置系统浮窗的不需要显示的页面
        //.setFilter(SingleCallActivity::class.java)
        // 创建浮窗
        .show()
    if (!this.isFinishing){
        isShowFloatFinish = true
        finishAndRemoveTask()
    }
}

如果要悬浮框完整代码或者其他声网音视频功能有问题，私信我