如何在在线直播网站源码中,实现视频连麦直播?

与传统的一位主播对用多位观众的直播模式相比,两位及以上主播连麦直播的方式更具互动性,也更容易调动直播间的直播氛围,所以现在大多的在线直播网站源码的开发搭建都需要实现视频连麦功能,接下来我们一起来了解一下具体的实现方式吧。

在线直播网站源码实现视频连麦的核心步骤分析

  • 游客申请连麦/取消申请
  • 主播同意/拒绝申请
  • 音视频发布取消
  • 支持很多观众观看
  • 支持多人连麦
  • 低延时
  • IM 弹幕

在线直播网站源码实现视频连麦技术端调研
大致可以分为视频采集、编码,传输,解码,渲染等等…

所以经过调研,发现市场上已经有很多成熟的商业解决方案,并且成本很低就可以接入使用。

对比了很久,最后采用 anyRTC 公司的两个 SDK 来完成在线直播网站源码中视频连麦中的音视频通许和信令传输。

信令交互
在这里插入图片描述

首先利用 RTM SDK,主播和游客端都分别加入在线直播网站源码同一个频道,这样就能实现频道内的成员心令交互。
实现在线直播网站源码中申请连麦/取消申请连麦的话,只需要和主播端约定好信令格式即可,代码如下。

游客

//申请连麦
fun applyLine() {
        RtmManager.instance.sendPeerMessage(hostId,
            "{\"cmd\": \"apply\", \"avatar\": \"$userAvatar\", \"userName\": \"$userNickname\"}"
        )
    }
    
//取消申请连麦
fun cancelApply() {
        RtmManager.instance.sendPeerMessage( hostId,"{\"cmd\": \"cancelApply\"}"
        )
    }

//收到信令回调通知
override fun onP2PMessageReceived(var1: RtmMessage?, var2: String?) {
            val params = JSONObject(var1.text)
            when (params.get("cmd")) {
                "acceptLine" -> {
                    //主播同意
                }
                "rejectLine" -> {
                   //主播拒绝
                }
            }
        }

主播

//拒绝游客连麦
fun rejectLine(uid: String) {
        RtmManager.instance.sendPeerMessage(uid, "{\"cmd\": \"rejectLine\"}"
        )
    }

//同意主播连麦
fun acceptLine(uid: String) {
        RtmManager.instance.sendPeerMessage(uid, "{\"cmd\": \"acceptLine\"}"
        )
    }
    
override fun onP2PMessageReceived(var1: RtmMessage?, var2: String?) {
            val params = JSONObject(var1.text)
            when (params.get("cmd")) {
                "apply" -> {
                   //收到游客申请连麦
                }
                "cancelApply" -> {
                   //游客取消申请连麦
                }
            }
          
        }

以上,就完成了在线直播网站源码最简单的信令交互,实际业务场景中,会有更多更复杂的,只需商定好,通过 RTM 发送交互就行。

音视频推流
在这里插入图片描述
在在线直播网站源码中游客只观看主播的时候,是不需要发布音视频的,所以在加入房间后,将自己的身份设置为游客(CLIENT_ROLE_AUDIENCE)即可。
申请连麦并且主播同意后,再将身份设置为(CLIENT_ROLE_BROADCASTER)就会自动发布音视频。这样就能与直播互动了。

anyRTC 音视频 SDK 有2种直播模式,分别如下:

1.RTC

RTC(Real Time Communication)实时音视频通信,最大的特点就是延迟极低,基本都是基于 WebRTC 标准,使用私有协议进行推流的。

主播

进入在线直播网站源码视频页面,打开自己的视频并加入房间。

//初始化 SDK 引擎
RtcManager.instance.initRtc(ctx)
//打开视频模块
RtcManager.instance.enableVideo()
//打开本地摄像头设置视图显示
RtcManager.instance.setupLocalVideo(VideoCanvas(textureView))
//加入房间
RtcManager.instance.joinChannel(rtcToken, roomId, userId, isHost)

加入在线直播网站源码房间成功之后,如果有人申请连麦并上麦后,会收到 onUserJoin 回调,只需要在合适的回调中显示移除上麦人的视图即可。

//在这显示上麦的人的视频
override fun onUserJoined(uid: String?, elapsed: Int) {
          // add remote user
}

//移除他人视频
override fun onUserOffline(uid: String?, reason: Int) {
     //remove remote user
 }

游客

主播同意上麦申请后,应将自己的身份设置为 CLIENT_ROLE_BROADCASTER,并将自己的视频模块打开并添加到视图中。

//转换身份
RtcManager.instance.setClientRole(Constants.CLIENT_ROLE_BROADCASTER)

//添加自己的视频
val clientTexture = RtcEngine.CreateRendererView(this)
                addVideoView(
                    binding.rlHostView,
                    clientTexture,
                    yourself = true,
                    setupLocalVideo = true
                )
                binding.apply.text = "下麦"

使用 RTC 模式实现非常的简单,只需要关注几个重要的回调即可。

2.RTMP+CDN

RTMP (Real Time Messaging Protocol)是基于 TCP 的流媒体传输协议,最大的特点是与 CDN 的强绑定,需要借助 CDN 的负载均衡系统将内容推送到接近用户的边缘节点,使用户就近取得在线直播网站源码中所需内容,提高用户访问的响应速度和成功率,解决因分布、带宽、服务器性能带来的访问延迟问题。更多适用于站点加速、点播、短视频等场景。

使用该模式比 RTC 模式代码要写的多一点,因为主播端要设置上麦人的视频合流参数,观众需要添加一个 anyRTC 内置的播放器用来拉 rtmp 流。

rtmp会比RTC 延时要高一些,但是在线直播网站源码连麦不会,因为连麦后还是走的 RTC 模式,因此,连麦的人和主播之间的延时会很小。其他观众拉流的话,并不会察觉到主播和上麦者之间有什么延迟。

主播推流到 CDN

//加入频道成功
override fun joinChannelSuccess() {
  //设置合流参数
  publishPushLiveTranscoding()
  //添加推流地址
  RtcManager.instance.addPublishStreamUrl(cdnUrl, true)
}

private fun publishPushLiveTranscoding(
        transcodingArr: List<LiveTranscoding.TranscodingUser>,
        canvasInfo: CDNStreamLayoutInfo
    ) {
        rtcEngine?.setLiveTranscoding(LiveTranscoding().apply {
            width = canvasInfo.width
            height = canvasInfo.height
        }.apply { transcodingArr.forEach { addUser(it) } })
    }
 
//游客上麦
override fun onUserJoin(uid: String) {
  //更新合流布局
  updatePushLiveTranscoding()
}  

//游客下麦
override fun onUserOffline(uid: String) {
  //更新合流布局
  updatePushLiveTranscoding()
}

这里需要注意的是在线直播网站源码合流布局参数的设置。

游客拉流播放

//创建播放器并播放主播的流
 RtcManager.instance.initMediaPlayer().apply {
            open(cdnUrl, 0)
            setView(textureView)
            play()
        }

游客上下麦还是和上麦的流程一致,变的只是在线直播网站源码界面上的效果。

效果图展示
效果图

以上便是“如何在在线直播网站源码中,实现视频连麦直播?”的全部内容了,希望对大家有帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值