How would I use this player from a Rust based WASM frontend framework? (Leptos)

[saikatdas0790]

I am writing a frontend app in Leptos and I need to display an HLS stream in that app.

How would I use integrate this library to stream video to a WASM webapp?

[vgarleanu]

I think itd be very difficult given that this project is not pure rust, and has some ts/js code thats required.

[peaBerberian]

Hi,

I'm not too familiar with Leptos but yeah, the main way of interfacing with this library (its full API) today is through JavaScript.

I guess there could be some adaptations to make it accessible in rust or WASM but I didn't yet take the time to think about it, though it would be a technically interesting project for sure.

Also right now it also depends on JavaScript and web APIs for media buffering and playback control, especially on the MSE API and on the behavior of the HTML5's HTMLVideoElement, which can only be interacted to through JavaScript. Even HTTP requests, logging, or any kind of input/output has to go through JS due to how WebAssembly works today on the web.
Here it will depend on if leptos allows for adding some JavaScript code for that type of code, or if it allows for an alternative. As leptos seems to be able to run client-side through WebAssembly, and as WebAssembly can only be instantiated and run today from JavaScript, I guess it already includes some kind of JavaScript interaction.

Still, I guess you could have something like Leptos - which is presumably mostly compiled down to WebAssembly and some JavaScript glue code - calling this JavaScript library, itself running a WebWorker and Rust through Webassembly inside (it needs JavaScript to do both anyway).
There would be unnecessary logic formatting things in a JS-friendly way going on in the Player's JS API, that you would have to format back to communicate it to your rust code, but the player's current WASM-to-JS objects are not API-friendly either due to the limited types we can work with when interfacing with WASM.

[saikatdas0790]

Got it. We decided not to pursue this due to its infeasibility and the uphill nature of the problem.

We decided to use hls-js and use a JS based framework - SvelteKit