Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 21, 2022 07:56 am GMT

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.sizeconst rangeSize = req.headers.rangeif (rangeSize) {const parts = rangeSize.replace(/bytes=/, "").split("-")const start = parseInt(parts[0], 10)const end = parts[1]? parseInt(parts[1], 10): fileSize-1const chunkSize = (end-start)+1const 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')})

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() {    }}

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>

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


Original Link: https://dev.to/deepakjaiswal/netflix-clone-in-angular-using-streaming-with-nodejs-57b9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To