Skip to content

Latest commit

 

History

History
95 lines (73 loc) · 2.56 KB

README.md

File metadata and controls

95 lines (73 loc) · 2.56 KB

HLS-MV

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.

Demo

Install

cd HLS-MV

install vite:

npm install vite@latest

Build

npm run build

Run

npm run start

Run with LAN exposed

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

Features

  • 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 image
    • click save to save changes.

Config file

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'

Shortcuts

'F' will toggle full screen

Future Ideas

  • 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

Authors

Resources