Streaming de Vídeos Grandes com Node.js e ReactJS

Se você precisa exibir vídeos grandes (mais de 1GB) sem sobrecarregar o frontend, a melhor solução é o streaming progressivo.

1. Configurando o Servidor Node.js

Crie um servidor com Express para servir o vídeo em partes, permitindo que o player carregue apenas o necessário.

const express = require("express"); const fs = require("fs"); const path = require("path");
const app = express(); const PORT = 3000;
app.get("/video", (req, res) => { const videoPath = path.join(__dirname, "videos", "meu_video.mp4"); const stat = fs.statSync(videoPath); const fileSize = stat.size; const range = req.headers.range;

if (range) {
    const parts = range.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 fileStream = fs.createReadStream(videoPath, { start, end });
    res.writeHead(206, {
        "Content-Range": `bytes ${start}-${end}/${fileSize}`,
        "Accept-Ranges": "bytes",
        "Content-Length": chunkSize,
        "Content-Type": "video/mp4",
    });
    fileStream.pipe(res);
} else {
    res.writeHead(200, {
        "Content-Length": fileSize,
        "Content-Type": "video/mp4",
    });
	   fs.createReadStream(videoPath).pipe(res);
}
});

app.listen(PORT, () => console.log(Servidor rodando na porta ${PORT})); 

2. Consumindo o Vídeo no ReactJS

No frontend, usamos a tag <video> para carregar o vídeo do backend.

import React from "react";

const VideoPlayer = () => { return (<\video controls width="800"> <\source src="http://localhost:3000/video" type="video/mp4" /> Seu navegador não suporta a reprodução de vídeos. <\/video>" ); };

export default VideoPlayer; 

3. Benefícios da Abordagem

• Streaming eficiente: O navegador carrega apenas o necessário.
• Menos uso de memória: O servidor não carrega o arquivo inteiro.
• Suporte a saltos no vídeo: O usuário pode avançar ou retroceder sem baixar tudo.

Conclusão

Com essa abordagem, conseguimos melhorar a experiência do usuário e otimizar o consumo de recursos. Para vídeos ainda maiores, podemos utilizar HLS (HTTP Live Streaming). Caso precise dessa solução, deixe um comentário!