Embedding a mpv/vlc video player inside a window

[prayag17]

Hello, can you embed mpv video player inside a window?
I want to have a webview with a transparent background and a canvas underneath this webview which displays videos with the help of mpv.
I looked at some examples like https://github.com/vgarleanu/lumiere which don't use tauri but might be able to implement it for tauri but I cannot find a way to achieve this.
I know that there is a working mpv binding for rust but its documentation is vague.

There is also vlc-rc but that to doesn't have a good documentation

[vgarleanu]

I think a possible avenue is embedding a video player's window in a tauri window.

[CaseSens]

This would be the simplest, if all you're looking to do is play videos. As for the transparent background, Tauri offers transparent backgrounds using this solution. Keep in mind this will only work on non-MacOs environments. For MacOs, you can see the official tauri documentation here

[Dr-42]

Has there been a solution to doing this? I too want to mpv into my tauri window for video-playback

[prayag17]

I was able to embed the CLI version of mpv in the Tauri application using RawWindowHandle, tho this method is pretty useless since you don't get control over the running mpv instance.

You can refer to my discord thread:
https://discord.com/channels/616186924390023171/1215223447693692958

[s074]

You can use libmpv to do the same, and you will have access to pass commands to the mpv player. Only challenge with that route is that the rust bindings for the library are lacking. There's this one: https://github.com/kohsine/libmpv2-rs which supports libmpv v2, but hasn't been updated in months. You can probably do something like:

let mpv = Mpv::with_initializer(|init| {
    init.set_property("vo", "gpu")?;
    init.set_option("wid", window_id as i64)?;
    Ok(())
})
.unwrap();

mpv.command("loadfile", &["http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "replace"]).unwrap(); 

I was able to get vlc-rs working with it, which might be the way to go because the bindings are maintained by vlc people and you can get support from their Discord (they were very helpful to me). I had to render the webview in a child window though because vlc kept rendering on top of it if done in the same window.

[nini22P]

I was able to embed the CLI version of mpv in the Tauri application using RawWindowHandle, tho this method is pretty useless since you don't get control over the running mpv instance.

You can refer to my discord thread: https://discord.com/channels/616186924390023171/1215223447693692958

You can control mpv playback via JSON IPC
https://github.com/nini22P/mpv-tauri

[Dr-42]

Anyone looking for a solution, No I didn't embed mpv.

I created a server with backend and video frontend that live transcodes and streams it to the browser video player

[soleuniverse101]

If someone is looking to do this, I was able to create a child WebviewWindow and run libmpv in it using tauri-plugin-libmpv.

Downside is that I'm faking it and the window is not truly embedded, basically when the parent moves or resizes I reset the position and size of the libmpv window to align it with an HTML div (whose coordinates I get through getBoundingClientRect()). Also all commands have to be set manually in the main WebView to then forward them to libmpv through commands and property changes (I'm using hotkeys-js for that).

One way that could work (on the word of ChatGPT...) would be to configure libmpv to render in a GPU texture that would then be displayed in the Tauri WebView through wgpu and/or a canvas. I won't go that route for now since it seems difficult but if someone wants to enable true embedding, as an HTML component, they can explore that way. If someone accomplishes this, I would very much appreciate to be notified!