HTTP Live Streaming MultiViewer
HLS-MV is a React application designed for real-time monitoring of multiple HLS video streams in a grid layout. It provides a user-friendly interface for viewing and managing multiple video feeds simultaneously, ideal for surveillance, broadcasting, and live event monitoring.
cd HLS-MV
install vite:
npm install vite@latest
npm run build
npm run start
to expose the server to the lan (ability to watch it in other computer in the lan or for example smart TV) Edit your LAN ip address in package.json line 8
8 "start-lan": "vite --host {YOUR_LAN_IP}",
then run
npm run start-lan
- one click on a video will play the audio of the source and will add audio meter
- double click on a video input will toggle full screen for the clicked input
- Editing the inputs:
- hover the left side of the screen, the navbar will appear, click on ⚙ >> Inputs
- click save to save changes.
- hover the left side of the screen, the navbar will appear, click on ⚙ >> Inputs
a config file will be a array that contain key:value
- url: {HLS_URL}
- name: {NAME_VIDEO_INPUT} (will appear when hovering the video input)
Example: configNews.js
export const streams = [
{
url: "https://kan11w.media.kan.org.il/hls/live/2105694/2105694/source1_4k/chunklist.m3u8",
name: "Kan 11",
},
....
}
import it into App.jsx as initialStreams
import {streams as initialStreams} from './configNews'
'F' will toggle full screen
- adding routes to config files via url
- adding support for flexable rescale for each video input
- creating a menu item componenets
- saving last config to the local storage