DEV Community

Cover image for Netflix clone in angular using streaming with nodeJS
Sandeep
Sandeep

Posted on

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.

Discussion (0)