Search code examples
javascripthtmlnginxrtmpclappr

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


I'm just starting to get into using clappr myself and am currently trying to use an rtmp stream from an nginx server to test. (https://github.com/clappr/clappr/) and I tried using the demo: (http://clappr.io/demo/) and some code based off of another person's code:

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

But it seems no matter what I do, I can't simply get the html file I make to properly call clappr, is there anything I'm supposed to download or do something special with? According to the github page (first link), it seems like you're literally just supposed to put in the code they give you and it should work, but that didn't work either. Just confused since no one else seems to have had this issue and it just doesn't do anything no matter what example code I put the rtmp stream link in and try, I'm really just trying to see a working example on my PC that I can work off of, any help would be appreciated :)

Edit: I got the base code from the last post on this issue: https://github.com/video-dev/clappr-rtmp-plugin/issues/22

Edit 2: I'm not entirely sure what the issue was, but this is no longer an issue when I use code based off of this code: https://docs.peer5.com/players/hls.js/. I'm still leaving this question up since I'm sure anyone who didn't find this code and know how to adapt it for their use case is still having this issue too and I want this to get resolved on some level for future reference for people who looked in the same places I did, I monitor all my unanswered questions, so feel free to still provide input.


Solution

  • So, the code example they provide is basically useless garbage, here's a working example for those who are curious, this references a specific file:

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

    Use this for your script if you need HLS support when specifying an m3u8 file:

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