Home  Nodejs   Http live s ...

HTTP Live Streaming (HLS) in Node.js

To demonstrate HTTP Live Streaming (HLS) in Node.js, you'll typically need a server that serves HLS video segments and a client that can play them. HLS works by serving a playlist (.m3u8 file) that contains URLs to different video segments, which are then fetched and played sequentially by the client. Here's a basic example to get you started:

Server Side (Node.js)

First, you'll need to set up a server that serves HLS content. For simplicity, we'll use Express.js along with a basic HLS library (hls-server) to serve HLS streams.

Install Dependencies

Make sure you have Node.js installed. Then, create a new Node.js project and install the necessary dependencies:

mkdir hls-demo
cd hls-demo
npm init -y
npm install express hls-server

Server Code (server.js)

Create a file server.js with the following content:

const express = require('express');
const { HLSServer } = require('hls-server');
const fs = require('fs');
const path = require('path');

const app = express();

// Serve static files (optional)
app.use(express.static(path.join(__dirname, 'public')));

// Initialize HLS server
const server = new HLSServer({
  path: '/streams',      // Base URL of the HLS server
  dir: 'streams',        // Directory where video segments are stored
});

// Generate test video segments
const segmentDir = path.join(__dirname, 'streams');
if (!fs.existsSync(segmentDir)) {
  fs.mkdirSync(segmentDir);
}

for (let i = 0; i < 10; i++) {
  fs.writeFileSync(path.join(segmentDir, `video-${i}.ts`), 'Sample video content');
}

// Start the server
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Client Side (HTML + JavaScript)

To play HLS streams on the client side, you can use a video player that supports HLS, such as Video.js or HLS.js.

HTML (index.html)

Create a public/index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HLS Video Player</title>
  <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
</head>
<body>
  <div>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
      <source src="http://localhost:8000/streams/playlist.m3u8" type="application/x-mpegURL">
    </video>
  </div>
  <script>
    var player = videojs('my-video');
    player.play();
  </script>
</body>
</html>

Running the Example

  1. Start the Node.js server:

    node server.js

  2. Open your browser and navigate to http://localhost:8000. You should see the HLS video player loading and playing the video segments.

Explanation

This is a basic setup to demonstrate HLS streaming with Node.js. For production use, you would typically generate HLS streams dynamically from live video sources and use more advanced video player configurations and CDN integrations.

Published on: Jul 05, 2024, 11:38 AM  
 

Comments

Add your comment