Clappr 好像无法拉取视频（using rtmp/nginx）

Question

我自己刚刚开始使用 clappr，目前正在尝试使用来自 nginx 服务器的 rtmp 流进行测试。 (https://github.com/clappr/clappr/) and I tried using the demo: (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 页面（第一个 link），您似乎只是应该输入他们给您的代码，它应该可以工作，但也没有工作。只是感到困惑，因为似乎没有其他人遇到过这个问题，而且无论我将 rtmp 流 link 放入什么示例代码并尝试，它都没有做任何事情，我真的只是想看看一个工作示例在我可以工作的电脑上，任何帮助将不胜感激:)

编辑：我从上次 post 得到了关于这个问题的基本代码：https://github.com/video-dev/clappr-rtmp-plugin/issues/22

编辑 2：我不完全确定问题出在哪里，但是当我使用基于以下代码的代码时，这不再是问题：https://docs.peer5.com/players/hls.js/。我仍然留下这个问题，因为我确信没有找到这段代码并且知道如何根据他们的用例调整它的人仍然有这个问题，我希望这个问题在某种程度上得到解决以供将来参考对于和我在同一个地方看过的人，我会监控我所有未回答的问题，所以请随时提供意见。

Answer 1

所以，他们提供的代码示例基本上是无用的垃圾，这里有一个工作示例供好奇的人使用，它引用了一个特定的文件：

<!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>

如果您在指定 m3u8 文件时需要 HLS 支持，请将此用于您的脚本：

<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>

Clappr 好像无法拉取视频（using rtmp/nginx）

Clappr seems to be unable to pull video (using rtmp/nginx)

html

javascript

nginx

rtmp

clappr