A complete demo application showcasing the rtsp-ffmpeg library's capabilities for streaming RTSP video feeds to web browsers in real-time.
- 🎥 Real-time RTSP to JPEG streaming
- 🖥️ Clean, modern web interface
- 📊 Live FPS and frame count statistics
- 🔄 Start/Stop controls for each stream
- 💡 Lazy loading - FFmpeg only runs when clients are connected
- 🎨 Responsive design with beautiful gradients
Before running this demo, ensure you have:
- Node.js (version 6 or higher)
- FFmpeg installed and accessible from command line
- Download from: http://www.ffmpeg.org/
- Verify installation:
ffmpeg -version
-
Navigate to the demo directory:
cd demo -
Install dependencies:
npm install
Start the server:
npm startThen open your browser and navigate to:
http://localhost:3000
- The server creates FFmpeg streams for each configured RTSP source
- When you click "Start Stream", the browser connects via Socket.io
- FFmpeg spawns and begins converting RTSP video to JPEG frames
- Each frame is sent to the browser and displayed on a canvas
- When you stop or disconnect, FFmpeg automatically stops (lazy loading)
The demo includes two public RTSP streams:
- Big Buck Bunny - A classic test video
- Hessdalen Camera - Live camera feed from Norway
These are publicly available streams and may occasionally be unavailable.
Edit server.js and add your stream to the streams array:
const streams = [
{
name: 'My Camera',
uri: 'rtsp://your-camera-ip:554/stream'
}
];Modify the FFmpeg options in server.js:
const ffmpegStream = new rtsp.FFMpeg({
input: stream.uri,
resolution: '1280x720', // Higher resolution
quality: 1, // Better quality (0-31, lower is better)
rate: 15 // Higher frame rate
});If you get an error like Error: spawn ffmpeg ENOENT:
- Verify FFmpeg is installed:
ffmpeg -version - If the FFmpeg command differs on your system, set it in your code:
const rtsp = require('rtsp-ffmpeg'); rtsp.FFMpeg.cmd = '/path/to/ffmpeg'; // e.g., 'C:\\ffmpeg.exe' on Windows
- Check that the RTSP URL is correct and accessible
- Verify your firewall allows RTSP connections
- Some streams may be temporarily unavailable
- Check the server console for error messages
- Reduce the resolution:
resolution: '320x240' - Lower the frame rate:
rate: 5 - Increase quality value:
quality: 10
Browser Server FFmpeg
| | |
|-- Connect Socket --->| |
| |--- Spawn -------->|
| |<-- JPEG frames ---|
|<-- Emit 'image' -----| |
| | |
|-- Disconnect ------->| |
| |--- Kill --------->|
- Main library: rtsp-ffmpeg
- Socket.io: https://socket.io/
- FFmpeg: https://ffmpeg.org/
MIT