Dashticz IP Cameras - Features, Fixes & Updates

[gielie]

I have a problem with the new way of showing a security cam. In the previous versions I used this code

Code: Select all

buttons.mycamera2 = {width:12, isimage:true, refresh:2500, btnimage: 'http://Admin:[email protected]/tmpfs/auto.jpg',slide:6}

But in the new beta this code doesn't work anymore, I only get an picture and no movie.
When I use the new code it works again but then I can't use the 'slide:6' code to slide on click to a page of my liking
This cod works

Code: Select all

blocks['cam1'] = {
   type: 'camera',
   imageUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
   videoUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
//    slide: 6,		//this piece of code doesn't work.
   refresh: 1000,
   width: 12,
   height: 200,
   
}

Can someone help get my old code working or the new one with the slide effect.

[Lokonli]

I have a problem with the new way of showing a security cam. In the previous versions I used this code

Code: Select all

buttons.mycamera2 = {width:12, isimage:true, refresh:2500, btnimage: 'http://Admin:[email protected]/tmpfs/auto.jpg',slide:6}

But in the new beta this code doesn't work anymore, I only get an picture and no movie.
When I use the new code it works again but then I can't use the 'slide:6' code to slide on click to a page of my liking
This cod works

Code: Select all

blocks['cam1'] = {
   type: 'camera',
   imageUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
   videoUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
//    slide: 6,		//this piece of code doesn't work.
   refresh: 1000,
   width: 12,
   height: 200,
   
}

Can someone help get my old code working or the new one with the slide effect.

I think the old code did not contain a movie but an image that was refreshing every 2.5 seconds. Correct?
In beta I decided to standardize the refresh parameter to be in seconds. So that means you have to change 'refresh:2500' into 'refresh:2' for the old code.

The new camera module however still uses refresh in msec. Yes, somewhat confusing ...
The new camera module is not a button, and doesn't support the slide parameter.

[gielie]

I have a problem with the new way of showing a security cam. In the previous versions I used this code

Code: Select all

buttons.mycamera2 = {width:12, isimage:true, refresh:2500, btnimage: 'http://Admin:[email protected]/tmpfs/auto.jpg',slide:6}

But in the new beta this code doesn't work anymore, I only get an picture and no movie.
When I use the new code it works again but then I can't use the 'slide:6' code to slide on click to a page of my liking
This cod works

Code: Select all

blocks['cam1'] = {
   type: 'camera',
   imageUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
   videoUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
//    slide: 6,		//this piece of code doesn't work.
   refresh: 1000,
   width: 12,
   height: 200,
   
}

Can someone help get my old code working or the new one with the slide effect.

I think the old code did not contain a movie but an image that was refreshing every 2.5 seconds. Correct?
In beta I decided to standardize the refresh parameter to be in seconds. So that means you have to change 'refresh:2500' into 'refresh:2' for the old code.

The new camera module however still uses refresh in msec. Yes, somewhat confusing ...
The new camera module is not a button, and doesn't support the slide parameter.

Yes, the change between ms and s did the trick, thanks a lot.

[Ashitaka]

Hello ;o)

I have a question, I'm not sure if it is a bug or not.

I'm using the camera block.
The block is working well, it shows the camera picture.
When I'm clicking it, it shows a popup with the live feed, this is working too.
I can click a button on the bottom of the live feed to expand/show a sidebar which is showing every camera I have.

Here is my problem:
The picture showing the cameras are not working (inside this sidebar)

<img class="cam-tray-img" src="htt p://10.XXX.XXX.XXX/Streaming/channels/102/picture&d=1590590737504" data-video="http://10.XXX.XXX.XXX/Streaming/channel ... ttppreview" data-mjpeg="true" data-refresh="5000">

the &d=1590590737504 feature is somehow added to the imageUrl I set in the camera block and this is why it is not working.
Is this intended?
I would have expected to eventually have

?t=timestamp

but definitely not

&d=1590590737504

So I Workarounded this bug by adding "?" character at the end of my imageUrl and it solved the problem.

Anyway, big thanks for all the work done so far! Dashticz rocks!

[Lokonli]

Can you post how you defined your block?

[Ashitaka]

Working block (with workaround)

Code: Select all

blocks['cam_stairs'] = {
        type: 'camera',
        imageUrl: 'http://10.XXX.XXX.XXX/Streaming/channels/102/picture?',
        videoUrl: 'http://10.XXX.XXX.XXX/Streaming/channels/102/httppreview',
        refresh: 5000,
        width: 12,
        height: 300
}

Block with problem (without workaround)
Originally (without the ?):

Code: Select all

blocks['cam_stairs'] = {
        type: 'camera',
        imageUrl: 'http://10.XXX.XXX.XXX/Streaming/channels/102/picture',
        videoUrl: 'http://10.XXX.XXX.XXX/Streaming/channels/102/httppreview',
        refresh: 5000,
        width: 12,
        height: 300
}

[clinkadink]

The issue is in js/components/camera.js on line 90.

Replace this ...

Code: Select all

video += '&d=' + Date.now();

With this ...

Code: Select all

video += (video.includes('?') ? '&t=' : '?t=') + Date.now();

Please test and confirm this fixes the issue. Thanks.

[Ashitaka]

Thanks, I'll test that !

Ok, it doesn't work..

<div class="cam-container">
<img class="stream" src="h ttp://xxxx/Streaming/channels/102/httppreview">
<div class="cam-tray shut">
<img class="cam-tray-img"
src="h ttp://xxxx/Streaming/channels/102/picture&d=1590674321001"
data-video="h ttp://xxxx/Streaming/channels/102/httppreview"
data-mjpeg="true"
data-refresh="5000">
</div>
<div class="handle">
<i class="fas fa-angle-double-up"></i>
</div>
</div>

Anyway, I think I've spot where the block is generated:
here was the file : /dashticz/tpl/camera_video.tpl

Code: Select all

        <img class="cam-tray-img" src="{{this.image}}&d={{../dt}}" data-video="{{this.video}}" data-mjpeg="{{this.mjpeg}}" data-refresh="{{refresh}}">

I think the modif would lie here. I try to change it, but I failed to force the cache to renew, so I didn't manage to test it !

[daemonshome]

I do like the idea to have the ip cameras in dashticz, however have difficulties to get it work.

These links are working as expected in the browser, brand: level8 ip camera:

Code: Select all

Picture: http://user:[email protected]/snap.jpg
Video ( vlc, stream ): rtsp://user:[email protected]:554/Streaming/Channels/101/

Tried several variations, without success.

Code: Select all

blocks['cam1'] = {
   type: 'camera'
   imageUrl: 'http://user:[email protected]/snap.jpg',
   videoUrl: 'rtsp://user:[email protected]:554/Streaming/Channels/101/', 
   refresh: 1000,
   width: 6,
   height: 300
}

Any hints to try? Thanks

[clinkadink]

Re the imageUrl, if this does not work, try using your Domoticz IP camera url.
Re the videoUrl, RTSP will not work. See post #1 for more info. This needs to be an http url.

[daemonshome]

I see,
quite sad as per the rtsp . I dont have any other oprion for cam video, just rtsp stream. Any idea or future request to have rtsp available to use?

What is the domoticz ip camera url exactly? I have added the cameras to domoticz, same details as posted above, should i see a separate link somewhere?

[clinkadink]

With regards to RTSP, that's a limitation of browsers, not Domoticz or Dashticz. The only way (that I know of) to view RTSP streams in a browser is to convert RTSP stream to WebRTC stream first on the server, then view the WebRTC stream in the browser. Up until a few years ago, it was possible to use Active X plugins, such as the VLC browser plugin - but these plugins are no longer supported/permitted. Like you have mentioned, VLC locally will play RTSP fine.

If you have added your camera to Domoticz, then you should be able to access it with this url:

Code: Select all

http://_Domoticz_IP_and_Port/camsnapshot.jpg?idx=1    // for the first camera.

[Trigun]

With regards to RTSP, that's a limitation of browsers, not Domoticz or Dashticz. The only way (that I know of) to view RTSP streams in a browser is to convert RTSP stream to WebRTC stream first on the server, then view the WebRTC stream in the browser. Up until a few years ago, it was possible to use Active X plugins, such as the VLC browser plugin - but these plugins are no longer supported/permitted. Like you have mentioned, VLC locally will play RTSP fine.

If you have added your camera to Domoticz, then you should be able to access it with this url:

Code: Select all

http://_Domoticz_IP_and_Port/camsnapshot.jpg?idx=1    // for the first camera.

I also have one RTSP camera which I’ve added to zoneminder. Zoneminder converts it to mjpeg stream and I’ve added that stream to both domoticz as well as dashticz.
Works great!


Sent from my iPhone using Tapatalk

[clinkadink]

I also have one RTSP camera which I’ve added to zoneminder. Zoneminder converts it to mjpeg stream and I’ve added that stream to both domoticz as well as dashticz.
Works great!

Yes, this is how I convert my RTSP stream, although I use Xeoma to convert the stream. I then use the mjpeg urls in Dashticz. Unlike the Domoticz approach, this is actually a video stream. Whereas Domoticz refreshes an image every n milliseconds.

[daemonshome]

With regards to RTSP, that's a limitation of browsers, not Domoticz or Dashticz. The only way (that I know of) to view RTSP streams in a browser is to convert RTSP stream to WebRTC stream first on the server, then view the WebRTC stream in the browser. Up until a few years ago, it was possible to use Active X plugins, such as the VLC browser plugin - but these plugins are no longer supported/permitted. Like you have mentioned, VLC locally will play RTSP fine.

If you have added your camera to Domoticz, then you should be able to access it with this url:

Code: Select all

http://_Domoticz_IP_and_Port/camsnapshot.jpg?idx=1    // for the first camera.

I also have one RTSP camera which I’ve added to zoneminder. Zoneminder converts it to mjpeg stream and I’ve added that stream to both domoticz as well as dashticz.
Works great!


Sent from my iPhone using Tapatalk

Have tried sometime in the past year, but my experiance is that zoneminder uses a lots of resources in my nas system.

[Ierlandfan]

When I use the "onpopup" function my camera does not show anything. It keeps saying "loading" and gives a white screen. I tried Motioneye url (works inside browser) and domoticz url (Also works inside browser) Any ideas?

[clinkadink]

If I may take the liberty to add a suggestion to you great work, I would say; it would be cool to have one big picture that rotates all the cameras every X seconds with a small preview of all camera's in the bottom. if you click on the specific (rotated) image you will see the view you have already created. Nevertheless fantastic setup and definitly something I've been waiting for! Cheers.

I have been working on this for the past few days. It required a complete rewrite of the camera component. Basically, I have implemented a camera carousel, every n seconds it slides to the next camera (in the same viewer). I have improved the camera tray at the bottom of the screen too. Before, each image was a static snapshot, now they are live (refreshing every n seconds). The camera block has also been updated to allow multiple cameras to be added to a single block. This cuts down on a lot of code in CONFIG.js. Obviously, one camera per block is still permitted.

Its in testing at the moment. I hope to release this very soon.

[clinkadink]

When I use the "onpopup" function my camera does not show anything. It keeps saying "loading" and gives a white screen. I tried Motioneye url (works inside browser) and domoticz url (Also works inside browser) Any ideas?

Sorry, I do not know what the "onpopup" function is. Please can you explain?

[Ierlandfan]

Sure! Whenever switch 338 changes to "On" (And only to On) a popup will show the videostream of the camera. It's a built-in gem of Dashticz.

Here's the block:

Code: Select all

/* Camera popup when roomswitch is triggered */
blocks[338] = {}
blocks[338]['openpopupOn'] = {}
blocks[338]['openpopupOn']['url'] = 'http://192.168.1.102:9999';
blocks[338]['openpopupOn']['auto_close'] = 1200; //seconds
blocks[338]['openpopupOn']['framewidth']= 600; //specific width of the frame
blocks[338]['openpopupOn']['frameheight']= 500;
blocks[338]['openpopupOn']['auto_close'] = 1200; //seconds

[clinkadink]

Sure! Whenever switch 338 changes to "On" (And only to On) a popup will show the videostream of the camera. It's a built-in gem of Dashticz.

Here's the block:

Spoiler: show

Code: Select all

/* Camera popup when roomswitch is triggered */
blocks[338] = {}
blocks[338]['openpopupOn'] = {}
blocks[338]['openpopupOn']['url'] = 'http://192.168.1.102:9999';
blocks[338]['openpopupOn']['auto_close'] = 1200; //seconds
blocks[338]['openpopupOn']['framewidth']= 600; //specific width of the frame
blocks[338]['openpopupOn']['frameheight']= 500;
blocks[338]['openpopupOn']['auto_close'] = 1200; //seconds

I see. That isn't the IP camera component, so i can't help sorry. Perhaps its a CORS or cache issue? I also note that your auto-close is set twice and to 20 minutes, I am not sure if that is intentional.