DEV Community

Cover image for Netflix clone in angular using streaming with nodeJS
Deepak Jaiswal
Deepak Jaiswal

Posted on

5 3

Netflix clone in angular using streaming with nodeJS

we make streaming app like in netflix video player.
first make server with express.

app.js

const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()

app.get('/video/:id', async (req, res)=> {
const file=await VideoModel.findOne({_id:req.params.id})
const path = 'assets/videos/'+file.filename;
const stat = fs.statSync(path)
const fileSize = stat.size
const rangeSize = req.headers.range

if (rangeSize) {
const parts = rangeSize.replace(/bytes=/, "").split("-")
const start = parseInt(parts[0], 10)
const end = parts[1]
? parseInt(parts[1], 10)
: fileSize-1

const chunkSize = (end-start)+1
const file = fs.createReadStream(path, {start, end})
const head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': 'video/mp4',
}

res.writeHead(206, head)
file.pipe(res)
} else {
const head = {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
}
res.writeHead(200, head)
fs.createReadStream(path).pipe(res)
}
})

app.listen(8000, function () {
console.log('Server is listening on port 8000')
})
Enter fullscreen mode Exit fullscreen mode

app.component.ts

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {HttpClient} from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: 'app.component.html'
  })
export class AppComponent implements OnInit {
    apiUrl:string="http://localhost:8000/video/";
    id:any=2;

    constructor() {
    }

    ngOnInit() {

    }
}
Enter fullscreen mode Exit fullscreen mode

app.component.htnl

<div class="row mx-3">
<div class="col-md-3 col-md-offset-3">
<video style="height: 500px; width:800px;" id="video" controls muted="muted" autoplay>
<source src=`{apiUrl}+{id}` type="video/mp4">
</video>
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

play viseo according your id if you have make video list fetch video list and show and select video and play it.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post