本文主要讲解一下Web腾讯TRTC的混流布局出现大小屏幕错位的问题。
首先,给出TRTC云端混流的官网以及介绍(https://cloud.tencent.com/document/product/647/16827 )。
我在开发中使用的是服务端REST API 混流方案,混流画面排版模式使用的是屏幕分享模式。
混流画面排版模式共有4中,出了下图3种之外,还有一种画中画模式,画中画模式和悬浮模板相似,差别是小画面可以指定在大画面的任何位置之上。
场景:使用两个流,一个屏幕录制分享,一个摄像头采集。然后混流,观众端出现大小屏幕高度不一致。如下图:
单个流和混流的分辨率大小:
摄像头单流:640*480 宽高比:4:3 = 1.3333 屏幕单流:1920*1080 宽高比:16:9 = 1.7777 混流:1920*1080 宽高比:16:9 = 1.7777
根据场景的描述和单个推流的分辨率比例,因为要保证每一个画面不变形并且完整显示。当前的屏幕分享流的分辨率和混流的一样,然后再加上摄像头的单流画面,为保证所有的都显示完整,所以画面就会进行缩放,两个流的分辨率比例不一致,因此缩放了就出现了位置偏差。
那这个怎么解决呢???
这里提供两种方案:
方案一:当前分辨率不变,使用画中画布局的混流方案
设置LayoutParams.Template=3,并且可以指定小画面的位置。唯一不足就是小画面必须覆盖在大画面之上。
方案二:使用原来的屏幕分享布局,固定混流输出分辨率是1600x720,按照右侧小画面的数量设置大画面的上行分辨率,这样可以保证大画面不做缩放。
假设整个混流输出分辨率, 宽为W,高为H, 比例为 W: H 不同人数下, 屏幕分享布局的4个状态小窗口的宽高如下: 1-5人: 宽为W/5,高为H/4, 比例为: W: H*5/4 6-7人: 宽为W/7,高为H/6, 比例为: W: H*7/6 8-9人: 宽为W/9,高为H/8, 比例为: W: H*9/8 10-16人:宽为W/10,高为H/8, 比例为: W: H*5/4
例如:固定混流输出分辨率是1600x720,按照右侧小画面的数量设置大画面的上行分辨率。