Клон Netflix в angular с использованием потоковой передачи с nodeJS

мы создаем потоковое приложение, как в видеоплеере netflix.
Сначала создадим сервер с помощью 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>
Войти в полноэкранный режим Выйти из полноэкранного режима

воспроизвести viseo в соответствии с вашим id, если у вас есть список видео, получить список видео и показать, выбрать видео и воспроизвести его.

Оцените статью
Procodings.ru
Добавить комментарий