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

22 Oct, 2021
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 routingconst express = require('express')  // Creating app from expressconst app = express()  // Requiring in-built file systemconst fs = require('fs')  // GET request which HTML video tag sendsapp.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 th HTML video tag    fs.createReadStream(videoPath).pipe(res)})  // GET request to the root of the appapp.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 3000app.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
NodeJS-Questions
Picked
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to build a basic CRUD app with Node.js and ReactJS ?
How to connect Node.js with React.js ?
Mongoose Populate() Method
Express.js req.params Property
How to Convert CSV to JSON file having Comma Separated values in Node.js ?
Top 10 Front End Developer Skills That You Need in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript