Media player for linux (ideally for ARM architecture) with web based frontend that plays the media on the server rather than on the client

Question

I am looking for an ideally open source application for my next DIY smart-home-project, that frontend is web-based and plays the media on the server rather than on the client. The application would ideally be platform independent, for example java based web application, as my server would be either an ARM based or an Intel based SBC with linux as an operating system. Storage can be anything, like FS or DB, does not matter.

My use case: When I open 'http://my.media.local' from my phone's browser and select a media file, for example an audio file to play, then the media file is played on the server rather than on my mobile phone or in the browser of my mobile so that the sound/video/picture comes out from my server's audio/display output rather than from my phone's audio/display output. Obviously it would come with other basic features, like volume control and equalizer et cetera.

Is there anything like this on the market? I have found a few media library but not sure how they work. Any advise would be welcomed.

Answer 1

A potential solution is VLC (https://www.videolan.org/). VLC has an optional web based frontend, where the media player can be controlled, that is running on the server. It is very basic but plays the audio file. If you know other solutions then please leave another answer.

How to enable the VLC WEB frontend:

1. Open 'Preferences' from the menu
2. At the bottom-left, click 'Show All'. This will show you all VLC configuration
3. Select 'Interface'/'Main Interface' from the list
4. Tick the 'Web'
5. Select 'Interface'/'Main Interface'/'Lua' from the list
6. Add a Password under 'Lua HTTP'. You will use this password without user name - yes, I did not find a way to set user name but password is mandatory - to access the web frontend.
7. Re-start your VLC
8. Open a browser from a device from your LAN
9. Enter the 'http://your_IP:8080' to your browser. For example, http://192.168.1.2:8080
10. Enter your password that you set at step 6., but leave the user name blank

I have tested it with:

• Server: Raspberry PI 3
• OS: Raspbian GNU/Linux 10 (buster)
• VLC: 3.0.11 Vetinari
  • Works with VLC running as GUI application (/usr/bin/vlc)
  • Works with VLC running as a background process (/usr/bin/cvlc/)
• Sound: Well, my screen has some sort-of speaker. Audio was coming out it via the HDMI of my RPI
• Client, where the VLC was successfully controlled from
  • My laptop
  • My smartphone

Some pros:

• Free, open-source
• Configuration and startup is easy
• Frontend is available for both desktop and mobile

Some cons:

• Equalizer is not yet supported
• Frontend is very basic
• Volume cannot be properly controlled from phone: could not slide the slider, but sets the volume to the position where you click on the slider
• Phone: Cannot play all media files in a folder when the folder is clicked. It just played the first, so had to write some shell script to generate playlist files for each and every folder
• Did not find a configuration within VLC to change the default port from 8080 to 80 or to 443 for SSL.

Further guidance for customisation:

• The files for web frontend are stored in /usr/share/vlc/lua/http folder. It uses html, json, xml, js, jquery and this sort of stuff so you should be able to customize it for yourself given you understand the basics of these technologies and languages.
• There is a button on web-frontend that shows you all your files in your home folder. You can navigate to anywhere with it, that raises security concerns. Well, and it is not too nice to wander away from your media files.
• Here you can set your default folder: /usr/share/vlc/lua/http/js/controllers.js

#197: dir = dir == undefined ? 'file:///path/to/my/default/folder' : dir;

• Here you can disable the navigation to go to the parent of your default folder (I know-I know, but it works and it is more user-friendly in this way with minimal effort :)): /usr/share/vlc/lua/http/js/common.js

 #79:     if( type == "dir" && name == '..' ) {
 #80:         icon = "Back-48.png";
 #81:         if (dir == "file:///path/to/my/default/folder/..")
 #82:             dir = "file:///path/to/my/default/folder";
 #83:     }
 #84:     else ...