Dashticz IP Cameras - Features, Fixes & Updates

[clinkadink]

So this is how it works for my Hikvision IP cameras, DS-2CD2142FWD-I, firmware v5.5.0 build 170725.

If I paste any of my urls into a browser, I can use the old (less secure) method, by prefixing the url with my credentials. I.e. this will work in a browser:

Code: Select all

http://username:[email protected]/Streaming/Channels/102/picture

However, if I try to use the same url as above (with prefixed credentials) in any system (including Dashticz) it will not work.
I believe this because it is basic authentication over http, which is a no-no, especially when not called directly by you.

However, the following method does work (for me) via Dashticz (and most other locally hosted systems):

Code: Select all

http://192.168.1.99/Streaming/Channels/102/picture?user=username&pwd=password

As for the MJPEG url, this what I have found out - it may be wrong, and the information may have changed. Please check for yourself.

• MJPEG is only enabled on models with firmware above v4 (which is most nowadays).

• I have only managed to display the substream (aka channel 2 or 102), not the main stream (channel 1 or 101). Even if I put 101 in the url, it will still display the substream (which is lower resolution).

• You need to change the substream video encoding to MJPEG on the camera. Image > Video & Audio > Stream Type = "Sub Stream", Video Encoding Type = "M_JPEG" > Save.

I am using the above settings for my 8 x Hikvision cameras, which is what you can see in the earlier posts. I have included one of my camera blocks below, with the Hikvision urls, both the image (picture) and the video (httppreview).

Code: Select all

blocks['camera_1'] = {
	type: 'camera',
	imageUrl: 'http://192.168.1.99/Streaming/Channels/102/picture?user=username&pwd=password',
	videoUrl: 'http://192.168.1.99/Streaming/Channels/102/httppreview?user=username&pwd=password',
	refresh: 3000,
	width: 6,
	height: 300
}

As a result, my camera image is updated every 3 seconds in the block, but when I click on it, I get a fullscreen video stream of the camera.

I hope this helps.

[KillerBENL]

Is it maybe possible to add refresh to the videoUrl because my camera only has the option for imageUrl?

[clinkadink]

I have updated the Camera block.

Now, if you do not set the MJPEG "videoUrl", because you don't have one or cannot find one, it will use your "imageUrl" for the fullscreen image. It will use the "refresh" value to update the image every n milliseconds (like the block preview image).

Code: Select all

blocks['camera_1'] = {
	type: 'camera',
	imageUrl: "http://192.168.1.234:8080/camsnapshot.jpg?idx=1",
	refresh: 3000,
	width: 6,
	height: 300
}

If you have added the camera(s) to Domoticz, you can use the Domoticz camera url instead of the camera's own url.

[jon205]

It sounds as if your icons have a high z-index. Try adding this to your custom.css file.

Code: Select all

.cam-container .stream {
    z-index: 10000;
}

This didn't help for me. This is currently in my custom.css file:

Code: Select all

/*
CUSTOM CSS FILE
*/
.cam-container .stream {
    z-index: 10000;
}

Nothing more, nothing less. Anything else to change the z-ordering?

Jon.

[clinkadink]

It sounds as if your icons have a high z-index. Try adding this to your custom.css file.

Code: Select all

.cam-container .stream {
    z-index: 10000;
}

This didn't help for me. This is currently in my custom.css file:

Code: Select all

/*
CUSTOM CSS FILE
*/
.cam-container .stream {
    z-index: 10000;
}

Nothing more, nothing less. Anything else to change the z-ordering?

Jon.

I replied to nfuse because he had icons showing through his cam stream. What issue do you have?

[jon205]

The same: icons showing through the stream when clicked on the preview. It definetely looks like a Z-ordering issue.

Jon.

[clinkadink]

Have you tried to investigate with DevTools in Chrome? It is difficult to diagnose remotely with CSS. There are so many factors.

What are the icons from, what blocks? Maybe a copy of your config.js (redacted!) would help. I might be able to see whats going on then.

But if it were me, I would click on the preview, go fullscreen, then press F12, and inspect it with the inspector tool (arrow in a box).

[janumix]

Hi, I've got exactly the same issue. F12 -> console shows repeated error:

js/blocks.js:95 Error calling getStatus TypeError: Cannot read property 'Data' of undefined
at getStatus_57 (<anonymous>:11:22)
at getCustomFunction (js/blocks.js:93)
at triggerStatus (js/blocks.js:941)
at deviceUpdateHandler (js/blocks.js:144)
at Object.callback (js/blocks.js:204)
at js/domoticz-api.js:458
at Array.forEach (<anonymous>)
at ListObservable.set (js/domoticz-api.js:457)
at setOnChange (js/domoticz-api.js:287)
at _setAllDevices (js/domoticz-api.js:313)
getCustomFunction @ js/blocks.js:95

Changing value z-index: 100000 results only in disapearing "^" icon at the bottom of the screeen.

BR

[clinkadink]

Hi, I've got exactly the same issue. F12 -> console shows repeated error:

js/blocks.js:95 Error calling getStatus TypeError: Cannot read property 'Data' of undefined
at getStatus_57 (<anonymous>:11:22)
at getCustomFunction (js/blocks.js:93)
at triggerStatus (js/blocks.js:941)
at deviceUpdateHandler (js/blocks.js:144)
at Object.callback (js/blocks.js:204)
at js/domoticz-api.js:458
at Array.forEach (<anonymous>)
at ListObservable.set (js/domoticz-api.js:457)
at setOnChange (js/domoticz-api.js:287)
at _setAllDevices (js/domoticz-api.js:313)
getCustomFunction @ js/blocks.js:95

Changing value z-index: 100000 results only in disapearing "^" icon at the bottom of the screeen.

BR

Thanks for this. This does not look like a camera issue. But more like a block issue. I am hoping Lokonli may know more.

[KillerBENL]

I have updated the Camera block.

Now, if you do not set the MJPEG "videoUrl", because you don't have one or cannot find one, it will use your "imageUrl" for the fullscreen image. It will use the "refresh" value to update the image every n milliseconds (like the block preview image).

Code: Select all

blocks['camera_1'] = {
	type: 'camera',
	imageUrl: "http://192.168.1.234:8080/camsnapshot.jpg?idx=1",
	refresh: 3000,
	width: 6,
	height: 300
}

If you have added the camera(s) to Domoticz, you can use the Domoticz camera url instead of the camera's own url.

Thanx for changing. I want to use higher resolution for the videoUrl is that possible?
snap.jpg?usr=live?JpegSize=S -> is for imageUrl
snap.jpg?usr=live?JpegSize=XL -> for videoUrl

[HFman]

So this is how it works for my Hikvision IP cameras, DS-2CD2142FWD-I, firmware v5.5.0 build 170725.

If I paste any of my urls into a browser, I can use the old (less secure) method, by prefixing the url with my credentials. I.e. this will work in a browser:

Code: Select all

http://username:[email protected]/Streaming/Channels/102/picture

However, if I try to use the same url as above (with prefixed credentials) in any system (including Dashticz) it will not work.
I believe this because it is basic authentication over http, which is a no-no, especially when not called directly by you.

However, the following method does work (for me) via Dashticz (and most other locally hosted systems):

Code: Select all

http://192.168.1.99/Streaming/Channels/102/picture?user=username&pwd=password

As for the MJPEG url, this what I have found out - it may be wrong, and the information may have changed. Please check for yourself.

• MJPEG is only enabled on models with firmware above v4 (which is most nowadays).

• I have only managed to display the substream (aka channel 2 or 102), not the main stream (channel 1 or 101). Even if I put 101 in the url, it will still display the substream (which is lower resolution).

• You need to change the substream video encoding to MJPEG on the camera. Image > Video & Audio > Stream Type = "Sub Stream", Video Encoding Type = "M_JPEG" > Save.

I am using the above settings for my 8 x Hikvision cameras, which is what you can see in the earlier posts. I have included one of my camera blocks below, with the Hikvision urls, both the image (picture) and the video (httppreview).

Code: Select all

blocks['camera_1'] = {
	type: 'camera',
	imageUrl: 'http://192.168.1.99/Streaming/Channels/102/picture?user=username&pwd=password',
	videoUrl: 'http://192.168.1.99/Streaming/Channels/102/httppreview?user=username&pwd=password',
	refresh: 3000,
	width: 6,
	height: 300
}

As a result, my camera image is updated every 3 seconds in the block, but when I click on it, I get a fullscreen video stream of the camera.

I hope this helps.

Ok, thanks ! Will start with updating the camera's... Since mine is are the "chinese" version it takes a little more effort, but found on out it is possible now. After that i will try above (should run version 5.45 after updating).

[clinkadink]

Thanx for changing. I want to use higher resolution for the videoUrl is that possible?
snap.jpg?usr=live?JpegSize=S -> is for imageUrl
snap.jpg?usr=live?JpegSize=XL -> for videoUrl

Unfortunately that's not possible. The videoUrl can only be used for video. If you want your fullscreen image to show your XL image, then you will need to add that to imageUrl.

[KillerBENL]

Thanx for changing. I want to use higher resolution for the videoUrl is that possible?
snap.jpg?usr=live?JpegSize=S -> is for imageUrl
snap.jpg?usr=live?JpegSize=XL -> for videoUrl

Unfortunately that's not possible. The videoUrl can only be used for video. If you want your fullscreen image to show your XL image, then you will need to add that to imageUrl.

Ok will do that. Thank you for the quick response

[Lokonli]

Hi, I've got exactly the same issue. F12 -> console shows repeated error:

js/blocks.js:95 Error calling getStatus TypeError: Cannot read property 'Data' of undefined
at getStatus_57 (<anonymous>:11:22)
at getCustomFunction (js/blocks.js:93)
at triggerStatus (js/blocks.js:941)
at deviceUpdateHandler (js/blocks.js:144)
at Object.callback (js/blocks.js:204)
at js/domoticz-api.js:458
at Array.forEach (<anonymous>)
at ListObservable.set (js/domoticz-api.js:457)
at setOnChange (js/domoticz-api.js:287)
at _setAllDevices (js/domoticz-api.js:313)
getCustomFunction @ js/blocks.js:95

Changing value z-index: 100000 results only in disapearing "^" icon at the bottom of the screeen.

BR

The getStatus_57 function is a function in custom.js.

In 3.4.2-beta there was a change in the interface.
See the following two links for examples of the new interface:
https://dashticz.readthedocs.io/en/beta ... fterupdate
https://dashticz.readthedocs.io/en/beta ... ther-block

[janumix]

Thanks for info - corrected.

Now, I can see following errors:

shot.jpg&d=1586549978000:1 GET http://192.168.100.32:8080/shot.jpg&d=1586549978000 404 (Not Found)
Image (async)
buildFragment @ bundle.js?t=1:37
domManip @ bundle.js?t=1:37
append @ bundle.js?t=1:37
(anonymous) @ js/components/camera.js:52
mightThrow @ bundle.js?t=1:37
B @ bundle.js?t=1:37
setTimeout (async)
(anonymous) @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
Deferred.jQuery.each.b.<computed> @ bundle.js?t=1:37
load @ bundle.js?t=1:102
(anonymous) @ bundle.js?t=1:102
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
done @ bundle.js?t=1:37
(anonymous) @ bundle.js?t=1:37
load (async)
send @ bundle.js?t=1:37
ajax @ bundle.js?t=1:37
load @ bundle.js?t=1:102
(anonymous) @ js/components/camera.js:44
dispatch @ bundle.js?t=1:37
F.handle @ bundle.js?t=1:37

and

192.168.100.34/snap.jpg&d=1586549978000:1 GET http://192.168.100.34/snap.jpg&d=1586549978000 net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
Image (async)
buildFragment @ bundle.js?t=1:37
domManip @ bundle.js?t=1:37
append @ bundle.js?t=1:37
(anonymous) @ js/components/camera.js:52
mightThrow @ bundle.js?t=1:37
B @ bundle.js?t=1:37
setTimeout (async)
(anonymous) @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
Deferred.jQuery.each.b.<computed> @ bundle.js?t=1:37
load @ bundle.js?t=1:102
(anonymous) @ bundle.js?t=1:102
fire @ bundle.js?t=1:37
fireWith @ bundle.js?t=1:37
done @ bundle.js?t=1:37
(anonymous) @ bundle.js?t=1:37
load (async)
send @ bundle.js?t=1:37
ajax @ bundle.js?t=1:37
load @ bundle.js?t=1:102
(anonymous) @ js/components/camera.js:44
dispatch @ bundle.js?t=1:37
F.handle @ bundle.js?t=1:37

but please, take a look for blocks definitions (no port 8080 has been defined):

blocks['cam1'] = {
type: 'camera',
imageUrl: 'http://192.168.100.34/snap.jpg',
refresh: 1000,
width: 6,
height: 80
}

blocks['cam2'] = {
type: 'camera',
imageUrl: 'http://192.168.100.32:8080/shot.jpg',
// videoUrl: 'http://192.168.100.32:8080/browserfs.html', <- do not work
refresh: 1000,
width: 6,
height: 100
}

BR

[clinkadink]

What happens when you use your Domoticz camera urls in the block?

The url format is "http://_Domoticz_IP_and_Port/camsnapshot.jpg?idx=1" for the first camera.

Example:

Code: Select all

blocks['camera_1'] = {
	type: 'camera',
	imageUrl: "http://192.168.1.234:8080/camsnapshot.jpg?idx=1",
	refresh: 3000,
	width: 6,
	height: 300
}

[janumix]

now console shows errors for the other 2 cammeras, but not one corrected via domoticz (on port 8080):

shot.jpg&d=1586620352733:1 GET http://192.168.100.35:8080/shot.jpg&d=1586620352733 404 (Not Found)
Image (async)
buildFragment @ bundle.js?t=1:37
domManip @ bundle.js?t=1:37
append @ bundle.js?t=1:37
(anonymous) @ js/components/camera.js:52
mightThrow @ bundle.js?t=1:37
B @ bundle.js?t=1:37
setTimeout (async)
(anonymous) @ bundle.js?t=1:37
fire @ bundle.js?t=1:37
add @ bundle.js?t=1:37
(anonymous) @ bundle.js?t=1:37
Deferred @ bundle.js?t=1:37
then @ bundle.js?t=1:37
(anonymous) @ js/components/camera.js:44
dispatch @ bundle.js?t=1:37
F.handle @ bundle.js?t=1:37
shot.jpg&d=1586620352733:1 GET http://192.168.100.32:8080/shot.jpg&d=1586620352733 404 (Not Found)

[clinkadink]

It looks like you have added an image url to the "videoUrl" - which will not work.
If you don't have MJPEG video streams, you cannot use the "videoUrl".
If the Domoticz camera urls work, why not use them for the "imageUrl" for all camera blocks in Dashticz? If no videoUrl is present, the camera module will automatically use the imageUrl for the fullscreen (and refresh the image like in Domoticz).

[janumix]

I already posted blocks definitions:

blocks['kam1'] = {
type: 'camera',
// imageUrl: 'http://192.168.100.34/snap.jpg',
imageUrl: 'http://192.168.100.180:8080/camsnapshot.jpg?idx=2',
// videoUrl: 'http://192.168.100.34/snap.jpg',
refresh: 1000,
width: 6,
height: 80
}

blocks['kam2'] = {
type: 'camera',
imageUrl: 'http://192.168.100.32:8080/shot.jpg',
// videoUrl: 'http://192.168.100.32:8080/browserfs.html',
refresh: 1000,
width: 6,
height: 100
}


blocks['kam3'] = {
type: 'camera',
imageUrl: 'http://192.168.100.35:8080/shot.jpg',
//videoUrl: 'http://192.168.100.35:8080/shot.jpg',
refresh: 1000,
width: 6,
height: 100
}

As you can see no videourl has been used.
Two of them are mjpeg streams (IP Webcam app on android phones) but it's not the problem I mentioned. The issue I replied to is about "ghost" icons on full screen view (when you click on image from camera). Adding "z-index" to custom.css do not help.

BR

[clinkadink]

I mentioned the videoUrl because of this line in your devtools:

Code: Select all

shot.jpg&d=1586620352733:1 GET http://192.168.100.32:8080/shot.jpg&d=1586620352733 404 (Not Found)

It contains the "d=" parameter, which is only added to the videoUrl string.

Anyway, I may have found out why the block icons are showing through the fullscreen camera image. I have committed a fix, once it has been applied to the beta, I will let you know, so you can test it. I can't test it, as I cannot replicate this issue.

Cheers