title: How to animate a webrtc SurfaceViewRenderer frame size along with view size in Kotlin for android?
body: <p>I'm developing a webrtc for android application. Everything works as expected regarding the webrtc connection but now I'm animating the <code>SurfaceViewRenderer</code> so the remote video transitions from filling the entire screen to be a small rectangle in the upper right corner and vice versa (going from small to large). </p>
  
  <p>I'm using a <code>MotionLayout</code> for achieving this, along with a <code>MotionScene</code> with several states defining the <code>SurfaceViewRenderer</code> properties to change over time to get a nice and smooth resizing effect.</p>
  
  <p>The Views themselves resize properly over time, but the video playback stops during the animation so, when going from small to large, the last video frame remains small while the view increases its size. And at the end of the animation, when the video playback resumes, a new big video frame appears and fills the view. So instead of a smooth resizing effect from small to large I end up getting more like a <strong>skip</strong> effect, where the small video playback stops and then after a few milliseconds it resumes playback and gets larger.</p>
  
  <p><strong>What I've tried</strong></p>
  
  <ul>
  <li>To delve into the classes involved (<code>SurfaceViewRenderer</code>, <code>VideoRenderer</code>, <code>VideoTrack</code>) to find a way to get the current video frame and resize it, but found no way of doing so</li>
  </ul>
  
  <p><strong>Steps to reproduce</strong></p>
  
  <p>It'll be hard to reproduce the exact scenario since you'll need to set up a webrtc environment all along with signaling server, but I'll share the pieces of code I'm using. My main layout looks like this:</p>
  
  <pre><code>&lt;android.support.constraint.motion.MotionLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_alignParentEnd="true"
          android:layout_alignParentRight="true"
          android:orientation="vertical"
          app:layoutDescription="@xml/motion_master_view_scene"
          android:id="@+id/webRtcViewsLayout"&gt;
  
          &lt;org.webrtc.SurfaceViewRenderer
              android:id="@+id/slaveVideoView"
              android:layout_width="300dp"
              android:layout_height="169dp"
              android:layout_alignParentEnd="true"
              android:layout_alignParentRight="true"
              android:layout_marginEnd="84dp"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;org.webrtc.SurfaceViewRenderer
              android:id="@+id/masterVideoView"
              android:layout_width="match_parent"
              android:layout_height="match_parent" /&gt;
  
      &lt;/android.support.constraint.motion.MotionLayout&gt;
  </code></pre>
  
  <p>Then my motion_master_view_scene.xml <code>MotionScene</code> looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto"
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"&gt;
      &lt;Transition
          motion:duration="500"&gt;
      &lt;/Transition&gt;
  
      &lt;StateSet
          motion:defaultState="@id/localMasterState"&gt;
  
          &lt;State android:id="@+id/bothMinimizedState" motion:constraints="@id/bothMinimizedConstraintSet"&gt;&lt;/State&gt;
          &lt;State android:id="@+id/localMasterState" motion:constraints="@id/localMasterConstraintSet"&gt;&lt;/State&gt;
      &lt;/StateSet&gt;
  
      &lt;ConstraintSet android:id="@+id/bothMinimizedConstraintSet"&gt;
          &lt;Constraint
              android:id="@+id/masterVideoView"
              android:layout_width="300dp"
              android:layout_height="169dp"
              android:layout_alignParentEnd="true"
              android:layout_alignParentRight="true"
              android:layout_marginTop="196dp"
              android:layout_marginRight="10dp"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              /&gt;
  
          &lt;Constraint
              android:id="@+id/slaveVideoView"
              android:layout_width="300dp"
              android:layout_height="169dp"
              android:layout_alignParentEnd="true"
              android:layout_alignParentRight="true"
              android:layout_marginTop="10dp"
              android:layout_marginRight="10dp"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id="@+id/localMasterConstraintSet"&gt;
          &lt;Constraint
              android:id="@+id/masterVideoView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              /&gt;
          &lt;Constraint
              android:id="@+id/slaveVideoView"
              android:layout_width="300dp"
              android:layout_height="169dp"
              android:layout_alignParentEnd="true"
              android:layout_alignParentRight="true"
              android:layout_marginTop="10dp"
              android:layout_marginRight="10dp"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toTopOf="parent"
              /&gt;
      &lt;/ConstraintSet&gt;
  
  &lt;/MotionScene&gt;
  </code></pre>
  
  <p>And finally, I change between states in my MainActivity by doing this</p>
  
  <pre><code>webRtcViewsLayout.transitionToState(newState)
  </code></pre>
  
  <p>Any clues on how to solve this situation?</p>