Hello, I just started looking into my old very well working ui template to try to migrate the functionality to Dashboard-2
The template is capable and used to stream & show video (like rtsp and http) as well as starting actions like taking snapshots
The issue is what needs to be changed? A straight forward copying of code does not work, it was not expected either
I assume it is those parts where I'm using the scope in the javascripts and the ng-click in the html that needs to be replaced somehow. Any suggestions is highly appreciated. If I manage to show rtsp streams in the dashboard-2 in this way would be, well, maybe not a breakthrough but at least interesting
So basically finding typical replacements for:
(function(scope) {
scope.$watch('msg', function(msg) {.........
and in the html part
ng-click="send({payload:action('snapshot?mainview_url'), topic:'Snapshot'})"
The complete dashboard-1 code below
<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript">
hls_m = undefined;
(function(scope) {
scope.$watch('msg', function(msg) {
if(msg.payload.indexOf('goback')>-1) {
window.history.back();
}
if(msg.prev.indexOf('recordings')>-1||msg.prev.indexOf('.mp4')>-1||msg.prev.indexOf('motions')>-1||msg.prev.indexOf('youtube')>-1) {
stopVideos(msg.prev);
}
if (msg.payload.indexOf('snapshots')>-1||msg.payload.indexOf('recordings')>-1||msg.payload.indexOf('motions')>-1) {
// alert('here1');
let all = $( "iframe" );
let ip = location.host.split(':')[0];
all.attr("src", "http://"+ip+msg.url);
if(hls_m!=undefined){hls_m.destroy();}
$("#def_"+scope.$id).hide();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).hide();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).show();
}
if (msg.payload.indexOf('med')<0 && msg.payload.indexOf('default')>-1) {
// alert('here2');
if(hls_m!=undefined){hls_m.destroy();}
let df = $("[title~='Default']");
let ip = location.host.split(':')[0];
df.attr("src", "http://"+ip+msg.url);
$("#def_"+scope.$id).show();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).hide();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).hide();
}
if (msg.payload.indexOf('med')>-1 && msg.payload.indexOf('default')<0) {
// alert('here3');
if(hls_m!=undefined){hls_m.destroy();}
$("#def_"+scope.$id).hide();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).hide();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).hide();
if(msg.url.indexOf('.mp4')>-1){
let med = $("[title~='Main']");
med.attr("src", msg.url);
$("#vid_"+scope.$id).show();
}else{
$("#pic_"+scope.$id).show();
}
}
if (msg.payload.indexOf('cam')>-1 && msg.url.indexOf('.m3u8')<0 && msg.url.indexOf('youtube')<0) {
// alert('here4');
if(hls_m!=undefined){hls_m.destroy();}
$("#def_"+scope.$id).hide();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).show();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).hide();
}
if (msg.url.indexOf('.m3u8')>-1) {
// alert('here5');
if(hls_m!=undefined){hls_m.destroy();}
$("#def_"+scope.$id).hide();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).hide();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).hide();
if(isSafari()){
$("#saf_"+scope.$id).show();
}
if(!isSafari()){
// alert('here6');
$("#hls_"+scope.$id).show();
hls_m = new Hls();
if (Hls.isSupported()) {
let z = $("#hls_"+scope.$id)[0];
// bind them together
hls_m.attachMedia(z);
hls_m.on(Hls.Events.MEDIA_ATTACHED, function () {
hls_m.loadSource(msg.url);
hls_m.on(Hls.Events.MANIFEST_PARSED, function () {
z.play();
});
});
}
}
}
if (msg.url.indexOf('youtube')>-1) {
// alert('here7');
let all = $( "iframe" );
all.attr("src", msg.url);
if(hls_m!=undefined){hls_m.destroy();}
$("#def_"+scope.$id).hide();
$("#pic_"+scope.$id).hide();
$("#str_"+scope.$id).hide();
$("#vid_"+scope.$id).hide();
$("#hls_"+scope.$id).hide();
$("#saf_"+scope.$id).hide();
$("#cap_"+scope.$id).show();
}
});
})(scope);
function isSafari() {
if (/apple/i.test(navigator.vendor)) {
//alert("Safari");
return true;
}else{
return false;
}
}
function stopVideos(prev) {
if(prev.indexOf('recordings')>-1 || prev.indexOf('youtube')>-1) {
// alert('rec or youtube found');
$("iframe").each(function() {
var src= $(this).attr('src');
if(prev.indexOf('youtube')>-1) {
$(this).attr('src','');
}else{
$(this).attr('src',src);
}
});
}
if(prev.indexOf('.mp4')>-1) {
// alert('mp4 found');
$("[title~='Main']").trigger('pause');
}
};
this.scope.action = function(event) { return event; }
this.scope.send({payload:'do_init'});
</script>
<div id="{{'def_'+$id}}">
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<img class="main_monitor" title="Default">
</td>
</tr>
</table>
</center>
</div>
<div id="{{'pic_'+$id}}">
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<img src={{msg.url}}?{{msg._msgid}} class="main_monitor" title="Mediafile">
</td>
</tr>
</table>
</center>
</div>
<div id="{{'str_'+$id}}">
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<img src={{msg.url}}?{{msg._msgid}} class="main_monitor" ng-click="send({payload:action('snapshot?mainview_url'), topic:'Snapshot'})" title="Click for snapshot">
</td>
</tr>
</table>
</center>
</div>
<div id="{{'vid_'+$id}}">
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<video autoplay controls class="main_monitor" title="Main display" type="video/mp4"></video>
</td>
</tr>
</table>
</center>
</div>
<div>
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<video autoplay muted id="{{'hls_'+$id}}" class="main_monitor" ng-click="send({payload:action('snapshot?mainview_url'), topic:'Snapshot'})" title="Playing m3u8, click for snapshot" type="video/mp4"></video>
</td>
</tr>
</table>
</center>
</div>
<div id="{{'saf_'+$id}}">
<center>
<table>
<tr>
<td style="text-align: center; transform:rotate({{msg.rotate}})">
<video autoplay muted src={{msg.url}} class="main_monitor" ng-click="send({payload:action('snapshot?mainview_url'), topic:'Snapshot'})" title="Playing m3u8, click for snapshot" type="video/mp4"></video>
</td>
</tr>
</table>
</center>
</div>
<div id="{{'cap_'+$id}}" class="container">
<center>
<table>
<tr>
<td style="text-align: center">
<iframe class="responsive-iframe" height="400"></iframe>
</td>
</tr>
</table>
</center>
</div>
