Как передать видео с сервера Express на фронтенд?

После изучения документации и просмотра нескольких видеороликов по теме, я все еще не могу понять, почему у них все работает, а у меня — нет. Мне кажется, проблема может быть в передаче чанков. Я отправляю запрос с клиента на сервер, сервер добавляет видео по magnet ссылке, затем начинает постепенно подгружаться. Однако процесс загрузки происходит некорректно и почти сразу заканчивается ошибкой.
Изображение к вопросу
  • 20 декабря 2023 г. 22:57
Ответы на вопрос 1
Если вы хотите передать видео с сервера Express на фронтенд, вам следует использовать потоковую передачу данных. Это позволит вам постепенно подгружать видео на клиентскую сторону.

Вот пример кода для сервера Express:

```javascript
const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/video', (req, res) => {
  const videoPath = 'путь_к_видеофайлу'; // Укажите путь к вашему видеофайлу
  const videoSize = fs.statSync(videoPath).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) : videoSize - 1;
    const chunkSize = (end - start) + 1;
    const file = fs.createReadStream(videoPath, { start, end });
    const headers = {
      'Content-Range': `bytes ${start}-${end}/${videoSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunkSize,
      'Content-Type': 'video/mp4',
    };

    res.writeHead(206, headers);
    file.pipe(res);
  } else {
    const headers = {
      'Content-Length': videoSize,
      'Content-Type': 'video/mp4',
    };

    res.writeHead(200, headers);
    fs.createReadStream(videoPath).pipe(res);
  }
});

app.listen(8000, () => {
  console.log('Server is running on port 8000');
});
```

На клиентской стороне вы можете использовать тег `<video>` для воспроизведения видео:

```html
<video controls>
  <source src="/video" type="video/mp4">
</video>
```

Убедитесь, что значение атрибута `src` соответствует пути на вашем сервере. В данном примере путь `/video` будет соответствовать маршруту `/video` на сервере Express.

Если у вас все еще возникают проблемы, убедитесь, что видеофайл существует по указанному пути и что ваш сервер может обрабатывать потоковую передачу данных. Также убедитесь, что ваш клиентский код правильно обрабатывает потоковую передачу данных.

Если проблема остается, пожалуйста, предоставьте больше информации о вашей проблеме и коде, чтобы мы могли помочь вам.
Похожие вопросы