Web端TRTC混流,一个流屏幕录制,一个流摄像头采集,混流后观众看到两个画面出现错位的解决方案

2022-11-27 23:48:04 浏览数 (1)

本文主要讲解一下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,按照右侧小画面的数量设置大画面的上行分辨率。

0 人点赞