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.

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more