[bug] `convertFileSrc` can't serve large videos to frontend (macOS)

[dukeeagle]

Describe the bug

Hi everyone!

I'm trying to play a video in the front end like so

import { convertFileSrc } from "@tauri-apps/api/tauri";
const VIDEO_PATH = "/Users/lucasigel/Downloads/NOVA.S06E18.Termites.and.Telescopes.1979.VHSRip.AAC2.0.x264-rattera_scale_3x_prob-3(2).mp4";

  ...

<video
  width={1000}
  height={500}
  src={convertFileSrc(VIDEO_PATH) ?? ""}
  crossOrigin="anonymous"
>
</video>

This works great in most cases, but it either produces random colors or completely fails to load for large h264 videos (11 GB, 60 minutes) or for short yet extremely uncompressed h264 videos (500 MB, 60 seconds)

Is this because the Tauri webserver isn't designed to handle such high throughput? Am I better off creating my own custom uri server for media files like @spacedriveapp?

I'd prefer to use Tauri's code if there's a way to make it work Very curious here.

Reproduction

View my full recreation of this bug here

Download one of the problematic videos here

I also served these same videos with a simple Node web server without any issue. I worry that the Tauri's custom file server may be causing issues here

Expected behavior

I should be able to play any video that the Safari can play when served from a local web server

Platform and versions

[✔] Environment
    - OS: Mac OS 13.4.1 X64
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.70.0 (90c541806 2023-05-31)
    ✔ Cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 20.1.0
    - pnpm: 8.6.6
    - yarn: 1.22.19
    - npm: 9.6.4

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.3
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: 1.4.0
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:1420/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

Originally discussed with @FabianLars in Discord!

[amrbashir]

I tested on Windows and it worked just fine, did you encounter this issue on any platform other than macOS? also the linked vide is not very large in size but it worked fine on Windows.

[dukeeagle]

Thanks for testing it! I've only tested on macOS yeah. The linked video is notable because it's <1 minute but nearly 0.5 gb. All my videos with this sort of high bitrate have had this error on Tauri for some reason. Can anyone with macOS confirm if this issue is happening on their end?

[amrbashir]

also if anyone on Linux experiencing the same issue, let us know

[amrbashir]

The weird thing is that all platforms are using the same logic under the hood to serve the file to the webview so I am actually clueless on what might be happening here, I will let this issue for someone with macOS to triage

[wvq]

This video can play with my macOS 13.4, but not as smoothly as safari, the video progressbar is keep going, but video frames stucked after play few seconds.

[dukeeagle]

Thanks for confirming @wvq ! Very curious if Tauri's file server is patchable here or if the scope of fixing this is quite large

[noxowl]

Still not resolved? I'm facing the exact same issue.

[DaveyUS]

I'm facing this issue as well. I have an m2 mac mini with 8gb of ram. At first I thought it was an issue where I was running out of ram, but same as OP, smaller files with high bitrates lock up right out of the gate for me. If I compress the file with handbrake, it then plays fine.

Denjell recommended I try the Tauri v2 alpha because there are significant improvements to local file handling, but I'm having a heck of a time getting my project to work at all in v2 as there's no documentation. convertFileSrc results in "Failed to load resource: unsupported URL". I think I'm going to shelve video support in my app until v2 is stable.

[DaveyUS]

Okay Fabian helped me fix that error, it turns out the assetScope was moved in tauri.conf for v2.

Unfortunately this issue is still very much present in v2, my video locks up exactly as it did in v1.5. I hope someone can take a good look at this issue soon!

[kotekpsotek]

You can always load this video on backend as the bytes array, split to bytes chunks and then connect to one part in JS - kind of work around. Or you can also put this video on kind of CDN like file server

[RachelfTech]

I'm new to Tauri (& Rust) and also running into this issue on macOS. @dukeeagle did you ever find a good workaround to get this working in Tauri? Thank you!

[Tianj0o]

Hello, I also have this problem, I need to play the local video, and I need to get the path, I started using the input element and URL.createObjectURL to play the video, it was smooth, but I couldn't get the path to the video, So I used the Open api and convertFileSrc to achieve the same effect, but the playback was very tight, anyone know how to solve it ？ thank you！🙏

[shuma]

@amrbashir any updates on this?

[FabianLars]

There are no updates.

Can you compare the behavior with tauri dev --release (if you use npm it needs another -- npm run tauri dev -- --release)? If it is just as laggy then it's likely not our implementations fault but something with wkwebview's custom scheme implementation 🤔

Also, does someone have more example videos? The one from OP works fine for me.

[shuma]

Tried running tauri dev --release and I am running macOS - it plays a couple of seconds then nothing happens. My video file is 50,4 mb.

[shuma]

@FabianLars what env did you test it on?

[FabianLars]

MacBook m2 pro 14.4.1 with OP's repro