8 - Streaming de Vídeo na API

Vamos começar criando um novo controlador chamado episodesController.ts e dentro dele um método stream:
- Obs.: Repare que já estão adicionadas as dependências fs e path do Node.js que serão utilizadas.
- Obs².: Já foi extraída também a propriedade videoUrl dos parâmetros de query da requisição. Ela será enviada pelo front-end com o caminho para o arquivo dentro da pasta uploads.

// src/controllers/episodesController.ts

import { Request, Response } from 'express'
import fs from 'fs'
import path from 'path'

export const episodesController = {
  // GET /episodes/stream
  stream: async (req: Request, res: Response) => {
		const { videoUrl } = req.query

  }
}

Em um bloco trycatch, vamos começar garantindo que a videoUrl existe e está no formato certo. Depois disso podemos obter o caminho completo do arquivo de vídeo no servidor e também alguns dados do arquivo através do método fs.statSync(). Além disso, obtemos também o header de range da requisição que será enviado pelo front-end:

// src/controllers/episodesController.ts

import { Request, Response } from 'express'
import fs from 'fs'
import path from 'path'

export const episodesController = {
  // GET /episodes/stream
  stream: async (req: Request, res: Response) => {
    const { videoUrl } = req.body

		try {

			if (typeof videoUrl !== 'string') {
        throw new Error('videoUrl deve ser do tipo \\'string\\'');
      }

      const filePath = path.join(__dirname, '../../uploads', videoUrl)
      const fileStat = fs.statSync(filePath)

      const range = req.headers.range

    } catch (err) {

      if (err instanceof Error) {
        return res.status(400).json({ message: err.message })
      }

    }
  }
}

O header Range servirá para obter o vídeo parcialmente. Vamos enviar diferentes respostas se o Range estiver ou não presente. O Range é uma string no formato “bytes=0-1000”, então vamos obter individualmente os valores de início e fim e a partir deles podemos calcular o tamanho de cada chunk ou bloco do vídeo sendo retornado:

// src/controllers/episodesController.ts

// ...

		try {

			if (typeof videoUrl !== 'string') {
        throw new Error('videoUrl must be of type \\'string\\'');
      }

      const filePath = path.join(__dirname, '../../uploads', videoUrl)
      const fileStat = fs.statSync(filePath)

      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) : fileStat.size - 1

				const chunkSize = (end - start) + 1

      } else {

      }

    } catch (err) {

// ...

Agora vamos criar uma stream de leitura com o fs, preparar o head da nossa resposta e então vamos fazer o pipe da stream para a resposta:

// src/controllers/episodesController.ts

// ...

			if (range) {
        const parts = range.replace(/bytes=/, '').split('-')

        const start = parseInt(parts[0], 10)
        const end = parts[1] ? parseInt(parts[1], 10) : fileStat.size - 1

				const chunkSize = (end - start) + 1

				const file = fs.createReadStream(filePath, { start, end })

        const head = {
          'Content-Range': `bytes ${start}-${end}/${fileStat.size}`,
          'Accept-Ranges': 'bytes',
          'Content-Length': chunkSize,
          'Content-Type': 'video/mp4',
        }

        res.writeHead(206, head)

        file.pipe(res)

      } else {

      }

    } catch (err) {

// ...

Por fim, se o Range não estiver presente o vídeo será retornado por completo. No bloco else vamos preparar o head da resposta e fazer o pipe diretamente da stream com o vídeo inteiro:

// src/controllers/episodesController.ts

// ...

        file.pipe(res)

      } else {

				const head = {
          'Content-Length': fileStat.size,
          'Content-Type': 'video/mp4',
        }

        res.writeHead(200, head)

        fs.createReadStream(filePath).pipe(res)

      }

    } catch (err) {

// ...

Agora já é possível testar o endpoint no Postman e ver que o vídeo inteiro foi carregado (se o Range não for especificado).
Também podemos criar um arquivo de teste video.html na pasta pública do projeto para testarmos em um player de vídeo nativo do HTML5. Ele irá trabalhar automaticamente com o header Range, carregando o vídeo em partes. Também podemos ver que será possível controlarmos onde o vídeo iniciará. Só precisamos utilizar as tags video e source como mostrado abaixo:

// public/video.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Comp atible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testando Streaming</title>
</head>
<body>

  <h2>Testando Streaming</h2>

  <video id="videoplayer" controls>
    <source src="/episodes/stream?videoUrl=videos/course-1/configuracao-obs-canvas.mp4" type="video/mp4">
  </video>

  <script>
    var myvideo = document.getElementById('videoplayer')
    myvideo.currentTime = 70;
    myvideo.play();
  </script>
</body>
</html>

O caminho foi inserido manualmente por se tratar de um exemplo. Ao navegar até http://localhost:3000/video.html é possível ver o player reproduzindo o vídeo e o seu conteúdo parcialmente carregado na barra inferior de controles.
- Obs.: Lembrando que é preciso usar uma url válida de um vídeo armazenado em uploads.
- Este arquivo video.html pode ser apagado após o teste.

Antes de terminar podemos refatorar o controlador, movendo a maior parte do método para um serviço. Para isso vamos criar o arquivo episodeService.ts na pasta services. Dentro dele podemos adicionar o seguinte conteúdo:

// src/services/episodeService.ts

import { Response } from 'express'
import fs from 'fs'
import path from 'path'
import { WatchTime } from '../models'

export const episodeService = {
  streamEpisodeToResponse: (res: Response, videoUrl: string, range: string | undefined) => {
    const filePath = path.join(__dirname, '../../uploads', videoUrl)
    const fileStat = fs.statSync(filePath)

    if (range) {
      const parts = range.replace(/bytes=/, '').split('-')

      const start = parseInt(parts[0], 10)
      const end = parts[1] ? parseInt(parts[1], 10) : fileStat.size - 1
      const chunkSize = (end - start) + 1

      const file = fs.createReadStream(filePath, { start, end })

      const head = {
        'Content-Range': `bytes ${start}-${end}/${fileStat.size}`,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunkSize,
        'Content-Type': 'video/mp4',
      }

      res.writeHead(206, head)
      file.pipe(res)
    } else {
      const head = {
        'Content-Length': fileStat.size,
        'Content-Type': 'video/mp4',
      }

      res.writeHead(200, head)
      fs.createReadStream(filePath).pipe(res)
    }
  },
}

Agora no controlador episodesController.ts podemos deixar apenas a chamada a este novo método:

// src/controllers/episodesController.ts

import { Request, Response } from 'express'
import { episodeService } from '../services/episodeService'

export const episodesController = {
  // GET /episodes/stream
  stream: async (req: Request, res: Response) => {
    const { videoUrl } = req.query
    const range = req.headers.range

    try {
      if (typeof videoUrl !== 'string') {
        throw new Error('videoUrl must be of type \\'string\\'');
      }

      episodeService.streamEpisodeToResponse(res, videoUrl, range)
    } catch (err) {
      if (err instanceof Error) {
        return res.status(400).json({ message: err.message })
      }
    }
  },
}