Video Playback Failure on Older Devices

[RaulGw4]

The bug

I installed the Immich app on an older Android phone (Samsung A40), and after viewing a few videos, it refuses to load. I tried to replicate the issue on other phones, but I couldn't; it only happens on this particular device. I assume it might be related to the phone's RAM or other hardware limitations.

The OS that Immich Server is running on

Truenas Scale

Version of Immich Server

v1.111.0

Version of Immich Mobile App

v1.111.0 build.152

Platform with the issue

• Server
• Web
• Mobile

Your docker-compose.yml content

N/A

Your .env content

N/A

Reproduction steps

This issue can only be replicated on very slow phones with a low amount of RAM (4GB or less).

Steps to Reproduce:
1. Open an album containing videos stored in the server that are in 4K quality or higher.
2. Scroll through the videos, rotate the phone between vertical and horizontal orientations, and continue scrolling through the pictures for a bit.
3. After some time, you'll notice that the videos stop loading, as seen in the picture below.

Note: The videos were filmed with a Nothing Phone 2 at 4K 30fps using the original camera app. They were uploaded and are being viewed at the original quality.

Relevant log output

2024-08-10 21:54:48.089362 | SEVERE   | ImmichErrorLogger    | FlutterError - Catch all | Instance of 'FlutterErrorDetails'
Exception: PlatformException(VideoError, Video player had error y2.r: MediaCodecVideoRenderer error, index=0, format=Format(1, null, null, video/avc, avc1.640033, -1, null, [3840, 2160, 28.851288], [-1, -1]), format_supported=YES, null, null)
Library: widgets library
Context: Instance of 'ErrorDescription' |
#1      AsyncError.value (package:riverpod/src/common.dart:494:0)
#2      VideoViewerPage.build (package:immich_mobile/pages/common/video_viewer.page.dart:36:0)
#3      _ConsumerState.build (package:flutter_riverpod/src/consumer.dart:476:0)
#4      StatefulElement.build (package:flutter/src/widgets/framework.dart:5599:0)
#5      ConsumerStatefulElement.build (package:flutter_riverpod/src/consumer.dart:539:0)
#6      HookElement.build (package:flutter_hooks/src/framework.dart:438:0)
#7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5487:0)
#8      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5650:0)
#9      Element.rebuild (package:flutter/src/widgets/framework.dart:5203:0)
#10     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2905:0)
#11     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1136:0)
#12     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:443:0)
#13     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1392:0)
#14     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1313:0)
#15     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1171:0)
#16     _invoke (dart:ui/hooks.dart:312:0)
#17     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:0)
#18     _drawFrame (dart:ui/hooks.dart:283:0)

2024-08-10 21:54:27.044753 | SEVERE   | ImmichErrorLogger    | FlutterError - Catch all | Instance of 'FlutterErrorDetails'
Exception: PlatformException(VideoError, Video player had error y2.r: MediaCodecVideoRenderer error, index=0, format=Format(1, null, null, video/avc, avc1.640033, -1, null, [3840, 2160, 28.851288], [-1, -1]), format_supported=YES, null, null)
Library: widgets library
Context: Instance of 'ErrorDescription' |
#1      AsyncError.value (package:riverpod/src/common.dart:494:0)
#2      VideoViewerPage.build (package:immich_mobile/pages/common/video_viewer.page.dart:36:0)
#3      _ConsumerState.build (package:flutter_riverpod/src/consumer.dart:476:0)
#4      StatefulElement.build (package:flutter/src/widgets/framework.dart:5599:0)
#5      ConsumerStatefulElement.build (package:flutter_riverpod/src/consumer.dart:539:0)
#6      HookElement.build (package:flutter_hooks/src/framework.dart:438:0)
#7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5487:0)
#8      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5650:0)
#9      Element.rebuild (package:flutter/src/widgets/framework.dart:5203:0)
#10     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2905:0)
#11     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1136:0)
#12     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:443:0)
#13     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1392:0)
#14     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1313:0)
#15     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1171:0)
#16     _invoke (dart:ui/hooks.dart:312:0)
#17     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:0)
#18     _drawFrame (dart:ui/hooks.dart:283:0)

Additional information

[DeltaTango69]

For me videos with Resolution higher or equal 4K are also not played. It comes a greyished picture. Ok- I have no transformation added - this is ok. but the problem is, that after this no video will bot more played, also smaller videos which worked before!

[phajduk]

I face the same behavior. Happy to help debug this @alextran1502 . I think this is related to https://www.reddit.com/r/immich/comments/1e31v52/screen_going_gray_when_playing_some_videos_in_app/

[bbklopfer]

I am getting a similar/same issue on Android. I only noticed it recently.

I am using 1.115.0.

New videos, shot on iPhone but viewed on Android, result in a Flutter error and greyed-out screen. Old videos --- which worked before --- continue to work, even though there is no change in transcoding settings. I downloaded the transcoded videos on desktop and verified both are transcoded appropriately (h264 mp4, 720p, aac) --- but the new one just doesn't play through the Immich app on Android.

Videos play fine on Android via browser, and are fine on iOS and desktop browser too.

[bbklopfer]

Tried logging out, clearing cache, and logging in again on Android; same behavior.

[yzjJosh]

I'm seeing the same issue using v1.116.2 server. The problematic videos are shot from iPhone and can't be view on Android app.

[aaron-iles]

I'm experiencing the same issue. Videos uploaded without modification from an iPhone 13 will not play through the Immich app on a Google Pixel 7 Pro. The same grey screen is shown with the media controls. Occurs on v1.117.0.

[alextran1502]

The issue is the Android player doesn't support Dolby HDR recording from iOS

[aaron-iles]

@alextran1502 Ok that makes sense. Is there something I can change within Immich to allow playback on Android?

[alextran1502]

We will need to experiment with some transcoding options to make it compatible with Android player

[bbklopfer]

I am able to get videos to play by switching from h264 to HEVC.

(This leads to the expected issue that it doesn't work on desktop due to poor HEVC browser support.)

[mybropro]

Same issue here - iOS video uploads get greyed out on android app. Playback works fine on desktop chrome.
This really scared me that there was some sort of corruption with the database or media uploads. Viewing in desktop chrome made me feel better, but definitely a sad bug

Videos uploaded on iPhone 13 mini. The most recent video from that phone that works is 9/13/2024 and the first broken video is 9/17/2024. I think this phone upgraded to ios18 probably on 9/16, so thats the smells like the smoking gun.
Videos played on Pixel 6a with Android 14
First noticed in immich 1.15.0, but not sure how long it was happening for.

[bbklopfer]

At the risk of sounding crazy, would "multiple transcode targets" be a viable option? For me, h264 works fine on desktop (and mobile via browser), while h265 works fine on mobile app, so everything would be solved if videos could be transcoded twice.

Long-term, this seems like a cool feature, as for example low/medium/high quality could be selected, and a higher efficiency codec could be used for mobile.

[Deldion]

I face the same issue with 1080p videos.
I however updated to Android 15.
Not sure if that is the issue, as I am new on this, coming from Photoprism.

Web browser works fine though!

[clayauld]

I can say that I am dealing with the same issue. I've changed and played with the transcoding settings, which should make the video work, but I'm still getting the consistent error on all videos from iOS.

The web app works to play them and if I download the video directly to my phone I can play it on the device. But they won't play in the Immich app.

[bbklopfer]

@Deldion Yeah, this ticket was a dupe of a bunch of other tickets, and I think the title is a little misleading --- it's not AFAIK related to the age of the Android, it's related to HDR iPhone videos being transcoded into an unsupported format for the Android player used in the Immich app (but like you said, the device/web browser support the videos just fine).

I'm guessing changing the app's video player library is a real pain, so I think the solution that's been mentioned is to play with the transcoder settings until something works. (Unless the app's video player library gets updated, which would be great.)

[Deldion]

I am also seeing that I cannot download from the android app.
I can however download from the web app.

Can my issue be relevant to this?

[alextran1502]

This issue should be fixed in the next release. When v1.119.0 is out, please re-transcode the videos that have problem, it should be fixed then

[bbklopfer]

Works for me on v1.119.0.

I am using RKMPP hwaccel, h264, and freshly transcoded videos will play on both browser and Android 🥳

[aaron-iles]

@bbklopfer Great news! I'm re-encoding everything now and expect the same results.

[x-real-ip]

I re-encoded my entire video library and still have the same issue , grey video playback on my Android devices.
What I did:

1. Updated Immich to 1.119.0 (running on Kubernetes)
2. Deleted the entire encoded-video folder
3. Start TRANSCODE VIDEOS job with the default settings (target codec is H.264)
4. Cleared cache (storage) from the Android app
5. Opened a video from the timeline

Result:
Grey screen with the following error from app logs:

Instance of 'FlutterErrorDetails'
Exception: PlatformException(VideoError, Video player had error k1.l: Source error, null, null)
Library: widgets library
Context: Instance of 'ErrorDescription'

[alextran1502]

@x-real-ip Do you have a sample video that you can zipup and post here?

[alextran1502]

@x-real-ip I can upload and play video on the Pixel 8 as well as the iPhone 16. I wonder if you have different transcoding settings? Can you reset your transcoding settings to default?

[x-real-ip]

@x-real-ip I can upload and play video on the Pixel 8 as well as the iPhone 16. I wonder if you have different transcoding settings? Can you reset your transcoding settings to default?

@alextran1502 Thanks for checking this out! Weird that it doesn't work on my side I have Pixel 7 with LineageOS. I also tested this after a setting reset but without success, still seeing the grey screen and error in the app log

#1      AsyncError.value (package:riverpod/src/common.dart:494:0)
#2      VideoViewerPage.build (package:immich_mobile/pages/common/video_viewer.page.dart:36:0)
#3      _ConsumerState.build (package:flutter_riverpod/src/consumer.dart:476:0)
#4      StatefulElement.build (package:flutter/src/widgets/framework.dart:5729:0)
#5      ConsumerStatefulElement.build (package:flutter_riverpod/src/consumer.dart:539:0)
#6      HookElement.build (package:flutter_hooks/src/framework.dart:438:0)
#7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5617:0)
#8      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5780:0)
#9      Element.rebuild (package:flutter/src/widgets/framework.dart:5333:0)
#10     BuildScope._tryRebuild (package:flutter/src/widgets/framework.dart:2693:0)
#11     BuildScope._flushDirtyElements (package:flutter/src/widgets/framework.dart:2752:0)
#12     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:3048:0)
#13     _LayoutBuilderElement._rebuildWithConstraints (package:flutter/src/widgets/layout_builder.dart:231:0)
#14     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2719:0)
#15     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1098:0)
#16     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2719:0)
#17     RenderConstrainedLayoutBuilder.rebuildIfNecessary (package:flutter/src/widgets/layout_builder.dart:278:0)
#18     _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:369:0)
#19     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2446:0)
#20     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1052:0)
#21     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1065:0)
#22     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:602:0)
#23     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1164:0)
#24     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:468:0)
#25     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1397:0)
#26     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1318:0)
#27     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1176:0)
#28     _invoke (dart:ui/hooks.dart:312:0)
#29     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:0)
#30     _drawFrame (dart:ui/hooks.dart:283:0)

[dw5]

also I get this on Galaxy S24+