Невозможно показать прямую трансляцию RTSP камеры с AngularJS - PullRequest
Новая
       76

Невозможно показать прямую трансляцию RTSP камеры с AngularJS

0 голосов
/ 05 марта 2020

Я разрабатываю веб-приложение, используя angularjs, мне нужно добавить окно, которое показывает потоковую передачу RTSP в реальном времени. Это можно сделать с помощью библиотеки JSMpeg js. На стороне сервера я нашел этот nodejs пример 

Stream = require('node-rtsp-stream')
stream = new Stream({
   name: 'name',
   streamUrl: 'rtsp_url',
   wsPort: 8081,
   ffmpegOptions: { // options ffmpeg flags
      '-stats': '', // an option with no neccessary value uses a blank string
      '-r': 30 // options with required values specify the value after the key
   }
})

на стороне браузера. Сначала я попробовал простую HTML5: 

<html>
<body>
<div>
  <canvas id="canvas"  width="1920" height="1080" style="display: block; width: 40%;"></canvas>
</div>
</body>

<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
   //var ws = new WebSocket('ws://localhost:9999');
    player = new JSMpeg.Player('ws://localhost:9999', {
      canvas: document.getElementById('canvas'), autoplay: true, audio: false, loop: true
    })  
</script>

Эта страница HTML5 работает нормально и Я получил на своей веб-странице прямую трансляцию. После этого я попытался адаптировать этот код HTML к angularJS: я добавил тег canvas в соответствующий файл html: 

<canvas id="canvas"  width="502" height="237" style="display: block; width: 40%;"></canvas>

Затем я попытался использовать контроллер следующим образом: 

var streamingcanvas = document.getElementById("canvas");
let player = new JSMpeg.Player('ws://localhost:8081', {
    canvas: streamingcanvas, autoplay: true, audio: false, loop: true
})

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

что отсутствует в моем коде?

...