The video-streaming from marcosnicolau

Hi, i followed your tutorial on youtube but couldn't get the result.

Output:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video Streaming</title>
    <style>
      body {
        margin: 40px auto;
        max-width: 650px;
        line-height: 1.6;
        font-size: 18px;
        font-family: "Courier New", Courier, monospace;
        color: #444;
        padding: 0 10px;
      }
      h2 {
        line-height: 1.2;
      }
    </style>
  </head>

  <body>
    <h2>HTTP Video Streaming</h2>
    <p>This videos are being streamed instead of downloaded.</p>
    <p>
      Feel free to seek through the videos and it only loads the part you want to
      watch
    </p>
    <video id="videoPlayer1" width="650" controls autoplay >
      <source src="/video1" type="video/mp4" />
    </video>
    <i>Get Windows 11</i>
    <p>    </p>
    <video id="videoPlayer2" width="650" controls autoplay >
        <source src="/video2" type="video/mp4" />
      </video>
      <i>Inside the mind of a Master Procrastinator</i>
  </body>
</html>

index.js:

const express = require('express');
const router = express.Router();
const fs = require('fs');
const app = express();

// Set ejs template engine
app.set('view engine', 'ejs');

router.get('/',(req,res)=>{
    res.sendFile(__dirname+'/index.html');

});



router.get('/video1',(req,res)=>{
    const range=req.headers.range;
    if(!range){
        res.status(400).send("requires range header");
    }
    const videopath1 = "./video1.mp4";
    
    const video1size = fs.statSync("video1.mp4").size;
    console.log("video1size",video1size)

    //parse range
    const Chunksize1= 10 ** 6; //1mb
    console.log("chunksize1",Chunksize1);
    const start1 = Number(range.replace(/\D/g,""));
    const end1 = Math.min(start1 + Chunksize1, video1size - 1);
   

    const contentLength1 = end1 - start1 + 1;
    const contentrange1 = start1-end1/video1size
 
    const headers1={
        "Content-Range":'bytes '+contentrange1,
        "Accept-Ranges": "bytes",
        "Content-Length": contentLength1,
        "Content-Type": "video/mp4",
    }

    res.writeHead(206, headers1);

    const videoStream1 = fs.createReadStream(videopath1, {start1,end1});

    videoStream1.pipe(res);
   

})

router.get('/video2',(req,res)=>{
    const range=req.headers.range;
    if(!range){
        res.status(400).send("requires range header");
    }
   
    const videopath2 = "./video2.mp4";
   
    const video2size = fs.statSync("video2.mp4").size;
    console.log("videosize2",video2size)

    //parse range
    const Chunksize2= 10 ** 6; //1mb
    console.log("chunksize2",Chunksize2);
    const start2 = Number(range.replace(/\D/g,""));
    
    const end2 = Math.min(start2 + Chunksize2, video2size - 1);

    
    const contentLength2 = end2 - start2 + 1;
    const contentrange2 = start2-end2/video2size
    const headers2={
        "Content-Range":'bytes '+contentrange2,
        "Accept-Ranges": "bytes",
        "Content-Length": contentLength2,
        "Content-Type": "video/mp4",
    }

    res.writeHead(206, headers2);

    const videoStream2 = fs.createReadStream(videopath2,{start2,end2});

    videoStream2.pipe(res);

})

app.use(router);

app.listen(8000,()=>{
    console.log("server is up on 8000");
})

It would be great, if you could help.

marcosnicolau / video-streaming Goto Github PK

video-streaming's People

Contributors

Stargazers

Watchers

Forkers

video-streaming's Issues

Hi, i followed your tutorial on youtube but couldn't get the result.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent