直播系统开发,如何借助腾讯云混流实现互动

发布来源:云豹科技
发布人:云豹科技
2022-09-01 10:02:57

直播系统开发中,连麦互动都会作为重点的开发功能,今天要给大家介绍的就是如何借助腾讯云混流来实现连麦互动功能。正常的实现互动是从正常推流开始,到云端混流,再使两个画面融合为一个视频流,方便用户在不受影响的情况下,观看互动画面。

下面,就是直播系统开发中,请求腾讯云直播SDK混流时,所需传的混流参数。

主播与用户连麦混流,画面为一个主播的大画面上,叠加一个用户的小画面窗口:


private String createMixParams(String txAppId, String selfAnchorStream, String toStream) {
        JSONObject para = new JSONObject();
   //MixStreamSessionId  混流会话(申请混流开始到取消混流结束)标识 ID。
        para.put("MixStreamSessionId", selfAnchorStream);
        JSONArray array = new JSONArray();
        JSONObject mainAnchor = new JSONObject();//大主播
//InputStreamName 输入流名称。
        mainAnchor.put("InputStreamName", selfAnchorStream);
        JSONObject mainLayoutParams = new JSONObject();
//ImageLayer 图层标识 
        mainLayoutParams.put("ImageLayer", 1);
        mainLayoutParams.put("InputType", 0);
        mainLayoutParams.put("LocationX", 0);
        mainLayoutParams.put("LocationY", 0);
//LayoutParams 输入流布局参数
        mainAnchor.put("LayoutParams", mainLayoutParams);
        array.add(mainAnchor);
 
        if (!TextUtils.isEmpty(toStream)) {
            JSONObject smallAnchor = new JSONObject();//小主播
            smallAnchor.put("InputStreamName", toStream);
            JSONObject smallLayoutParams = new JSONObject();
//ImageLayer 图层标识 
            smallLayoutParams.put("ImageLayer", 2);
//视频所占宽度,按所占空间比例设置
            smallLayoutParams.put("ImageWidth", 0.25);
            smallLayoutParams.put("ImageHeight", 0.21);
            smallLayoutParams.put("LocationX", 0.75);
            smallLayoutParams.put("LocationY", 0.6);
            smallAnchor.put("LayoutParams", smallLayoutParams);
            array.add(smallAnchor);
        }
 
        JSONObject outPara = new JSONObject();
        outPara.put("OutputStreamName",selfAnchorStream);
 
        para.put("InputStreamList", array);
 
        para.put("OutputParams",outPara);
 
        return para.toString();
}


除以上这种实现方式外,很多直播系统开发中的连麦互动实现是主播和用户画面分别占据屏幕的左右各一半,这样可以更全面的展示直播内容,参数与以上方法稍有不同,参数格式展示为:


private String createMixParamsAnchor(String txAppId, String selfAnchorStream, String toStream) {
        JSONObject para = new JSONObject();
//MixStreamSessionId  混流会话(申请混流开始到取消混流结束)标识 ID。
        para.put("MixStreamSessionId", selfAnchorStream);
        JSONArray array = new JSONArray();
        if (!TextUtils.isEmpty(toStream)) {
            JSONObject bg = new JSONObject();//背景
            bg.put("InputStreamName", "canvas1");//背景的id,这个字符串随便写
            JSONObject bgLayoutParams = new JSONObject();
//ImageLayer 图层标识 
            bgLayoutParams.put("ImageLayer", 1);
            bgLayoutParams.put("InputType", 3);
//            bgLayoutParams.put("image_width", ScreenDimenUtil.getInstance().getScreenWdith());
//            bgLayoutParams.put("image_height", ScreenDimenUtil.getInstance().getScreenHeight());
//            bgLayoutParams.put("location_x", 0);
            bg.put("LayoutParams", bgLayoutParams);
            array.add(bg);
 
            JSONObject selfAnchor = new JSONObject();//自己主播
            selfAnchor.put("InputStreamName", selfAnchorStream);
            JSONObject selfLayoutParams = new JSONObject();
//ImageLayer 图层标识 
            selfLayoutParams.put("ImageLayer", 2);
//视频所占宽度,按所占空间比例设置
            selfLayoutParams.put("ImageWidth", 0.5);
//视频所占高度,按所占空间比例设置
            selfLayoutParams.put("ImageHeight", 0.5);
//视频相对于原点 x坐标的偏移量,按所占空间比例设置
            selfLayoutParams.put("LocationX", 0);
//视频相对于原点 y坐标的偏移量,按所占空间比例设置
            selfLayoutParams.put("LocationY", 0.25);
            selfAnchor.put("LayoutParams", selfLayoutParams);
            array.add(selfAnchor);
 
            JSONObject toAnchor = new JSONObject();//对方主播
            toAnchor.put("InputStreamName", toStream);
            JSONObject toLayoutParams = new JSONObject();
//ImageLayer 图层标识 
            toLayoutParams.put("ImageLayer", 3);
//视频所占宽度,按所占空间比例设置
            toLayoutParams.put("ImageWidth", 0.5);
//视频所占高度,按所占空间比例设置
            toLayoutParams.put("ImageHeight", 0.5);
//视频相对于原点 x坐标的偏移量,按所占空间比例设置
            toLayoutParams.put("LocationX", 0.5);
//视频相对于原点 y坐标的偏移量,按所占空间比例设置
            toLayoutParams.put("LocationY", 0.25);
            toAnchor.put("LayoutParams", toLayoutParams);
            array.add(toAnchor);
        } else {
            JSONObject mainAnchor = new JSONObject();//大主播
            mainAnchor.put("InputStreamName", selfAnchorStream);
            JSONObject mainLayoutParams = new JSONObject();
            mainLayoutParams.put("ImageLayer", 1);
            mainAnchor.put("LayoutParams", mainLayoutParams);
            array.add(mainAnchor);
        }
        para.put("InputStreamList", array);
        JSONObject outPara = new JSONObject();
        outPara.put("OutputStreamName",selfAnchorStream);
        para.put("OutputParams", outPara);
        return para.toString();
    }


仔细阅读以上代码后,会发现两个方法有不同的地方,却也有一定的规律可循。不同处为,主播与观众连麦时,观众的小画面窗口叠加在主播直播画面的上方,只占一小部分屏幕空间,所以直接往主播原有视频图层上叠加就可以,单主播与主播连麦,确实要两个主播画面平分视频画面,所以要先设置一个视频画面的背景层,确定大小后,将两个主播画面按1:1的比例设置到左右两端。根据运营商想要开发实现的效果和应用场景的不同,直播系统开发一般会提供这两种方式给运营商选择。

以上,就是在直播系统开发中如何使用腾讯云直播SDK云端混流的参数设置互动连麦用到的代码。

声明:以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任www.yunbaokj.com

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任