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.
I tried with html5_rtsp_player 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 html5_rtsp_player I lost too much bandwidth, because I need first take video stream to browser and send to streamedian 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.
<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>
Next, I tried to use videogular, but my streams are not working, nothing happened here is the 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"
}
};
}]
);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>Third part plugin I try to use is kurento-one2many-call
When i try to install npm dependency i get
> C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil>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.<anonymous> (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
VLC not working anymore in chrome and firefox like vlc web plugin.
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.
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
