Web端TRTC混流，一个流屏幕录制，一个流摄像头采集，混流后观众看到两个画面出现错位的解决方案
原创Web端TRTC混流，一个流屏幕录制，一个流摄像头采集，混流后观众看到两个画面出现错位的解决方案
原创
本文主要讲解一下Web腾讯TRTC的混流布局出现大小屏幕错位的问题。
首先，给出TRTC云端混流的官网以及介绍（/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，按照右侧小画面的数量设置大画面的上行分辨率。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。