Clappr 似乎无法拉取视频（使用 rtmp/nginx）答案

【问题标题】：Clappr seems to be unable to pull video (using rtmp/nginx)Clappr 似乎无法拉取视频（使用 rtmp/nginx）
【发布时间】：2018-09-05 15:17:20
【问题描述】：

我自己刚刚开始使用 clappr，目前正在尝试使用来自 nginx 服务器的 rtmp 流进行测试。 (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 流链接放入什么示例代码并尝试，它都没有做任何事情，我真的只是想在我的 PC 上查看一个工作示例我可以工作，任何帮助将不胜感激:)

编辑：我从上一篇关于这个问题的帖子中获得了基本代码：https://github.com/video-dev/clappr-rtmp-plugin/issues/22

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

【问题讨论】：

标签： javascript html nginx rtmp clappr

【解决方案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>

【讨论】：