Dashticz IP Cameras - Features, Fixes & Updates

[Ierlandfan]

Code: Select all

GET http://192.168.1.102:9999/?t=1591347373278 net::ERR_CONNECTION_TIMED_OUT :9999/?t=1591347373278:1 
Image (async)
attr @ bundle.js?t=2:37
access @ bundle.js?t=2:37
attr @ bundle.js?t=2:37
reloadImage @ js/components/camera.js:72
(anonymous) @ js/components/camera.js:41

It takes about 6 seconds (don't know why) in a browser for the page to load so maybe the time-out is shorter than establishing a connection?

[clinkadink]

What happens when you paste "http://192.168.1.102:9999/?t=1591347373278" into a browser?
I am still baffled as to why the error log references the camera.js, as this is specifically for IP camera blocks, which this isn't.

[Ierlandfan]

What happens when you paste "http://192.168.1.102:9999/?t=1591347373278" into a browser?
I am still baffled as to why the error log references the camera.js, as this is specifically for IP camera blocks, which this isn't.

http://192.168.1.102:9999/?t=1591347373278
Works.

True about the IP camera block. The original RTSP stream is transcoded by Motioneye to an mjpeg stream. Maybe that's why Dashticz is using the camera.js?

[clinkadink]

True about the IP camera block. The original RTSP stream is transcoded by Motioneye to an mjpeg stream. Maybe that's why Dashticz is using the camera.js?

No, because the camera component will only work with blocks containing:

Code: Select all

type: 'camera',

I am just about to release an update to the component, so maybe it is best to try with that.

[clinkadink]

The camera component has received a major update today. This inevitably includes breaking changes. It is now available in the latest beta for anyone who wishes to test the new features.

Changes are as follows:

• Refresh: [***BREAKING CHANGE***] the "refresh" parameter has been standardised to seconds, not milliseconds. Please ensure you update your existing camera blocks.

  Spoiler: show

  For example, this:

  Code: Select all

  refresh: 5000,

  Changes to this:

  Code: Select all

  refresh: 0.5,

• Carousel: A carousel has been implemented, allowing the the camera streams to slide from one to another automatically. You can set the time to wait before sliding the streams using slidedelay parameter, which is measured in seconds. For example:

  Code: Select all

  slidedelay: 5,

  This will wait 5 seconds before sliding to the next camera stream. The default is 3 seconds. If you don't want this feature, simply set it to 0. You only have to set this parameter on one of your camera blocks to set the camera carousel.
  
  

• Title: You can now display the name of the camera in the top right of camera stream. It also shows on each camera in the camera tray. This is set using the title paramter in the camera block. For example:

  Code: Select all

  title: "Taw Hill, West View",

• Camera Tray: The camera tray (at the bottom of the carousel) has been updated. Images are no longer static, they now refresh every n seconds (as specified by the block refresh parameter).
  
  

• Tray Timeout: You can now control how long the camera tray stays open, before it automatically shuts. This is using the new traytimeout parameter, measured in seconds. The default traytimeout is set to 5 seconds. Note, this timeout resets if you select any of the cameras in the tray. For example:

  Code: Select all

  traytimeout: 10,

  This means the camera component will wait 10 seconds, if that has been no camera selected, before closing the camera tray.

• Multicam: The camera block has also being reconfigured to allow multiple cameras to be added to the same block. This results in a reduction in code in your CONFIG.js, and improves maintenance and reuse. For me, I found that there is a lot of duplication between each camera block. With this new feature, it means you only have to set this once. Example of single camera block with multiple camera streams:

  Spoiler: show

  Code: Select all

  blocks["cameras"] = {
    type: "camera",  
    cameras: [
      {
        title: "Taw Hill, West View",
        imageUrl: "http://192.168.1.123:4567/videoQW.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoQW.mjpg?video",
      },
      {
        title: "Taw Hill, North View",
        imageUrl: "http://192.168.1.123:4567/videoQN.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoQN.mjpg?video",
      },
      {
        title: "Front Garden",
        imageUrl: "http://192.168.1.123:4567/videoFG.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoFG.mjpg?video",
      },
      {
        title: "Side Path",
        imageUrl: "http://192.168.1.123:4567/videoSP.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoSP.mjpg?video",
      },
      {
        title: "Rear Garden - Left View",
        imageUrl: "http://192.168.1.123:4567/videoRL.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoRL.mjpg?video",
      },
      {
        title: "Rear Garden - Right View",
        imageUrl: "http://192.168.1.123:4567/videoRR.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoRR.mjpg?video",
      },
      {
        title: "Hall & Front Door",
        imageUrl: "http://192.168.1.123:4567/videoHL.mjpg?image",
        videoUrl: "http://192.168.1.123:4567/videoHL.mjpg?video",
      },
    ],
    width: 6,
    height: 250,
    refresh: 0.5,			// seconds to refresh the image [***BREAKING CHANGE***]
    traytimeout: 3,		// seconds to keep the camera tray open
    slidedelay: 3,		// seconds before sliding to the next camera
    forcerefresh: 1,		// caching-prevention mechanism of the images
  };

  Note: this method will automatically add a new camera block (thumb) to the same column. If you want to place your camera blocks over multiple columns, you will need to use separate camera blocks. You can use either method or both. I.e. a single camera block with multiple streams and/or separate camera blocks.

• New parameters: The following parameters are now available on the camera block:

  Code: Select all

    
    cameras: [],                  // optional array to add multiple cameras
    refresh: 0.5,			// seconds to refresh the image [***BREAKING CHANGE***]
    traytimeout: 3,		// seconds to keep the camera tray open (default is 5)
    slidedelay: 3,		// seconds before sliding to the next camera (0 = no slide, default is 3)
    forcerefresh: 1,		// caching-prevention mechanism of the images (default is 1) 

  Further information on forcerefresh can be found here: https://dashticz.readthedocs.io/en/beta ... rcerefresh
  
  
  
  Please remember, the videoUrl parameter should only be set if it is an MPJEG camera stream. If it isn't, only set the imageUrl. The camera component will then refresh the image every n seconds. This can be camera's own url or the Domoticz camera url. Camera streams don't always place nicely in Dashticz. In this case, you can try to increase the refresh, or adjust the forcerefresh value. And obviously, ensure you can access the url and correctly display the stream from a browser first.
  
  This is a significant update to the camera component. As such, there maybe bugs. If you find any, please let me know - I will try and help where and when possible

[lzwfkv]

Hello @clinkadink,
just updated and i must say this is really a great release, congratulations very good work with this new camera module.
I haven't found any bug so far, including the timestamps appended to the video URL in former releases which prevented my camera from loading them. Also, the camera block is now flexible and reach of useful features that are appreciated.
Just one important thing:
we haven't got your plex.js viewtopic.php?f=67&t=31607&p=247905#p247916 module (yet?) , therefore with the row in dashticz.js (in bold) that i commented out below as a temporary workaround:
'calendar',
'dial',
// 'plex'
];
dashticz won't start at all. In order to help a little other users who may face it, a simple and safer workaround would also be to create a fake/empty plex.js file in <dashticz path>/js/components folder to let dashticz start.

Thank you again for your original contributions to make dashticz even better.

---EDIT---: OK nevermind, the bug above was already fixed while i was writing this, with a new repo update .

[clinkadink]

Just one important thing:
we haven't got your plex.js viewtopic.php?f=67&t=31607&p=247905#p247916 module (yet?) , therefore with the row in dashticz.js (in bold) that i commented out below as a temporary workaround:
'calendar',
'dial',
// 'plex'
];
dashticz won't start at all. In order to help a little other users who may face it, a simple and safer workaround would also be to create a fake/empty plex.js file in <dashticz path>/js/components folder to let dashticz start.

Thanks for testing, and the feedback
Yes, that was my fault
I have fixed the latest beta already. Apologies!

[janumix]

Hi

The newest version. Clicking on block with camera thumbnail results with no view and following error code:

Code: Select all

&d=:1 GET http://192.168.100.180/dashticz/&d= 404 (Not Found)
Image (async)
buildFragment @ bundle.js?t=2:37
domManip @ bundle.js?t=2:37
append @ bundle.js?t=2:37
(anonymous) @ js/components/camera.js:261
mightThrow @ bundle.js?t=2:37
B @ bundle.js?t=2:37
setTimeout (async)
(anonymous) @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
Deferred.jQuery.each.b.<computed> @ bundle.js?t=2:37
load @ bundle.js?t=2:102
(anonymous) @ bundle.js?t=2:102
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
done @ bundle.js?t=2:37
(anonymous) @ bundle.js?t=2:37
load (async)
send @ bundle.js?t=2:37
ajax @ bundle.js?t=2:37
load @ bundle.js?t=2:102
(anonymous) @ js/components/camera.js:259
dispatch @ bundle.js?t=2:37
F.handle @ bundle.js?t=2:37
bundle.js?t=2:37 jQuery.Deferred exception: Cannot read property 'refresh' of undefined TypeError: Cannot read property 'refresh' of undefined
    at Object.setStream (js/components/camera.js:171:35)
    at js/components/camera.js:272:25
    at mightThrow (http://192.168.100.180/dashticz/dist/bundle.js?t=2:37:27558)
    at B (http://192.168.100.180/dashticz/dist/bundle.js?t=2:37:27939) undefined   

block definition:

Code: Select all

blocks['kam_pld'] = {
   type: 'camera',
   imageUrl: 'http://192.168.100.32:8080/shot.jpg',
   refresh: 1,
   width: 6,
   height: 100
}

Version before major update worked good (with some issues according to random view switching mentioned abt. month ago).
What am I doing wrong ?

BR
Janusz

[KillerBENL]

Hello,

When I use the latest version and multicam in the config the width is not working.
It always uses width 6, also if I change it to 12 or 3.
What am I doing wrong?

[daemonshome]

Hi All,

I didnt respond for the help above, took some time to investigate my issues. Thanks again.
I do undarstand rtsp is not available, hence have to figure out the mjpeg links for the cams, will take some time...
Few notes below, if some can clarify it will be welcome from my side.

Meanwhile at least i decided to use the domoticz image, at least for 1fps.

blocks['cam1'] = {
type: 'camera',
imageUrl: 'http://192.168.1.100:88/camsnapshot.jpg?idx=2',
//videoUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
refresh: 1,
width: 6
}

The interesting point here: I did not receive any picture on idx=1, just starting from 2. Pictures seems okay.
However, if i click the carusel in the bottom-midle, nothing happens, just seems the screen froze-need to refresh the hole browser page.If video is not available, maybe the carusel can be switched off? or show the image in bigger size?

Next one is another camera, which is comming from raspberrypi, hosting by mjpeg-streamer.
Tried some variations, without success:
The following links working good in the browser, but not in dashticz.

blocks['cam10'] = {
type: 'camera',
imageUrl: 'http://admin:[email protected]:88?action=snapshot',
videoUrl: 'http://admin:[email protected]:88?action=stream',
refresh: 1,
width: 6
}

Any addvice will be appreciated

[clinkadink]

Hi

The newest version. Clicking on block with camera thumbnail results with no view and following error code:

Spoiler: show

Code: Select all

&d=:1 GET http://192.168.100.180/dashticz/&d= 404 (Not Found)
Image (async)
buildFragment @ bundle.js?t=2:37
domManip @ bundle.js?t=2:37
append @ bundle.js?t=2:37
(anonymous) @ js/components/camera.js:261
mightThrow @ bundle.js?t=2:37
B @ bundle.js?t=2:37
setTimeout (async)
(anonymous) @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
Deferred.jQuery.each.b.<computed> @ bundle.js?t=2:37
load @ bundle.js?t=2:102
(anonymous) @ bundle.js?t=2:102
fire @ bundle.js?t=2:37
fireWith @ bundle.js?t=2:37
done @ bundle.js?t=2:37
(anonymous) @ bundle.js?t=2:37
load (async)
send @ bundle.js?t=2:37
ajax @ bundle.js?t=2:37
load @ bundle.js?t=2:102
(anonymous) @ js/components/camera.js:259
dispatch @ bundle.js?t=2:37
F.handle @ bundle.js?t=2:37
bundle.js?t=2:37 jQuery.Deferred exception: Cannot read property 'refresh' of undefined TypeError: Cannot read property 'refresh' of undefined
    at Object.setStream (js/components/camera.js:171:35)
    at js/components/camera.js:272:25
    at mightThrow (http://192.168.100.180/dashticz/dist/bundle.js?t=2:37:27558)
    at B (http://192.168.100.180/dashticz/dist/bundle.js?t=2:37:27939) undefined   

block definition:

Code: Select all

blocks['kam_pld'] = {
   type: 'camera',
   imageUrl: 'http://192.168.100.32:8080/shot.jpg',
   refresh: 1,
   width: 6,
   height: 100
}

Version before major update worked good (with some issues according to random view switching mentioned abt. month ago).
What am I doing wrong ?

Apologies for the delay, I have been tied up with work. Do you have one camera block or several? If several, does this happen with all camera blocks or just one? Please can you try this block just to rule something out?

Spoiler: show

Code: Select all

blocks['kam_pld'] = {
    type: 'camera',
    cameras: [{
        title: "Kam PLD",
        imageUrl: 'http://192.168.100.32:8080/shot.jpg'
    }],
    refresh: 1,
    width: 6,
    height: 100
}

Thanks

[clinkadink]

When I use the latest version and multicam in the config the width is not working.
It always uses width 6, also if I change it to 12 or 3.
What am I doing wrong?

Good spot. I have found the issue and will fix asap. Apologies, my mistake

[clinkadink]

Few notes below, if some can clarify it will be welcome from my side.
Meanwhile at least i decided to use the domoticz image, at least for 1fps.

Spoiler: show

blocks['cam1'] = {
type: 'camera',
imageUrl: 'http://192.168.1.100:88/camsnapshot.jpg?idx=2',
//videoUrl: 'http://Admin:[email protected]/tmpfs/auto.jpg',
refresh: 1,
width: 6
}

The interesting point here: I did not receive any picture on idx=1, just starting from 2. Pictures seems okay.
However, if i click the carusel in the bottom-midle, nothing happens, just seems the screen froze-need to refresh the hole browser page.If video is not available, maybe the carusel can be switched off? or show the image in bigger size?

Do you mean the carousel, with the left and right arrows, or the tray? The tray does not use video. It only uses image refresh every n seconds, whatever your 'refresh' parameter is set to. If your image is shown, and refreshes on the Dashticz screen, it should also refresh in your tray, as it is exactly the same code. When you click an image in the tray, it will launch that in the carousel. If you have MJPEG streams, it will play fullscreen video. If you don't, it will just refresh the image (like in the tray and the Dashticz home screen). What hardware are you using? How many cameras do you have? Is it happening with all cameras, or just one?

Next one is another camera, which is comming from raspberrypi, hosting by mjpeg-streamer.
Tried some variations, without success:
The following links working good in the browser, but not in dashticz.

Spoiler: show

blocks['cam10'] = {
type: 'camera',
imageUrl: 'http://admin:[email protected]:88?action=snapshot',
videoUrl: 'http://admin:[email protected]:88?action=stream',
refresh: 1,
width: 6
}

Any addvice will be appreciated

Unfortunately this is known challenge with cameras, especially in Dashticz. I have cameras that work fine in the browser, but will not work in Dashticz. I do not know if its a CORS issue or an authentication problem. I have added a forcerefresh setting in the last update, if you haven't tried it, give it a go. I do sympathise, and will keep trying to find out "why" we have issues with camera streams.

Cheers

[repoman]

Hi here,

Finally upgraded to Dashticz 3.5 master to try this great looking new module, but I get no image at all.

The block code is:

Spoiler: show

blocks["cameras"] = {
type: "camera",
cameras: [
{
title: "Taw Hill, West View",
imageUrl: "http://192.168.XX.XX/axis-cgi/jpg/image.cgi",
// videoUrl: "http://192.168.XX.XX/axis-cgi/jpg/image.cgi",
},
{
title: "Taw Hill, North View",
imageUrl: "http://192.168.XX.XX:88/cgi-bin/CGIProx ... XX&pwd=XXr",
// videoUrl: "http://192.168.XX.XX:88/cgi-bin/CGIProx ... =XX&pwd=XX",
},
{
title: "Front Garden",
imageUrl: "http://192.168.XX.XX:88/cgi-bin/CGIProx ... =XX&pwd=XX",
// videoUrl: "http://192.168.XX.XX:88/cgi-bin/CGIProx ... =XX&pwd=XX",
},
],
width: 6,
height: 250,
refresh: 0.5, // seconds to refresh the image [***BREAKING CHANGE***]
traytimeout: 3, // seconds to keep the camera tray open
slidedelay: 3, // seconds before sliding to the next camera
forcerefresh: 1, // caching-prevention mechanism of the images
};

The collum code is:

Spoiler: show

columns[11] = {}
columns[11]['blocks'] = [frames.log3,'cameras']
columns[11]['width'] = 4;

After that I tried using a block for 1 camera but still just an empty screen:

Spoiler: show

blocks['cam_stairs'] = {
type: 'camera',
imageUrl: 'http://192.168.90.20:88/cgi-bin/CGIProx ... d=C4/fYkBr',
refresh: 5000,
width: 12,
height: 300
}

Spoiler: show

columns[22] = {}
columns[22]['blocks'] = ['cam_stairs']
columns[22]['width'] = 12;

For now I'm still using the "old" buttoms.cameraX which are still working...

Am I missing something?

Thnx,
Pascal

[clinkadink]

After that I tried using a block for 1 camera but still just an empty screen:

Code: Select all

blocks['cam_stairs'] = {
        type: 'camera',
        imageUrl: 'http://192.168.90.20:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=repoman&pwd=C4/fYkBr',
        refresh: 5000,
        width: 12,
        height: 300
}

Am I missing something?

The refresh has changed from milliseconds to seconds. So 5000 would now equate to the image refreshing every 1 hour and 23 minutes.

As mentioned in several posts of this thread, some cameras native urls work, some don't. I cannot explain why. In this case, I would recommend trying the Domoticz camera url - if you have added the camera to Domoticz.

[repoman]

Thank you for your quick reply. I've read it some posts earlier.

But there is nothing to be seen. Dashticz is loading but no "cameras"
(the button.cam still works)

Might it be that this module is not working in "stable" version?

Can try the beta tomorrow..

[clinkadink]

Thank you for your quick reply. I've read it some posts earlier.

But there is nothing to be seen. Dashticz is loading but no "cameras"
(the button.cam still works)

Might it be that this module is not working in "stable" version?

Can try the beta tomorrow..

The beta is the same as the master version, as the current master was only released a few days ago. It will be identical with regards to the camera module.

- Do you have your cameras added to Domoticz? If so, have you tried that url?
- Did you amend your refresh from 5000 to 1 (for example)?
- Are there any errors in DevTools? Press F12 on the keyboard, then copy any errors back here.

[repoman]

Ok, changed the block as follows:


blocks['cam_stairs'] = {
type: 'camera',
imageUrl: 'http://192.168.90.10:8080/camsnapshot.jpg?idx=9',
refresh: 1,
width: 12,
height: 300
}

column section still:

columns[22] = {}
columns[22]['blocks'] = ['cam_stairs']
columns[22]['width'] = 12;

But still a blanco screen, only

Console:

A cookie associated with a cross-site resource at http://192.168.90.20/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

VM1192:116 Error in response from calendar with icalurl http://192.168.90.10/repochalet/dashtic ... /basic.ics

(calendar is not working anymore, traffic map also stopped working, strange..)

In network section I don't see a request to: http://192.168.90.10:8080/camsnapshot.jpg?idx=9

The (Foscam) camera's are working in Domoticz and in Dashticz as a button..

Dashticz settings/info says I'm running 2020.2, 3.5 master, Python 3.5.3, PHP 7.3.12, dzVents 3.0.2

Don't even see a frame or something, just background and title/header.

Any suggestions?

[clinkadink]

Ok, changed the block as follows:


blocks['cam_stairs'] = {
type: 'camera',
imageUrl: 'http://192.168.90.10:8080/camsnapshot.jpg?idx=9',
refresh: 1,
width: 12,
height: 300
}

column section still:

columns[22] = {}
columns[22]['blocks'] = ['cam_stairs']
columns[22]['width'] = 12;

But still a blanco screen, only

Console:

A cookie associated with a cross-site resource at http://192.168.90.20/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

VM1192:116 Error in response from calendar with icalurl http://192.168.90.10/repochalet/dashtic ... /basic.ics

(calendar is not working anymore, traffic map also stopped working, strange..)

In network section I don't see a request to: http://192.168.90.10:8080/camsnapshot.jpg?idx=9

The (Foscam) camera's are working in Domoticz and in Dashticz as a button..

Dashticz settings/info says I'm running 2020.2, 3.5 master, Python 3.5.3, PHP 7.3.12, dzVents 3.0.2

Don't even see a frame or something, just background and title/header.

Any suggestions?

Did you try forcerefresh parameter? Other than that, I am out of ideas. I have changed all my camera urls to use the Domoticz ones, and it works fine. I see no errors in the console. It is clean. From what I can tell, there is some network, CORS issue going on. I am running the latest beta and have no such issue. So perhaps it is local to you?

Lokonli is our in-house network guru, he maybe able provide better info regarding your network issues.

[clinkadink]

Hello,

When I use the latest version and multicam in the config the width is not working.
It always uses width 6, also if I change it to 12 or 3.
What am I doing wrong?

OK, should now be fixed in the latest beta.