Build GUI into Pikaraoke

[mariugul]

Embedded GUI

After refactoring and trying many different things with pikaraoke I didn't quite like selenium only using the Chrome backend because that creates a hard dependency on having to install Chrome. It seems only Chrome can stream mp4 reliably according to @vicwomg so that makes sense.

Idea 💡

However, my idea is to just build a GUI instead for the host, raspberry pi in this case. That would scrap needing a browser and selenium at all. The GUI is already super simple, so it shouldn't be much work and the server and functionality are already implemented. It would be just re-mapping to the frontend.

There are many options, like Tkinter, Qt, a million python libs etc. I have great experience with Qt. It's already made for embedded, so it is high performance and great for something like a Raspberry Pi. It's also cross platform and can work on any OS really. Additionally it comes with Python bindings, so scrap the C++, just write a QML frontend with the nice graphical designer Qt for QML has and write the logic in Python (largely exists today).

I see the value of having a server that can stream to any browser, potentially at least. This GUI idea with Qt can be an additional option when starting pikaraoke so you choose either the Qt GUI or the browser stream. I would guess a large proportion of people connect the pi to a screen directly.

Future Proof

I think that a Qt GUI also scales better if things like adding reverb, delay, echo and maybe being able to select the sound input and output are added as functioality to the app. Streaming over the browser I think has way more latency than a native GUI. At least I would like to think so.

[vicwomg]

Not all users use this natively. The decision to make it browser based is to allow pikaraoke to be a standalone server and allow a remote browser to run the splash screen (aka headless mode). The Chrome dependency is a bug, not a feature. There are branches where I am trying to address the x-browser compatibility with better proxying and proper http header implementation.

If you'd like to try writing a native GUI, then I wish you luck but I feel that the web browser implementation should always be an option. If there's a way to embed a html renderer in GUI, that might be the quickest way. Rewriting the splash screen logic and screen responsiveness is no small task in a native library.

Edit: Also not sure where to begin on how to consume a ffmpeg stream in Qt

[mariugul]

Vi

@vicwomg I agree with you that it should be an additional optional thing in that case and that streaming in headless mode is a nice feature to have. This is of course just an idea and there's probably things I haven't thought about. Do you know what the latency is when streaming with the browser?

[vicwomg]

I'm not aware of the latency. I'm sure the latency of hosting a stream on the same client that is streaming it is trivial compared to the latency of ffmpeg transcoding files in real time. That is a large piece of how pikaraoke works. In order to support multiple formats, cdg, and transposing audio, we utilize ffmpeg to process the stream.

[lvmasterrj]

If I can contribute in this matter, I thin k the embedded GUI would be a very nice upgrade to the project.
I went on searching on how I could help on making this possible and got into these articles about Building a deployable Python-Electron App and Integrating Python Flask Backend with Electron (Nodejs) Frontend which, I think, could solve some of the issues.

• It comes with a Chromium;
• It renders HTML on it
• Can run headless as well

-Building a deployable Python-Electron App
-Integrating Python Flask Backend with Electron (Nodejs) Frontend

Am I rigth?! What do you think?

[vicwomg]

I've worked with Electron before, it's pretty quirky and can be rather bloated (over 100MB). But if someone could get it working I would not be opposed to it. It would be complicated to get it integrated in a way that makes sense and is installable via pip, so might make more sense to do it as an add-on.

…

On Thu, Nov 14, 2024 at 12:47 PM Leonardo Moreira ***@***.***> wrote: If I can contribute in this matter, I thin k the embedded GUI would be a very nice upgrade to the project. I went on searching on how I could help on making this possible and got into these articles about *Building a deployable Python-Electron App* and *Integrating Python Flask Backend with Electron (Nodejs) Frontend* which, I think, could solve some of the issues. - It comes with a Chromium; - It renders HTML on it - Can run headless as well -Building a deployable Python-Electron App ***@***.***/electron-python-4e8c807bfa5e> -Integrating Python Flask Backend with Electron (Nodejs) Frontend <https://medium.com/red-buffer/integrating-python-flask-backend-with-electron-nodejs-frontend-8ac621d13f72> Am I rigth?! What do you think? — Reply to this email directly, view it on GitHub <#368 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7KXNSAXML5OSPH7IW4JCD2AUD4JAVCNFSM6AAAAABMM4P3PWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMRVHE3TGMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>