Skip to content

Video rendering broken for OpenGLES Impeller Backend #165976

Closed

Description

@holzgeist

Steps to reproduce

  1. Launch Livekit Example App on a phone which does not support Vulkan (or force OpenGLES in AndroidManifest)
  2. connect to a room with other participants
  3. observe bad video quality (depends on sent resolution of other participants, it's better visible in low resolutios)

Expected results

I expect the video rendering to look the same, independent on which renderer is used.

Actual results

When OpenGLES is used as Impeller Backend, the video looks like it has lower resolution. On actual video data the effects are much worse, check this issue for real world data (I'm not 100% sure it's the same underlying issue, but the symptoms look exactly the same)

On the "test image" samples below it looks like some kind of antialiasing is missing on OpenGLES

Code sample

https://github.com/livekit/client-sdk-flutter/tree/main/example

Screenshots or Video

Screenshots / Video demonstration

Skia

Image

Skia Detail

Image

Vulkan

Image

Vulkan Detail:

Image

OpenGLES
Image

OpenGLES Detail
Image

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.29.2, on Arch Linux 6.13.8-arch1-1, locale en_US.UTF-8) [179ms]
    • Flutter version 3.29.2 on channel stable at /home/tobias/src/3rdparty/flutter
    • Upstream repository https://github.com/flutter/flutter
    • Framework revision c236373904 (13 days ago), 2025-03-13 16:17:06 -0400
    • Engine revision 18b71d647a
    • Dart version 3.7.2
    • DevTools version 2.42.3

[✓] Android toolchain - develop for Android devices (Android SDK version 35) [2.7s]
    • Android SDK at /opt/android-sdk/
    • Platform android-36, build-tools 35
    • ANDROID_HOME = /opt/android-sdk/
    • Java binary at: /opt/android-studio/jbr/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)
    • All Android licenses accepted.

[✓] Chrome - develop for the web [95ms]
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop [204ms]
    • clang version 19.1.7
    • cmake version 3.31.6
    • ninja version 1.12.1
    • pkg-config version 2.4.3

[✓] Android Studio (version 2024.3) [94ms]
    • Android Studio at /opt/android-studio
    • Flutter plugin version 83.0.4
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.5+-12932927-b750.29)

[✓] Connected device (3 available) [227ms]
    • SM A145R (mobile) • R8YW707S3KF • android-arm64  • Android 14 (API 34)
    • Linux (desktop)   • linux       • linux-x64      • Arch Linux 6.13.8-arch1-1
    • Chrome (web)      • chrome      • web-javascript • Mozilla Firefox 136.0.2

[✓] Network resources [795ms]
    • All expected network resources are available.

• No issues found!

Activity

  1. darshankawar commented on Mar 27, 2025

    @darshankawar
    Member

    @holzgeist
    Can you provide device details (make and model) on which reported behavior occurs ?
    Is it possible to provide only minimal reproducible code sample without any third party package implementation that still shows the behavior ?

    /cc @jonahwilliams

  2. added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Mar 27, 2025
  3. holzgeist commented on Mar 27, 2025

    @holzgeist
    ContributorAuthor

    Hi @darshankawar

    This happens on Android 14, running on a Samsung Galaxy A14.

    I'll try to reproduce it using the flutter video_player plugin

  4. removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Mar 27, 2025
  5. holzgeist commented on Mar 27, 2025

    @holzgeist
    ContributorAuthor

    Here it is: https://github.com/holzgeist/flutter-video-minimal-repro

    It's basicallly this code

    import 'package:flutter/material.dart';
    import 'package:video_player/video_player.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key, required this.title});
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      late VideoPlayerController _controller;
    
      @override
      void initState() {
        super.initState();
        _controller = VideoPlayerController.asset("assets/Butterfly-209-low.mp4")
          ..initialize().then((_) {
            // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
            setState(() {});
          });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child:
                _controller.value.isInitialized
                    ? AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    )
                    : Container(),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                _controller.value.isPlaying
                    ? _controller.pause()
                    : _controller.play();
              });
            },
            child: Icon(
              _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
            ),
          ),
        );
      }
    }

    With this video.

    Vulkan/OpenGLES are selected with the AndroidManifest metadata tag, Skia is selected by using --no-enable-impeller on the run command

    Details
    vulkan
    Image

    opengles

    Image

    skia

    Image

    full screenshots

    vulkan
    Image

    opengles

    Image

  6. added
    platform-androidAndroid applications specifically
    engineflutter/engine related. See also e: labels.
    packageflutter/packages repository. See also p: labels.
    e: impellerImpeller rendering backend issues and features requests
    and removed
    in triagePresently being triaged by the triage team
    on Mar 28, 2025
  7. added
    r: fixedIssue is closed as already fixed in a newer version
    on Mar 31, 2025
  8. github-actions commented on Apr 14, 2025

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  9. locked as resolved and limited conversation to collaborators on Apr 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    e: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.p: video_playerThe Video Player pluginpackageflutter/packages repository. See also p: labels.platform-androidAndroid applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions