Is webview rendered in CPU? Can we get full 30fps on most recent phone?

[Mike-the-one]

Hi, I am using a full screen webview, in most cases there is only a banner at the top I do find out that the stream is not smooth, I can feel the frame jumps/jerky, but I only have a S20+ which is 5 years old, so not sure if I will get a smooth streaming if I use a better phone?

However, I found out that if I have more content in the webview, especially black content, (for example a div covers maybe 1/8 of the screen) I can see the preview is really sluggish, same as the recording/streaming, and fps dropped to maybe 10.

So I am wondering if the burn in webview to camera feed is done in CPU not GPU? I assume you have tried every possible way to optimize it, so do you have any other suggestions on the application side to improve the performance?

Also, if I upgrade to a most recent phone, is it possible to get full 30FPS with full size webview?

has anyone get a smooth streaming / full 30 fps with full size webview on a most recent phone?

Thanks!

[pedroSG94]

Hello,

Can I assume that you are using an AndroidViewFilterRender?
By default the library use GPU to render that filter if possible but you can change it to CPU using setHardwareMode(false) method.

Do you have a way to reproduce it? maybe a public web that reproduce the error.
If you can consistently reproduce the case check if the library use this lines:
https://github.com/pedroSG94/RootEncoder/blob/master/encoder/src/main/java/com/pedro/encoder/input/gl/render/filters/AndroidViewFilterRender.java#L288

This happens in few devices and maybe that is producing a limitation in the render since it is done in the main thread but I don't know other way to fix it in part because I was no able to consistently reproduce it in that moment.

To optimize it, maybe only view.draw is necessary to be done in the main thread.

[Mike-the-one]

@pedroSG94 Yes I am using AndroidViewFilterRender

I found the main issue is on my part, I added this

myWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null)

and performance improved a lot.

Also I added a Log.d statement in startRender() method, I found out that it tries to render the view as much as possible sometimes more than 30 times a second, so I added a sleep to make sure it does not render more than 30 times a second, I think it improved a small margin of the performance.

I also modified the code to render the webview only if it is dirty, so that if content is not changed then it just skips, this also improves bit of performance.

In my code I have 3 androidViewFilterRender, one webview, two playerview, if one player view is playing videos, then I don't need to render webview, so I added a flag so before I launch playerview I set this flag to false on the webview render, so the webview won't get rendered at all, which also improves the performance.

These are the improvements I can think of, before all the changes, with just webview (if majority of the webview is transparent background), I usually get 25 to 30 fps on my S20FE, with the above I get steady 30-31fps.

The biggest contributor is myWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null)

Maybe you can implement the dirty check of webview, render no more than 30 times/second and the render flag in the render class? Not sure if you are ok to implement the playerview check, if you can, then I can call your new class or updated version so that I don't have to use my own copy.

I am attaching the two classes just in case you think it helps, or if you can spot any issues.

/*
 * Copyright (C) 2024 pedroSG94.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.replaycatch.replaycatch.service;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PointF;
import android.graphics.PorterDuff;
import android.graphics.SurfaceTexture;
import android.opengl.GLES11Ext;
import android.opengl.GLES20;
import android.opengl.Matrix;
import android.os.Build;
import android.os.Handler;
import android.os.Looper;
import android.util.Log;
import android.view.Surface;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;

import androidx.annotation.RequiresApi;

import com.pedro.encoder.R;
import com.pedro.encoder.input.gl.AndroidViewSprite;
import com.pedro.encoder.input.gl.render.filters.BaseFilterRender;
import com.pedro.encoder.utils.gl.GlUtil;
import com.pedro.encoder.utils.gl.TranslateTo;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;

/**
 * Created by pedro on 4/02/18.
 *
 * Renders any Android View onto an OpenGL texture that can be composited with
 * a camera feed. Supports two dirty-detection strategies:
 *
 * - Normal Views: ViewTreeObserver.OnDrawListener fires on the main thread
 * before each draw pass, setting the dirty flag.
 *
 * - ObservableWebView: invalidate() is overridden to set the dirty flag
 * directly from the compositor thread, which is more reliable for off-screen
 * WebView rendering where ViewTreeObserver does not fire.
 *
 * When dirty is false the render thread sleeps and draws nothing — effectively
 * 0 FPS when the view is static. When content changes, it draws up to
 * TARGET_FPS.
 */
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR2)
public class AndroidViewFilterRender extends BaseFilterRender {

    private static final String TAG = "MYRENDER";
    private static final int TARGET_FPS = 30;
    private static final long FRAME_INTERVAL_MS = 1000L / TARGET_FPS;

    // Vertex data: X, Y, Z, U, V
    private final float[] squareVertexDataFilter = {
            -1f, -1f, 0f, 0f, 0f, // bottom left
            1f, -1f, 0f, 1f, 0f, // bottom right
            -1f, 1f, 0f, 0f, 1f, // top left
            1f, 1f, 0f, 1f, 1f, // top right
    };

    private int program = -1;
    private int aPositionHandle = -1;
    private int aTextureHandle = -1;
    private int uMVPMatrixHandle = -1;
    private int uSTMatrixHandle = -1;
    private int uSamplerHandle = -1;
    private int uSamplerViewHandle = -1;

    private int[] viewId = new int[] { -1, -1 };
    private View view;

    // Two surfaces so the render thread never blocks the GL thread
    private SurfaceTexture surfaceTexture, surfaceTexture2;
    private Surface surface, surface2;

    private final Handler mainHandler;
    private volatile boolean running = false;
    private ExecutorService thread = null;
    private boolean hardwareMode = true;
    private final AndroidViewSprite sprite;

    private volatile Status renderingStatus = Status.DONE1;

    // Each startRender() increments this. Threads capture their own value and
    // self-terminate when the global value no longer matches.
    private volatile int renderGeneration = 0;

    // Tracked so stopRender() can cancel only our own callback, not unrelated ones
    private volatile Runnable pendingMainThreadDraw = null;

    // Track current preview dimensions to avoid redundant GL updates
    private int currentWidth = -1;
    private int currentHeight = -1;

    // When false, the render thread stays alive but skips all drawing
    private boolean render = true;

    // Dirty flag: true means the view has new content and needs a frame drawn.
    // Initialised to true so the very first frame always renders.
    private volatile boolean dirty = true;

    // Fired by ViewTreeObserver for non-WebView views
    private final ViewTreeObserver.OnDrawListener onDrawListener = () -> dirty = true;

    private enum Status {
        RENDER1, RENDER2, DONE1, DONE2
    }

    // -------------------------------------------------------------------------
    // Constructors
    // -------------------------------------------------------------------------

    public AndroidViewFilterRender() {
        this(true);
    }

    /**
     * @param render if false, drawing is suppressed until setRender(true) is
     *               called.
     *               The render thread is still started so switching back is
     *               instant.
     */
    public AndroidViewFilterRender(boolean render) {
        this.render = render;
        squareVertex = ByteBuffer.allocateDirect(squareVertexDataFilter.length * FLOAT_SIZE_BYTES)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer();
        squareVertex.put(squareVertexDataFilter).position(0);
        Matrix.setIdentityM(MVPMatrix, 0);
        Matrix.setIdentityM(STMatrix, 0);
        sprite = new AndroidViewSprite();
        mainHandler = new Handler(Looper.getMainLooper());
    }

    // -------------------------------------------------------------------------
    // GL lifecycle
    // -------------------------------------------------------------------------

    @Override
    protected void initGlFilter(Context context) {
        String vertexShader = GlUtil.getStringFromRaw(context, R.raw.simple_vertex);
        String fragmentShader = GlUtil.getStringFromRaw(context, R.raw.android_view_fragment);

        program = GlUtil.createProgram(vertexShader, fragmentShader);
        aPositionHandle = GLES20.glGetAttribLocation(program, "aPosition");
        aTextureHandle = GLES20.glGetAttribLocation(program, "aTextureCoord");
        uMVPMatrixHandle = GLES20.glGetUniformLocation(program, "uMVPMatrix");
        uSTMatrixHandle = GLES20.glGetUniformLocation(program, "uSTMatrix");
        uSamplerHandle = GLES20.glGetUniformLocation(program, "uSampler");
        uSamplerViewHandle = GLES20.glGetUniformLocation(program, "uSamplerView");

        GlUtil.createExternalTextures(viewId.length, viewId, 0);
        surfaceTexture = new SurfaceTexture(viewId[0]);
        surfaceTexture2 = new SurfaceTexture(viewId[1]);
        surface = new Surface(surfaceTexture);
        surface2 = new Surface(surfaceTexture2);
    }

    @Override
    protected void drawFilter() {
        final int w = getPreviewWidth();
        final int h = getPreviewHeight();

        // Only update buffer size if dimensions changed to avoid GL pipeline stutters
        if (w != currentWidth || h != currentHeight) {
            Log.d(TAG, "Updating surface buffer size: " + w + "x" + h);
            surfaceTexture.setDefaultBufferSize(w, h);
            surfaceTexture2.setDefaultBufferSize(w, h);
            currentWidth = w;
            currentHeight = h;
        }

        final Status status = renderingStatus;
        switch (status) {
            case DONE1:
                surfaceTexture.updateTexImage();
                renderingStatus = Status.RENDER2;
                break;
            case DONE2:
                surfaceTexture2.updateTexImage();
                renderingStatus = Status.RENDER1;
                break;
            case RENDER1:
                surfaceTexture2.updateTexImage();
                break;
            case RENDER2:
            default:
                surfaceTexture.updateTexImage();
                break;
        }

        GLES20.glUseProgram(program);

        squareVertex.position(SQUARE_VERTEX_DATA_POS_OFFSET);
        GLES20.glVertexAttribPointer(aPositionHandle, 3, GLES20.GL_FLOAT, false,
                SQUARE_VERTEX_DATA_STRIDE_BYTES, squareVertex);
        GLES20.glEnableVertexAttribArray(aPositionHandle);

        squareVertex.position(SQUARE_VERTEX_DATA_UV_OFFSET);
        GLES20.glVertexAttribPointer(aTextureHandle, 2, GLES20.GL_FLOAT, false,
                SQUARE_VERTEX_DATA_STRIDE_BYTES, squareVertex);
        GLES20.glEnableVertexAttribArray(aTextureHandle);

        GLES20.glUniformMatrix4fv(uMVPMatrixHandle, 1, false, MVPMatrix, 0);
        GLES20.glUniformMatrix4fv(uSTMatrixHandle, 1, false, STMatrix, 0);

        GLES20.glUniform1i(uSamplerHandle, 0);
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, previousTexId);

        GLES20.glUniform1i(uSamplerViewHandle, 1);
        GLES20.glActiveTexture(GLES20.GL_TEXTURE1);

        switch (status) {
            case DONE2:
            case RENDER1:
                GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, viewId[1]);
                break;
            case RENDER2:
            case DONE1:
            default:
                GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, viewId[0]);
                break;
        }
    }

    @Override
    protected void disableResources() {
        GlUtil.disableResources(aTextureHandle, aPositionHandle);
    }

    @Override
    public void release() {
        stopRender();
        GLES20.glDeleteProgram(program);
        viewId = new int[] { -1, -1 };
        if (surfaceTexture != null)
            surfaceTexture.release();
        if (surfaceTexture2 != null)
            surfaceTexture2.release();
    }

    // -------------------------------------------------------------------------
    // View management
    // -------------------------------------------------------------------------

    public View getView() {
        return view;
    }

    /**
     * Set the view to render onto the GL texture.
     *
     * Pass an {@link ObservableWebView} for accurate dirty-detection with WebView.
     * For all other View subclasses, ViewTreeObserver.OnDrawListener is used.
     *
     * Passing the same instance that is already set is a no-op.
     */
    public void setView(final View view) {
        if (this.view == view)
            return;

        unregisterDirtyListener(this.view);
        stopRender();

        this.view = view;

        if (view != null) {
            if (view.getMeasuredWidth() <= 0 || view.getMeasuredHeight() <= 0) {
                view.measure(View.MeasureSpec.makeMeasureSpec(getPreviewWidth(), View.MeasureSpec.EXACTLY),
                        View.MeasureSpec.makeMeasureSpec(getPreviewHeight(), View.MeasureSpec.EXACTLY));
                view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
            }
            sprite.setView(view);
            dirty = true; // always render at least one frame for the new view
            registerDirtyListener(view);
            startRender();
        }
    }

    /**
     * Force a redraw on the next render cycle regardless of dirty state.
     * Useful when WebView content changes via JavaScript without triggering
     * invalidate()
     * (rare, but possible with some JS frameworks).
     */
    public void markDirty() {
        dirty = true;
    }

    // -------------------------------------------------------------------------
    // Dirty listener
    // -------------------------------------------------------------------------

    private void registerDirtyListener(View view) {
        if (view == null)
            return;
        if (view instanceof ObservableWebView) {
            ((ObservableWebView) view).setOnInvalidateListener(() -> dirty = true);
        } else if (view instanceof ViewGroup) {
            ViewGroup group = (ViewGroup) view;
            for (int i = 0; i < group.getChildCount(); i++) {
                registerDirtyListener(group.getChildAt(i));
            }
        }
        // Always register OnDrawListener for the view itself
        try {
            view.getViewTreeObserver().addOnDrawListener(onDrawListener);
        } catch (Exception ignored) {
        }
    }

    private void unregisterDirtyListener(View view) {
        if (view == null)
            return;
        if (view instanceof ObservableWebView) {
            ((ObservableWebView) view).clearOnInvalidateListener();
        } else if (view instanceof ViewGroup) {
            ViewGroup group = (ViewGroup) view;
            for (int i = 0; i < group.getChildCount(); i++) {
                unregisterDirtyListener(group.getChildAt(i));
            }
        }
        try {
            view.getViewTreeObserver().removeOnDrawListener(onDrawListener);
        } catch (Exception ignored) {
        }
    }

    // -------------------------------------------------------------------------
    // Transform / property setters & getters
    // -------------------------------------------------------------------------

    /**
     * @param x Position in percent
     * @param y Position in percent
     */
    public void setPosition(float x, float y) {
        sprite.translate(x, y);
    }

    public void setPosition(TranslateTo positionTo) {
        sprite.translate(positionTo);
    }

    public void setScale(float scaleX, float scaleY) {
        sprite.scale(scaleX, scaleY);
    }

    public void setRotation(int rotation) {
        sprite.setRotation(rotation);
    }

    public PointF getPosition() {
        return sprite.getTranslation();
    }

    public PointF getScale() {
        return sprite.getScale();
    }

    public int getRotation() {
        return sprite.getRotation();
    }

    public boolean isHardwareMode() {
        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && hardwareMode;
    }

    /**
     * Use hardware canvas for drawing. True by default.
     * Set to false if your View does not support hardware acceleration.
     */
    public void setHardwareMode(boolean hardwareMode) {
        this.hardwareMode = hardwareMode;
    }

    public boolean isRender() {
        return render;
    }

    /**
     * Enable or disable rendering. When false the render thread stays alive
     * but skips all drawing until re-enabled.
     */
    public void setRender(boolean render) {
        this.render = render;
        if (render)
            dirty = true; // force a frame immediately on re-enable
    }

    // -------------------------------------------------------------------------
    // Render thread
    // -------------------------------------------------------------------------

    private void startRender() {
        running = true;
        final int generation = ++renderGeneration;
        thread = Executors.newSingleThreadExecutor();
        thread.execute(() -> {
            Log.d(TAG, "render thread started, gen=" + generation);
            while (running && renderGeneration == generation) {
                final long frameStart = System.currentTimeMillis();
                final Status status = renderingStatus;

                if (status == Status.RENDER1 || status == Status.RENDER2) {

                    // If rendering is disabled and we have no new content (already cleared),
                    // idle cheaply but keep the GL status flowing.
                    if (!render && !dirty) {
                        try {
                            Thread.sleep(FRAME_INTERVAL_MS);
                        } catch (InterruptedException e) {
                            break;
                        }
                        continue;
                    }

                    // Clear before locking so any invalidation during the draw
                    // isn't silently dropped
                    dirty = false;

                    // Lock the appropriate surface canvas
                    final Canvas canvas;
                    try {
                        if (isHardwareMode()) {
                            canvas = (status == Status.RENDER1)
                                    ? surface.lockHardwareCanvas()
                                    : surface2.lockHardwareCanvas();
                        } else {
                            canvas = (status == Status.RENDER1)
                                    ? surface.lockCanvas(null)
                                    : surface2.lockCanvas(null);
                        }
                    } catch (IllegalStateException e) {
                        // Surface not ready yet — back off briefly
                        try {
                            Thread.sleep(FRAME_INTERVAL_MS);
                        } catch (InterruptedException ie) {
                            break;
                        }
                        continue;
                    }

                    // Start with a clean slate
                    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

                    if (render) {
                        // Apply sprite transform
                        sprite.calculateDefaultScale(getPreviewWidth(), getPreviewHeight());
                        PointF canvasPosition = sprite.getCanvasPosition(getPreviewWidth(), getPreviewHeight());
                        PointF canvasScale = sprite.getCanvasScale(getPreviewWidth(), getPreviewHeight());
                        PointF rotationAxis = sprite.getRotationAxis();
                        int rotation = sprite.getRotation();

                        canvas.translate(canvasPosition.x, canvasPosition.y);
                        canvas.scale(canvasScale.x, canvasScale.y);
                        canvas.rotate(rotation, rotationAxis.x, rotationAxis.y);

                        // Draw on this thread; fall back to main thread if the view
                        // requires it
                        try {
                            Log.d(TAG, "draw view, gen=" + generation);
                            view.draw(canvas);
                            postCanvas(canvas, status);
                        } catch (Exception e) {
                            final CountDownLatch latch = new CountDownLatch(1);
                            pendingMainThreadDraw = () -> {
                                try {
                                    if (renderGeneration != generation) {
                                        Log.w(TAG, "Main thread fallback aborted due to generation change. Gen: "
                                                + generation + ", Global: " + renderGeneration);
                                        return;
                                    }
                                    Log.d(TAG, "draw view (main thread fallback), gen=" + generation);
                                    view.draw(canvas);
                                    postCanvas(canvas, status);
                                } catch (Exception ex) {
                                    Log.e(TAG, "Main thread fallback draw failed", ex);
                                    // CRITICAL: Must still unlock even if draw fails
                                    try {
                                        if (status == Status.RENDER1)
                                            surface.unlockCanvasAndPost(canvas);
                                        else
                                            surface2.unlockCanvasAndPost(canvas);
                                    } catch (Exception ignored) {
                                    }
                                } finally {
                                    latch.countDown();
                                }
                            };
                            mainHandler.post(pendingMainThreadDraw);
                            try {
                                if (!latch.await(FRAME_INTERVAL_MS * 2, TimeUnit.MILLISECONDS)) {
                                    Log.w(TAG,
                                            "Main thread fallback latch timed out. Possible deadlock or slow UI thread.");
                                }
                            } catch (InterruptedException ie) {
                                break;
                            }
                            pendingMainThreadDraw = null;
                        }
                    } else {
                        // Rendering disabled: post the clear canvas to keep GL textures valid
                        postCanvas(canvas, status);
                    }

                    // Sleep for the remaining frame budget
                    long sleepMs = (render ? FRAME_INTERVAL_MS : (FRAME_INTERVAL_MS * 2))
                            - (System.currentTimeMillis() - frameStart);
                    if (sleepMs > 0) {
                        try {
                            Thread.sleep(sleepMs);
                        } catch (InterruptedException e) {
                            break;
                        }
                    }

                } else {
                    // Not in a renderable state — sleep before rechecking
                    try {
                        Thread.sleep(FRAME_INTERVAL_MS);
                    } catch (InterruptedException e) {
                        break;
                    }
                }
            }
            Log.d(TAG, "render thread exiting, gen=" + generation);
        });

    }

    private void postCanvas(Canvas canvas, Status status) {
        if (status == Status.RENDER1) {
            surface.unlockCanvasAndPost(canvas);
            renderingStatus = Status.DONE1;
        } else {
            surface2.unlockCanvasAndPost(canvas);
            renderingStatus = Status.DONE2;
        }
    }

    private void stopRender() {
        running = false;

        // Unregister dirty listener before bumping generation
        unregisterDirtyListener(view);

        // Bump generation — any live threads and their queued callbacks will
        // see the mismatch and self-terminate / bail without drawing.
        // Doing this before removing callbacks prevents new ones from starting.
        renderGeneration++;

        // Cancel only our own pending main-thread callback
        if (pendingMainThreadDraw != null) {
            mainHandler.removeCallbacks(pendingMainThreadDraw);
            pendingMainThreadDraw = null;
        }

        if (thread != null) {
            thread.shutdownNow();
            try {
                thread.awaitTermination(500, TimeUnit.MILLISECONDS);
            } catch (InterruptedException e) {
                Thread.currentThread().interrupt();
            }
            thread = null;
        }

        renderingStatus = Status.DONE1;
    }
}

and the webview class

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebView;

/**
 * A WebView subclass that exposes a dirty-detection callback via invalidate().
 *
 * WebView renders through its own compositor thread and does not reliably
 * trigger
 * ViewTreeObserver.OnDrawListener when used off-screen (e.g. drawn to a
 * Surface).
 * Instead, the compositor calls invalidate() on the View whenever a new frame
 * is
 * ready. By overriding invalidate() here we get a precise, zero-overhead signal
 * that the WebView content has changed and needs to be redrawn onto the
 * Surface.
 *
 * Usage:
 * ObservableWebView webView = new ObservableWebView(context);
 * androidViewFilterRender.setView(webView);
 * // AndroidViewFilterRender detects ObservableWebView automatically and
 * // registers the dirty listener via setOnInvalidateListener().
 */
public class ObservableWebView extends WebView {

    /**
     * Called from the compositor thread whenever WebView has new pixels to show.
     * Must be volatile so writes from the compositor thread are visible to the
     * render thread immediately.
     */
    private volatile Runnable onInvalidateListener;

    public ObservableWebView(Context context) {
        super(context);
    }

    public ObservableWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ObservableWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * Set a listener that will be called every time WebView invalidates itself.
     * The listener runs on whatever thread called invalidate() — typically the
     * WebView compositor thread — so keep it fast and thread-safe.
     */
    public void setOnInvalidateListener(Runnable listener) {
        this.onInvalidateListener = listener;
    }

    /**
     * Remove the invalidate listener. Call this before releasing the view to
     * avoid callbacks after the render pipeline has been torn down.
     */
    public void clearOnInvalidateListener() {
        this.onInvalidateListener = null;
    }

    /**
     * Overrides the single non-deprecated invalidate() entry point.
     * On API 28+, all partial-invalidation overloads delegate here internally,
     * so one override is sufficient to catch every invalidation.
     */
    @Override
    public void invalidate() {
        super.invalidate();
        // Local copy guards against the listener being cleared on another thread
        // between our null-check and our call.
        Runnable listener = onInvalidateListener;
        if (listener != null)
            listener.run();
    }
}

Thanks!

[Mike-the-one]

Also, forgot to mention, the fps drops if the webview has lot of content, or has animations, not sure if there are any other ways to improve the performance. also not sure of upgrading to a most recent phone will solve this.

Samsung phone has 60fps locked, do you know any other phones allow 1080p 60fps recording? I tried Google Pixel 8 pro I think it also locks to 30fps.

[Mike-the-one]

Another thing I observed is the recording video vs uploaded on youtube, i use h264, if I watch the video on my computer directly (the mp4 file) it is smoother than the youtube one, do you know why? I know youtube auto converts to vp9, so could that be the issue? the bitrate I was for recording is 7mbits. @pedroSG94 sent you an email with the files/links, do you mind take a look? thank you so much!