Open In App

How to create a simple http server listening at port 3000 to serve video ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can serve video to the browser/front end using nodeJS with the help of “express” and the in-built nodeJS file system “fs“. Here we would use the HTML video tag to view the video on the webpage. We would use express for routing purposes. We would send the video bytes by creating a read stream and piping the res Object to it. Let’s walk through step by step.

Step 1: Create an “app.js” file and initialize the project with npm. Also, keep the video file that you want to stream in the same folder.

npm init

Step 2: Now install express and create the “index.html” file.

npm install express

Project Structure: It will look like the following. 

Project Structure

Here “Welcome-To-GeeksforGeeks.mp4” is the mp4 file that we want to stream.

Step 3: Let’s code now “app.js” file.  The GET request to ‘/stream‘ sends the video as a readable stream. The root of the app loads the “index.html” file. We use res.writeHead() function to send the status message as 200 which means OK and the content type is mp4/video. We would now create a read stream using the fs.createReadStream() function to send the video as the readable stream for the HTML video tag.

app.js




// Requiring express for routing
const express = require('express')
  
// Creating app from express
const app = express()
  
// Requiring in-built file system
const fs = require('fs')
  
// GET request which HTML video tag sends
app.get('/stream',function(req,res){
  
    // The path of the video from local file system
    const videoPath = 'Welcome-To-GeeksforGeeks.mp4'
  
    // 200 is OK status code and type of file is mp4
    res.writeHead(200, {'Content-Type': 'video/mp4'})
  
    // Creating readStream for the HTML video tag
    fs.createReadStream(videoPath).pipe(res)
})
  
// GET request to the root of the app
app.get('/',function(req,res){
  
    // Sending index.html file for GET request
    // to the root of the app
    res.sendFile(__dirname+'/index.html')
})
  
// Creating server at port 3000
app.listen(3000,function(req,res){
    console.log('Server started at 3000')
})


Step 4: Now we will code the “index.html” file. Here we are using the controls attribute for providing various controls of media-player in the video tag. And the autoplay is a Boolean attribute by which the video automatically begins to playback as soon as it can do so without stopping to finish loading the data. The src attribute of the HTML video tag is ‘/stream’ as defined in the app.js file.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Video Stream</title>
</head>
  
<body>
    <!--  autoplay: A Boolean attribute; if 
        specified, the video automatically 
        begins to play back as soon as it can 
        do so without stopping to finish 
        loading the data -->
  
    <video controls autoplay width="500px" height="500px">
          
        <!-- GET request to the stream route -->
        <source src="/stream" type="video/mp4" />
    </video>
</body>
  
</html>


Step 5: Now run the app using

node app.js

Output: Head over to your browser and enter http://localhost:3000/

Output



Last Updated : 16 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads