Кажется, что Clappr не может получить видео (используя rtmp / nginx) - PullRequest
Новая
       42

Кажется, что Clappr не может получить видео (используя rtmp / nginx)

0 голосов
/ 05 сентября 2018

Я только начинаю использовать clappr и сейчас пытаюсь использовать поток rtmp с сервера nginx для тестирования. (https://github.com/clappr/clappr/) и я попытался использовать демо: (http://clappr.io/demo/) и некоторый код, основанный на коде другого человека: 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" charset="utf-8" 
src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <script type="text/javascript" charset="utf-8" 
src="http://cdn.jsdelivr.net/clappr.rtmp/latest/rtmp.min.js"></script>
  <title>Test Page</title>
  <script type="text/javascript" charset="utf-8">
window.onload = function() {
  var player = new Clappr.Player({
    source: "rtmp://10.2.10.149/cam01/test",
    parentId: '#player-wrapper',
    plugins: { playback: [RTMP] }
  });
}
  </script>
</head>
<body>
   <div id="player-wrapper">
   </div>
</body>
</html>

Но, кажется, что независимо от того, что я делаю, я не могу просто получить html-файл, который я создаю, чтобы правильно вызвать clappr, есть что-то, что я должен загрузить или сделать что-то особенное? Согласно странице github (первая ссылка), кажется, что вы буквально просто должны вставить код, который они вам дают, и это должно сработать, но это тоже не сработало. Просто сбит с толку, так как никто другой, похоже, не имел этой проблемы, и он просто ничего не делает, независимо от того, в каком примере кода я вставляю ссылку на поток rtmp и пробую, на самом деле я просто пытаюсь увидеть работающий пример на моем ПК, который Я могу работать, любая помощь будет оценена:)

Редактировать: я получил базовый код из последнего сообщения по этому вопросу: https://github.com/video-dev/clappr-rtmp-plugin/issues/22

Редактировать 2: Я не совсем уверен, в чем проблема, но это больше не проблема, когда я использую код, основанный на этом коде: https://docs.peer5.com/players/hls.js/. Я все еще оставляю этот вопрос, так как я Я уверен, что любой, кто не нашел этот код и знает, как адаптировать его для своего варианта использования, все еще имеет эту проблему, и я хочу, чтобы это было решено на некотором уровне для дальнейшего использования для людей, которые смотрели в тех же местах, что и я. Я отслеживаю все мои оставшиеся без ответа вопросы, поэтому не стесняйтесь по-прежнему предоставлять информацию.

1 Ответ

0 голосов
/ 13 февраля 2019

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Company Cameras</title>
  <script type="text/javascript" src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"> 
</script>
  <script type="text/javascript" 
src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <style>
  body {
    background-color:linen;
  }
  h1 {
    text-align: center;
  }
  .VidSizing {
    width:100%;
    height:100%;
    object-fit: fill;
  }
  </style>
</head>
<body>
  <h1>VIDEO PLAYBACK</h1>
<div id="VideoSpace" style="width:100%;height:85vh; margin:0;background-color: 
#343434;">
  <video id="player1" src="/hls1/test.mp4" class="VidSizing" muted playsinline 
autoplay controls></video>
  </div>
  <script>
  var potato1 = document.getElementById('player1');
        potato1.play();
  </script>
</body>
</html>

Используйте это для своего скрипта, если вам нужна поддержка HLS при указании файла m3u8: 

<script>
  var isMobile = {
     iOS: function() {
       return navigator.userAgent.match(/iPhone|iPad|iPod/i);
      }
};
if (isMobile.iOS()) {
         var potato1 = document.getElementById('player1');
         potato1.play();
 } else {
    if (Hls.isSupported()) {
        var video1 = document.getElementById('player1');
        var player1 = new Hls();
        player1.loadSource('/hls1/stream1.m3u8');
        player1.attachMedia(video1);
        player1.on(Hls.Events.MANIFEST_PARSED, function() {
            video1.play();
        });
    }
}
</script>
...