Search code examples
htmluser-interfacecross-platformlibvlc

HTML5/CSS3/JS GUI for cross-platform video app

I would like to create a HTML5/CSS3/JS GUI for a cross-platform (Linux, Win) app that plays video files. Simple, right?

Well in the last couple of weeks I have spent a LOT of time searching for the right solution, tried a lot, and at this point, I'm pulling my hair out.

I started by checking Electron, but unfortunately it does not support all video formats (like MKV, etc) natively. So I thought LibVLC might be a good component to use in this app. But I could not get it to work with Electron. Projects like WebChimera (VLCLib for Electron) seem to be dead.

Another angle I tried was to install Visual Studio Code, get a C++ Hello World test running (G++ compiled, works great) and then try to get CEF (compiled binary, seemed easier?) into my project. My knowledge does not reach far enough to get CEF running in VSCode unfortunately (g++ went fine, but this needs cmake?)

So, once again I turn to the StackOverflow community to ask for a couple of pointers and hear about some ideas. Maybe there are other angles. What would you do?

  1. Desktop app. Needs to run on both Windows and Linux.
  2. Plays different kinds of video files (VLC fulfills all needs)
  3. Uses HTML5/CSS3/JS as GUI
  4. Programming language not too important, I can write a few and learn others quickly.

I think I might be on the right track with C++, CEF and LibVLC. If so, is there anyone that can help me get CEFSimple running in Visual Studio Code? I develop on Linux. I'm open to trying editors/IDE's if better.

Solution

  • In the end I installed QT Creator and QT 5.6.2 and used the QWebEngineView as the central widget.

    Using ..

    QString appPath = qApp->applicationDirPath();    
view->setUrl( QUrl::fromLocalFile( appPath + "/GUI/index.html") );

    I was able to get my local HTML file loaded and it works.

    The QWebEngine wasn in the widget list of the QT Creator, so I found out that I can create it programmatically by adding an include to the main window header like this:..

    #include <QWebEngineView>

    And then just write this in my main window code..

    QWebEngineView *view = new QWebEngineView(this);
setCentralWidget(view);

    I still have to see if I can communicate with QWebEngineView in order to catch events and also send data to javascript functions inside my HTML.

    As the project is now written in C with Qt taking care of the HTML GUI, I'm sure I can compile this on Windows too. C will also help when I get to the part of LibVLC.

    Edit on December 25th 2017: I managed to communicate with QWebEngineView by now too. Simple Qt to QWebEngineView communication by:

    view->page()->runJavaScript("MyJSFunction('optionalArgument')");

    And for more robust and bi-directional communication I'm using a QWebChannel