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

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!

About this issue

Original URL
State: open
Created a year ago
Reactions: 1
Comments: 17 (8 by maintainers)

Most upvoted comments

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

kotekpsotek on Dec 4, 2023

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!

RachelfTech on Feb 7, 2024

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 on Dec 3, 2023

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

noxowl on Dec 3, 2023

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.

wvq on Jul 11, 2023

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

amrbashir on Jul 5, 2023