node-rtsp-stream-server/index.html

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DEMO node-rtsp-stream-jsmpeg</title>
  <script src="https://jsmpeg.com/jsmpeg.min.js"></script>
  <!-- <script src="../jsmpeg.min.js"></script> -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <style type="text/css">
    html,
    body {

      text-align: center;
    }

    input[type='text'] {
      width: 450px;
    }
  </style>
</head>

<body>
  <div>
    <!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp"  value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> -->
    <span>rtsp : <input type="text" name="rtsp" id="rtsp"
        value="rtsp://admin:yxk63603325@192.168.99.21:554/1/1"></span><br />

    <span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br />
    <canvas id="video-canvas">
    </canvas><br />

    <input type="button" value="Start Stream" onclick="start()">
    <input type="button" value="Close Stream" onclick="closeStream()">
  </div>


  <script type="text/javascript">
    var player

    function closeStream() {
      $.post("http://127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function(result) {
        player.destroy()
      })
    }


    function start() {
      var rstp = $('#rtsp').val()
      var size = $('#size').val()
      $.post("http://127.0.0.1:3000/cameras/", { rtspUrl: rstp, size: size, port: '3000', videoRoute: '1' }, function(result) {
        var url = "ws://127.0.0.1:" + result.port;
        var canvas = document.getElementById('video-canvas');
        let opt = {
          canvas: canvas,
          poster: "0.jpg",
        }
        player = new JSMpeg.Player(url, opt);
      })

    }


  </script>


</body>