Problem with MCU Custom layout Template

[aledg]

Hello guys,
we have finished the setup of our project, we use FlashPhoner on AWS EC2.

We use the MCU mixer and basically we have a user who remains fixed in the background (star_user) and several users who are guest and taken off individually via REST API calls:

• rest-api/mixer/add
• /rest-api/mixer/remove

The application we have to manage is designed for smartphones so all users who send video streams and all others who see the mixer stream in HLS use the application from devices with different formats and different resolutions iOS / Android.

If we don't use a custom Layout template everything works fine. The streams are played correctly and the experience works.

If we use a custom layout template, the change of users ON-AIR no longer works correctly.
With the custom Layout Template, viewers who see the HLS stream sometimes don't see the guest video, sometimes there is video but there is no audio, sometimes there is nothing and only the star is seen in background, sometimes it works and it shows correctly. This problem occurs if the guest stream starts both from any type of iOS or Android device.

This is the class that we are using.

package com.flashphoner.mixerlayout;

import com.flashphoner.sdk.media.IVideoMixerLayout;
import com.flashphoner.sdk.media.YUVFrame;
import com.flashphoner.sdk.media.IVideoMixerLayout.Layout;
import java.awt.Dimension;
import java.awt.Point;
import java.util.ArrayList;

public class TestLayout implements IVideoMixerLayout {
   private static final int PADDING = 4;

   public Layout[] computeLayout(YUVFrame[] var1, String[] var2, int var3, int var4) {
      ArrayList var5 = new ArrayList();
      int var6 = var4 / 2;
      int var10000 = var6 - var4 / var1.length / 2;
      int var8 = var3 / var1.length - 4;
      var10000 = var4 / var1.length;

      for(int var10 = 0; var10 < var1.length; ++var10) {
         Point var11 = new Point();
         Dimension var12 = new Dimension();
         if (var5.size() > 0) {
            var11.setLocation(((Layout)var5.get(var10 - 1)).getPoint());
            var12.setSize(((Layout)var5.get(var10 - 1)).getDimension());
         }

         Point var13;
         if (var2[var10].indexOf("_star") != -1) {
            var13 = new Point(0, 0);
            var5.add(new Layout(var13, new Dimension(480, 640), var1[var10]));
         } else {
            var13 = new Point(260, 360);
            var5.add(new Layout(var13, new Dimension(180, 240), var1[var10]));
         }
      }

      return (Layout[])var5.toArray(new Layout[var5.size()]);
   }
}

The TestLayout.jar class is installed correctly in this server location:
/usr/local/FlashphonerWebCallServer/lib/TestLayout.jar

and we activate it via rest-api like this:

{
"uri": "mixer: // mixer1",
"localStreamName": "live_stream"
"mixerLayoutClass": "com.flashphoner.mixerlayout.TestLayout"
}

instead this is the setup we use for the properties file:



...

#webrtc ports range
media_port_from =31001
media_port_to =32000
#codecs
codecs =opus,alaw,ulaw,g729,speex16,g722,mpeg4-generic,telephone-event,h264,vp8,flv,mpv
codecs_exclude_sip =mpeg4-generic,flv,mpv
codecs_exclude_streaming =flv,telephone-event
codecs_exclude_sip_rtmp =opus,g729,g722,mpeg4-generic,vp8,mpv
#websocket ports
ws.port =8080
wss.port =8443
client_mode=false
rtc_ice_add_local_component=true

#****CUSTOM******
mixer_video_width=480
mixer_video_height=640
mixer_video_layout_desktop_key_word=star
mixer_display_stream_name=false
mixer_voice_activity=false
mixer_video_profile_level=42c02a
mixer_lossless_video_processor_enabled=true
mixer_lossless_video_processor_max_mixer_buffer_size_ms=200



In attachement you can see the final Layout results that we want to reach.

how can we solve the problem? Thank

 

[Max]

Good day.
In the latest builds, picture-in-picture mixer layout is supported. To enable this, update WCS to latest build from this page and add the following mixer option to flashphoner.properties file

mixer_video_desktop_fullscreen=true

In this case, you don't need custom layout to get this result:

 

[aledg]

ok I've solved. I've removed the
mixer_video_width=480
mixer_video_height=640

thank

 

[Max]

ok I've solved. I've removed the
mixer_video_width=480
mixer_video_height=640

For most mobile devices (excluding iPad), aspect ratio 16:9 is preferrable, for example

mixer_video_width=360
mixer_video_height=640