[bug] Loading a video/audio as an assets does not work.

[firstdorsal]

Describe the bug

Loading a video as an asset does not work.

I followed the guide here: https://tauri.studio/docs/api/js/modules/tauri

It works fine with image files (png/jpg etc.) but not with videos. I tried loading the video https://www.w3schools.com/html/mov_bbb.mp4 directly from the URL, and this worked without problems. But using the asset:///home/paul/Downloads/mov_bbb.mp4 URL this does not work Loading images from the same folder does work.

In the network panel you can see that the request failed but no further reason is specified

The loading of assets this way is IMO not very good explained and when it fails, for some reason, it is very difficult to find out why.

Thank you for creating Tauri, it is awesome!

Reproduction

No response

Expected behavior

No response

Platform and versions

Operating System - Arch Linux, version Rolling Release X64

Node.js environment
  Node.js - 17.7.1
  @tauri-apps/cli - 1.0.0-rc.6
  @tauri-apps/api - 1.0.0-rc.2

Global packages
  npm - 8.5.4
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.59.0
  cargo - 1.59.0
  toolchain - stable-x86_64-unknown-linux-gnu 

App directory structure
/dist
/node_modules
/src-tauri
/src
/.git
/public

App
  tauri - 1.0.0-rc.4
  tauri-build - 1.0.0-rc.4
  tao - 0.6.4
  wry - 0.13.3
  build-type - build
  CSP - default-src tauri: asset: https://asset.localhost
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

Stack trace

No response

Additional context

No response

[red010182]

This config works for me.

    "allowlist": {
      ...
      "protocol": {
        "asset": true,
        "assetScope": ["**"]
      }
    },
    "security": {
      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost; media-src 'self' asset: https://asset.localhost"
    }

---

Edit:

Don't do this. It's dangerous: https://github.com/tauri-apps/tauri/issues/3735#issuecomment-1072978250

[FabianLars]

As i said in the other issue, you shouldn't configure the scope like this (Especially since we are working on a fix). You're better of by doing it more like this:

1. Configure it correctly and as strict as possible.
2. Use dialogs and file-drop events to dynamically extend it.
3. Use rust to manually extend the scope at runtime as a last resort.

About scope errors: It should be logged to the terminal (in tauri dev) and we return a 403 response (with an empty body) on scope related errors

[firstdorsal]

This is not a scope issue. My scope already looks like this:

 "protocol": {
      "all": false,
      "asset": true,
      "assetScope": ["*"]
},

For my project this is necessary as the file explorer that i'm building requires the capability to, you know, display files :p. Images do work via asset://, text like files and pdfs are loaded through rust but videos won't load with the assets protocol.

[FabianLars]

Ah whoops, didn't see that you were 2 different people, sorry.

[red010182]

Did you try adding media-src in csp? Add media-src 'self' asset: https://asset.localhost works for me.

[firstdorsal]

@red010182 The default-src already does allow assets: default-src tauri: asset: https://asset.localhost I tried it anyway but it is not working. Also loading assets from the web wouldn't work if that was the problem.

[tedbyron]

@firstdorsal do you have a reproduction? I have a video conversion app I'm making and I'm able to display user-uploaded videos (from tauri dialog) in a <video> element with the following config:

{
  // ...
  "protocol": {
    "asset": true
  },
  // ...
  "security": {
    "csp": "default-src: 'self'; media-src 'self' asset:"
  }
}

[lucasfernog]

I can reproduce this issue, seems to be a webkit2gtk problem.

[dzervas]

Is there a workaround that we can use? Or we just wait for a proper fix?

[firstdorsal]

@tedbyron

from dialog

If you mean using the "Native" browser dialog to select a video then this is not related I think.

@lucasfernog great, good to know! Is this working on Win/Mac?

[lucasfernog]

I never had issues on Windows and macOS. And I don't know about a workaround :/

[lucasfernog]

@wusyong was investigating this issue, I think it's a problem with latest webkit2gtk.

[joehillen]

Is https://asset.localhost/<filepath> supposed to work also? I get "Connection refused" with that but nothing at all with asset://.

[joehillen]

Also, is there an upstream bug report? I can't find one.

[FabianLars]

Is https://asset.localhost/<filepath> supposed to work also? I get "Connection refused" with that but nothing at all with asset://.

asset:// is Linux and macOS and https://asset.localhost/ is Windows.

[keiya01]

I tried to open this page on wry like the following.

let webview = WebViewBuilder::new(window)?.with_url("https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/video/_sample_.single_source.html")?;

But this shows the empty video screen .

https://user-images.githubusercontent.com/34934510/181906813-6ad3646c-f89a-42d0-9477-e35686b19435.mov

edit: oops, this is my mistakes. webkitgtk seems to need to install gstreamer...

[keiya01]

Maybe issue is here for webkitgtk https://bugs.webkit.org/show_bug.cgi?id=146351

[lucasfernog]

It's weird 'cause I was sure it worked on previous webkit2gtk releases :(

[Robinerra]

Loading audio with the asset protocol is also broken

[wusyong]

It seems fixed in 2.36.4. https://webkitgtk.org/2022/07/28/webkitgtk2.36.5-released.html I plan to add headers support again when I have some time. Will test this too.

[loicortola]

Hi all, I don't know if it helps, I have just tested a basic video sample using the asset protocol. With a regular up-to-date ubuntu release, using webkitgtk2.36.6. Videos are still not playing on my station. Hopefully the next webkitgtk releases will have it fixed :)

[trippjoe]

Commenting the function name so others can find this issue when they search for convertFileSrc.

[mrdududu]

I have same problem but with images on MacOS This code fix this issue "protocol": { "asset": true }, "security": { "csp": "default-src: 'self'; media-src 'self' asset:" },

[Soremwar]

Same issue, only for videos on Linux

[iohzrd]

I'm experiencing this on Arch Linux (gnome) as well. Video was working in my app a couple days ago, now it's blank and my code hasn't changed. So I believe it's an issue in webkitgtk. My system currently has webkit2gtk v2.38.2-2.

[iohzrd]

Update: I had recently reinstalled my OS and was missing some packages. In my case, this issue was fixed by installing gstreamer and gst-plugins(gst-libav gst-plugins-bad gst-plugins-base gst-plugins-good gst-plugins-ugly). Which is not mentioned in the getting started / docs. Might be nice to add mention of this somewhere.

[wusyong]

Looks like the issue still remains and I tried my best to write a C example to report back: https://bugs.webkit.org/show_bug.cgi?id=146351#c5

[stevenhansel]

@iohzrd Hey, can you elaborate more on how you fixed it? I upgraded my webkit2gtk to v2.38.2-2 and also installed gstreamer1.0 alongside all of the recommended plugins. It still doesn't want to load the video resource. I'm also getting the local video path using convertFileSrc.

[FabianLars]

There are 2 issues mixed up here:

1. videos not loading in general, including remote videos (for example from youtube) -> The fix is to install gstreamer
2. local videos not loading via convertFileSrc -> No fix available right now (gstreamer would still be necessary)

[xxidbr9]

I got an issue where i need to load image and video inside tauri as an asset where the file is located in randomly path, but i solve that issue by copying the file inside tauri PATH, in my case i use appDataDir and it work just fine

My example app:

I use react-player in this example and work fine

My code