Выпуск видеопотока в Safari и Mobile Chrome - PullRequest
0 голосов
/ 04 марта 2020

У меня проблема с потоковой передачей видео в Safari для браузеров iPad и Google Chrome на устройствах Android. Приложение отлично работает на моем ноутбуке, который использует браузер Microsoft Edge Chromium. Я искал примеры, чтобы решить мою проблему, но я не могу найти ничего конкретного c для этого. Проблема в том, что клиент отправит запрос на получение, чтобы получить видеофайл. Я использую gridfs-stream , чтобы извлечь этот файл из базы данных MongoDb, а затем направить файл к объекту ответа. Это позволяет пользователю просматривать видеопоток в video- js player . Это работает без проблем на ноутбуках и настольных устройствах с браузерами Microsoft Edge Chromium, но не работает в браузерах Safari и Mobile Chrome. Вот мой код:

Я отвечаю на запрос и извлекаю файл из базы данных, затем направляю его к объекту ответа в узле:

app.get('/get-video', (req, res, next) => {
    let video = req.query.video;
    gfs.files.findOne({ filename: video }, (err, file) => {
        // Check if file ex
        if (!file || file.length === 0) {
          return res.status(404).json({
            err: 'No file exists'
          });
        }
        else {
            let readstream = gfs.createReadStream(file.filename);
            readstream.pipe(res);
        }
   });
});

Как вы можете сказать, я нахожу файл на основе имени видео в запросе get, создайте ReadStream и передайте файл в объект ответа. Вот код html, в котором запрос на получение сделан от клиента. Плеер использует библиотеку video- js, но я не нашел проблем с совместимостью при создании потоков, и это работает в браузере Edge / Chromium:

<video class="video-js vjs-big-play-centered vjs-16-9 card-img-top" autopreload="false" data-setup='{"autoplay": false, "controls": true}'>
    <source src="/get-video?video=<%= post.source %>">
</video>

Я делаю источник для видео ответ, отправленный с запроса get, который является потоком видео. В браузере Safari я получаю сообщение об ошибке: Воспроизведение мультимедиа было прервано из-за проблемы с повреждением или из-за того, что используемые вами функции мультимедиа не поддерживали ваш браузер

У меня нет ни одной проблемы с этим браузеры при отправке изображений через запрос get. У меня также нет никаких проблем, когда я просто запрашиваю stati c файлы. Кажется, эта проблема содержится в определенных c браузерах, когда я пытаюсь отправить видеопоток.

Причина, по которой я использую поток, а не файл stati c, заключается в том, что я размещаю приложение в облаке. Я должен отправить необработанный файл из базы данных MongoDb (или, по крайней мере, это мое понимание). Когда я тестировал приложение перед отправкой в ​​облако, такой проблемы не возникало, поскольку я мог просто использовать файловую систему и сохранить путь к файлу в качестве источника видео. Однако файловая система не является постоянной с приложением Heroku, поэтому в этой ситуации я использую облачную базу данных. Теперь, когда мне нужно передать его из базы данных, возникают проблемы.

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Чтобы воспроизвести видео на веб-странице, выполните следующие действия:

Загрузите видео на YouTube. Запишите идентификатор видео. Определите элемент на своей веб-странице. Пусть атрибут sr c указывает на URL видео Используйте атрибуты width и height, чтобы указать размер проигрывателя. Добавьте любые другие параметры в URL (см. ниже)

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>
0 голосов
/ 04 марта 2020

использовать пользовательскую концепцию iframe

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>
...