An Interest In:
Web News this Week
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
May 21, 2022 07:56 am GMT
Original Link: https://dev.to/deepakjaiswal/netflix-clone-in-angular-using-streaming-with-nodejs-57b9
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To