Video Playback Buffering When Accessing Remotely With Cloudflare Tunnel

[wollumeg]

The bug

I set up a cloudflare tunnel to access my immich server remotely. When I and other users try to play the videos we see lots of buffering on short and long videos. This is using the mobile app on android or edge/chrome/safari browser. I have transcoded the videos but I am not sure what is causing the poor performance. I have immich installed on the server using truenas scale. I have included the two errors i see in logs when this happens.

The OS that Immich Server is running on

Truenas Scale ElectricEel -24.10.1

Version of Immich Server

v1.123.0

Version of Immich Mobile App

v1.124.0

Platform with the issue

• Server
• Web
• Mobile

Your docker-compose.yml content

n/a

Your .env content

n/a

Reproduction steps

1. Play video on immich android app or immich while on mobile/desktop browser when connected remotely via cloudflare tunnel.

...

Relevant log output

ERROR #1

Message: 
FlutterError - Catch all

Details:
Instance of 'FlutterErrorDetails'
Exception: Exception: Invalid image data
Library: image resource service
Context: Instance of 'ErrorDescription'

Stack trace:
#0      _futurize (dart:ui/painting.dart:7021)
#1      ImageDescriptor.encoded (dart:ui/painting.dart:6827)
#2      instantiateImageCodecWithSize (dart:ui/painting.dart:2306)
#3      PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:146)
#4      ImageLoader.loadImageFromCache (package:immich_mobile/providers/image/cache/image_loader.dart:40)
<asynchronous suspension>
#5      ImmichRemoteImageProvider._codec (package:immich_mobile/providers/image/immich_remote_image_provider.dart:105)
<asynchronous suspension>
#6      new MultiImageStreamCompleter.<anonymous closure> (package:cached_network_image/src/image_provider/multi_image_stream_completer.dart:26)
<asynchronous suspension>

ERROR #2

Message:
Error precaching next image: Exception: Invalid image data, #0 _futurize (dart:ui/painting.dart:7021)
#1 ImageDescriptor.encoded (dart:ui/painting.dart:6827)
#2 instantiateImageCodecWithSize (dart:ui/painting.dart:2306)
#3 PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:146)
#4 ImageLoader.loadImageFromCache (package:immich_mobile/providers/image/cache/image_loader.dart:40)
<asynchronous suspension>
#5 ImmichRemoteImageProvider._codec (package:immich_mobile/providers/image/immich_remote_image_provider.dart:105)
<asynchronous suspension>
#6 new MultiImageStreamCompleter.<anonymous closure> (package:cached_network_image/src/image_provider/multi_image_stream_completer.dart:26)
<asynchronous suspension>

Additional information

No response

[schuhbacca]

Does it work fine connecting directly to ip:2283?

[wollumeg]

Yes, when i am connected on my home network I am not seeing this issue on video playback. I see this also when remotely connected via tailscale too.

[bo0tzz]

How is your home internet connection?

[wollumeg]

400 Mbps down and 11 Mbps up. Would transcoding prevent and upload bottlenecks?

[bo0tzz]

Just grabbing a random transcoded (with default settings) video off my own instance shows a bitrate of 19Mbps, so that will absolutely bottleneck on an 11Mbps uplink. You can try tuning the transcoding settings, though I'm not familiar enough with video to suggest any specific tweaks.

[wollumeg]

Thanks for the support. I think we can chalk this up to my upload speed for now.