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')
})
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.
Top comments (0)