title: RTSP video stream to HTML5
body: <p>I need to implement RTSP video stream to my angulajs app. 
  Like all we know, RTSP does not work easy with HTML, we need to use some plugin.</p>
  
  <p>I tried with <a href="https://github.com/Streamedian/html5_rtsp_player" rel="nofollow noreferrer">html5_rtsp_player</a> and this is only working solution for me, but I cannot find a way how to make four stream views (div), and also because this is third part server, I'm scared if the server is sometimes down or change something etc, and I will get in trouble and with this <strong>html5_rtsp_player</strong> I lost too much bandwidth, because I need first take video stream to browser and send to <a href="https://streamedian.com/" rel="nofollow noreferrer">streamedian</a> server to convert, and after take back to show preview (if I'm wrong, please explain to because this is my first time to do something with video stream)
  Code for this is as follows.</p>
  
  <pre><code>&lt;video id="test_video" controls autoplay&gt;
  &lt;source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp"&gt;
  &lt;/video&gt;
  &lt;video id="test_video" controls autoplay&gt;
  &lt;source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
  rtsp"&gt;
  &lt;/video&gt;
  &lt;script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
  beta.2/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;script src="streamedian.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var p = Streamedian.player('test_video', {socket:  
  "wss://specforge.com/ws/"});
  &lt;/script&gt;
  </code></pre>
  
  <p>Next, I tried to use <strong>videogular</strong>, but my streams are not working, nothing happened here is the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  angular.module('myApp',
    [
     "ngSanitize",
     "com.2fdevs.videogular",
     "com.2fdevs.videogular.plugins.controls",
     "com.2fdevs.videogular.plugins.overlayplay",
     "com.2fdevs.videogular.plugins.poster",
     "com.2fdevs.videogular.plugins.dash"
    ]
   )
   .controller('HomeCtrl',
    ["$sce", function ($sce) {
     this.config = {
      sources: [
       {src: "rtsp://xx.xx.xx.xx:xxxx/user=xx_password=xxxx_channel=1_stream=0.sdp?real_stream"}
      ],
      theme: {
       url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
      },
      plugins: {
       poster: "http://www.videogular.com/assets/images/videogular.png"
      }
     };
    }]
   );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
   margin: 0;
   padding: 0;
  }
  
  .videogular-container {
   width: 100%;
   height: 320px;
   margin: auto;
   overflow: hidden;
  }
  
  @media (min-width: 1200px) {
   .videogular-container {
    width: 1170px;
    height: 658.125px;
   }
  
   .videogular-container.audio {
    width: 1170px;
    height: 50px;
   }
  }
  
  @media (min-width: 992px) and (max-width: 1199px) {
   .videogular-container {
    width: 940px;
    height: 528.75px;
   }
  
   .videogular-container.audio {
    width: 940px;
    height: 50px;
   }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
   .videogular-container {
    width: 728px;
    height: 409.5px;
   }
  
   .videogular-container.audio {
    width: 728px;
    height: 50px;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-app="myApp"&gt;
  &lt;div ng-controller="HomeCtrl as controller" class="videogular-container"&gt;
   &lt;videogular vg-theme="controller.config.theme.url"&gt;
    &lt;vg-media vg-src="controller.config.sources" vg-dash&gt;&lt;/vg-media&gt;
  
    &lt;vg-controls&gt;
     &lt;vg-play-pause-button&gt;&lt;/vg-play-pause-button&gt;
     &lt;vg-time-display&gt;{{ currentTime | date:'mm:ss':'+0000' }}&lt;/vg-time-display&gt;
     &lt;vg-scrub-bar&gt;
      &lt;vg-scrub-bar-current-time&gt;&lt;/vg-scrub-bar-current-time&gt;
     &lt;/vg-scrub-bar&gt;
     &lt;vg-time-display&gt;{{ timeLeft | date:'mm:ss':'+0000' }}&lt;/vg-time-display&gt;
     &lt;vg-volume&gt;
      &lt;vg-mute-button&gt;&lt;/vg-mute-button&gt;
      &lt;vg-volume-bar&gt;&lt;/vg-volume-bar&gt;
     &lt;/vg-volume&gt;
     &lt;vg-fullscreen-button&gt;&lt;/vg-fullscreen-button&gt;
    &lt;/vg-controls&gt;
  
    &lt;vg-overlay-play&gt;&lt;/vg-overlay-play&gt;
    &lt;vg-poster vg-url='controller.config.plugins.poster'&gt;&lt;/vg-poster&gt;
   &lt;/videogular&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdn.dashjs.org/v2.0.0/dash.all.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/videogular@2.1.2/dist/poster/vg-poster.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/videogular@2.1.2/dist/dash/vg-dash.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Third part plugin I try to use is <strong>kurento-one2many-call</strong>
  When i try to install <code>npm</code> dependency i get </p>
  
  <pre><code>&gt; C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil&gt;if not defined npm_config_node_gyp (node "C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
  gyp ERR! configure error
  gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
  gyp ERR! stack     at Object.failNoPython (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
  gyp ERR! stack     at Object.&lt;anonymous&gt; (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
  gyp ERR! stack     at C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
  gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
  gyp ERR! System Windows_NT 10.0.16299
  gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Bozo\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
  gyp ERR! cwd C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil
  gyp ERR! node -v v6.10.3
  gyp ERR! node-gyp -v v3.6.2
  gyp ERR! not ok
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! bufferutil@1.2.1 install: `node-gyp rebuild`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the bufferutil@1.2.1 install script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:\Users\Bozo\AppData\Roaming\npm-cache\_logs\2018-01-
  31T11_41_09_765Z-debug.log
  </code></pre>
  
  <p>VLC not working anymore in chrome and firefox like vlc web plugin.</p>
  
  <p>My question is, can someone help me, what is the best way to get RTSP stream in HTML? Is there some example for this? I don't need any controls, only stream video preview. </p>
  
  <p>If this is not good solution, is there some live video converter for live convert RTSP to mp4 or hls, but from frontend side (javascript)? Thank you</p>