RTSP видео поток в HTML5

Question

Мне нужно реализовать видеопоток RTSP в моем приложении angulajs. Как и все, что мы знаем, RTSP нелегко работает с HTML, нам нужно использовать какой-нибудь плагин. Я пытаюсь с html5_rtsp_player, и это только рабочее решение для меня, но я не могу найти способ сделать четыре представления потока (div), а также потому, что это сервер третьей части, я боюсь, если сервер иногда не работает или меняется что-то и т. д., и я попаду в беду. И с этим html5_rtsp_player я потерял слишком много пропускной способности, потому что мне нужно сначала перевести видеопоток в браузер и отправить на потоковый сервер для конвертации, а после забрать обратно для предварительного просмотра (если я ошибаюсь, пожалуйста, объясните, потому что это мой первый раз что-то сделать с видеопотоком) Код для этого

<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp">
</video>
<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
rtsp">
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket:  
"wss://specforge.com/ws/"});
</script>

Далее я пытаюсь использовать видеогуляр, но мои потоки не работают, ничего не произошло, вот код

'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"
    }
   };
  }]
 );

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

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
 <videogular vg-theme="controller.config.theme.url">
  <vg-media vg-src="controller.config.sources" vg-dash></vg-media>

  <vg-controls>
   <vg-play-pause-button></vg-play-pause-button>
   <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
   <vg-scrub-bar>
    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
   </vg-scrub-bar>
   <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
   <vg-volume>
    <vg-mute-button></vg-mute-button>
    <vg-volume-bar></vg-volume-bar>
   </vg-volume>
   <vg-fullscreen-button></vg-fullscreen-button>
  </vg-controls>

  <vg-overlay-play></vg-overlay-play>
  <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
 </videogular>
</div>
</div>

<script src="https://cdn.dashjs.org/v2.0.0/dash.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/poster/vg-poster.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/dash/vg-dash.js"></script>

Плагин третьей части, который я пытаюсь использовать, это kurento-one2many-call. Когда я пытаюсь установить зависимость от npm, я получаю

C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil> если не определено npm_config_node_gyp (узел "C:\Users\Bozo\AppData\Roaming\node_modules\npm\bin\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js"перестроить) else (перестроить узел"") gyp ERR! Ошибка конфигурации GYR ERR! Ошибка стека: Не удается найти исполняемый файл Python "python", вы можете установить переменную PYTHON env. Гипер ERR! стек в Object.failNoPython (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19) gyp ERR! стек в объекте. (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16) gyp ERR! стек в C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29 gyp ОШИБКА! стек в FSReqWrap.oncomplete (fs.js:123:15) gyp ERR! Система Windows_NT 10.0.16299 gyp ERR! команда "C:\Program Files\nodejs\node.exe" "C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "перестроить" gyp ERR! cwd C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil gyp ERR! узел -v v6.10.3 gyp ERR! node-gyp -v v3.6.2 gyp ERR! не в порядке, нпм ERR! код ELIFECYCLE npm ERR! errno 1 npm ERR! bufferutil@1.2.1 установить: node-gyp rebuild нпм ERR! Статус выхода 1 нпм ERR! нпм ERR! Ошибка при установке сценария bufferutil@1.2.1. нпм ERR! Это, вероятно, не проблема с npm. Вероятно, есть дополнительные выходные данные регистрации. нпм ERR! Полный журнал этого прогона можно найти в: npm ERR! C: \ Users \ Bozo \ AppData \ Roaming \ npm-cache_logs \ 2018-01- 31T11_41_09_765Z-debug.log

VLC больше не работает в Chrome и Firefox, как веб-плагин VLC.

Мой вопрос: может ли кто-нибудь мне помочь, как лучше всего получить поток RTSP в HTML? Есть ли какой-нибудь пример для этого? Мне не нужны элементы управления, только предварительный просмотр потокового видео.

Если это не очень хорошее решение, есть ли какой-нибудь конвертер видео в реальном времени для конвертации RTSP в mp4 или hsl, но со стороны внешнего интерфейса (javascript)? Спасибо