Dashticz IP Cameras - Features, Fixes & Updates

[clinkadink]

In Dashticz, users can display their cameras using buttons, like this:

Code: Select all

var buttons = {}
buttons.webcam = {width:12, isimage:true, refresh:2000, btnimage: 'http://ip_url_to_webcam', url: 'http://ip_url_to_webcam', framewidth:500, frameheight:400}

I have been using this with 8 of my Hikvision IP cameras. They display the image fine in the dashboard. But when I click on the image, all I see is an empty popup window (modal), that fills less than half my screen.

Is there any demand for a dedicated block in Dashticz, specifically for IP cameras?

If so, what kind of block settings would we like to see? Mock-up below as a starter for ten ...

Code: Select all

blocks['garage_cam] = {
   type: 'camera'
   imageUrl: 'http://192.168.1.234:5678?res=640x480&snapshot=1',
   videoUrl: 'http://192.168.1.234:5678?res=1920x1080&fps=15', 
   refresh: 1000,
   width: 6,
   height: 300
}

Understandably, only certain camera stream protocols are supported. Browsers can natively play HTTP streams, but not RTSP streams. The latter requires client side plugins (e.g. VLC, ActiveX, etc) or server side conversion. If you have IP cameras, and you can view your streams via HTTP protocol (as shown in the example above), then you will be able to view them in Dashticz - using the current 'buttons' method, or any new 'dedicated' block method (if implemented).

[clinkadink]

This is a prototype camera block in Dashticz ...

Spoiler: show

Code: Select all

blocks['camera_1'] = {
	imageUrl: 'http://192.168.1.234/ISAPI/Streaming/channels/102/picture',
	videoUrl: 'http://192.168.1.234/ISAPI/Streaming/channels/101/httppreview',
	refresh: 500,
	width: 6,
	height: 300
}

[EdwinK]

Looks nice

[jjnh]

Yes, looks great. Looking forward to it!!

[Minglarn]

Looks promising!
Good work!

[clinkadink]

This is now available in the latest beta, as of today.

Code: Select all

blocks['garage_cam] = {
   type: 'camera',
   imageUrl: 'http://192.168.1.234:5678?res=640x480&snapshot=1',
   videoUrl: 'http://192.168.1.234:5678?res=1920x1080&fps=15', 
   refresh: 1000,
   width: 6,
   height: 300
}

imageUrl - this is the url for the static image of the camera. The refresh property will be used to refresh the image.
videoUrl - this is the url for the fullscreen live video stream. I have tested with an mjpeg stream and it works well.

The above IP camera block will show a preview (image that is refreshed) in your Dashticz screen. When you click on the preview, the camera block will become fullscreen, and switch to the live video stream. There will be a handle at the bottom center of the screen, used to display the camera tray. When clicked any other cameras will be presented in the tray. If you click on them, it will update the fullscreen video stream.

This has been designed mainly for those users with several cameras, which provide both an image stream and a video stream.



If anyone wishes to test this and has any issues, please can you provide the IP camera's make, model and url (without credentials) in your reply.

Cheers

[Minglarn]

Great work!
Works flawless with IPCAMERA for Android devices.
Using IP Webcam for Android witch streams in mjpeg format.

Thanks!

[clinkadink]

That's great news!! Thanks for the feedback

[jon205]

Just tested this, works great. When you add the cameras to Domoticz, you can use the Domoticz camera url to get a live camerastream (updated every x millisecs) in Dashticz.

Code: Select all

blocks['cam1'] = {
   type: 'camera',
   imageUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=1',
   videoUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=1', 
   refresh: 1000,
   width: 12,
   height: 300
}

blocks['cam2'] = {
   type: 'camera',
   imageUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=2',
   videoUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=2', 
   refresh: 1000,
   width: 12,
   height: 300
}

This results in a small live preview and when clicked on, it's fullscreen. So if Domoticz supports the cam, so does Dashticz. Whether a RTSP or HTTP stream..

Thanks for the update!

Jon.

[clinkadink]

Good spot with the Domoticz camera urls, forgot about those (and I have them). Glad it works with them too

[nfuse]

nice work on the camera plugin i also try'd days to get the popup screen to work with iframe scaling but it was a pain and never workt the way i wanted it.

i only have a small problem (not a big one for me) but the focussed icons from dashtics are seeing true the popup when i click my camera picture.
i apply'd the latest beta but i cant figure it out.

here is an example:



any ideas?

[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;
}

[nfuse]

Just tested this, works great. When you add the cameras to Domoticz, you can use the Domoticz camera url to get a live camerastream (updated every x millisecs) in Dashticz.

Code: Select all

blocks['cam1'] = {
   type: 'camera',
   imageUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=1',
   videoUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=1', 
   refresh: 1000,
   width: 12,
   height: 300
}

blocks['cam2'] = {
   type: 'camera',
   imageUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=2',
   videoUrl: 'http://192.168.1.201:8080/camsnapshot.jpg?idx=2', 
   refresh: 1000,
   width: 12,
   height: 300
}

This results in a small live preview and when clicked on, it's fullscreen. So if Domoticz supports the cam, so does Dashticz. Whether a RTSP or HTTP stream..

Thanks for the update!

Jon.

Great! was looking for this because with hikvision i always need to login first (hikvision does not accept username and pass in url)

[clinkadink]

Great! was looking for this because with hikvision i always need to login first (hikvision does not accept username and pass in url)

My Hikvision cameras do support username and password in the URL. Are you using the old or new format?

This is what I used to develop the camera block in Dashticz (on Chrome), which I am using now:

Code: Select all

var hikvisionUrl = 'http://192.168.1.99/Streaming/Channels/101?user=username&pwd=password'

However, Chrome (and other browsers) did stop the old method below, which will no longer work:

Code: Select all

var hikvisionUrl = 'http://username:[email protected]/Streaming/Channels/101'

Make sure you have web authenticaton set to "digest/basic" under Security in the camera(s). You shouldn't get prompted when passing user/pwd then.

[nfuse]

Great! was looking for this because with hikvision i always need to login first (hikvision does not accept username and pass in url)

My Hikvision cameras do support username and password in the URL. Are you using the old or new format?

This is what I used to develop the camera block in Dashticz (on Chrome), which I am using now:

Code: Select all

var hikvisionUrl = 'http://192.168.1.99/Streaming/Channels/101?user=username&pwd=password'

However, Chrome (and other browsers) did stop the old method below, which will no longer work:

Code: Select all

var hikvisionUrl = 'http://username:[email protected]/Streaming/Channels/101'

Make sure you have web authenticaton set to "digest/basic" under Security in the camera(s). You shouldn't get prompted when passing user/pwd then.

i try'd those settings but they didn't work for me, maybe i have an older recorder (DS-7604NI-E1 / 4P/A with webversion V4.0.1 build 170814)thanks for the help anyway

[HFman]

Nice one.. but don't get it working...

With the Hikvision directly, the picture showes up corectly, but after that NO updates.

buttons.webcam = {width:12, isimage:true, refresh:1000, btnimage: 'http://192.168.1.10/Streaming/Channels/1/picture?', url: 'http://192.168.1.10/Streaming/Channels/1/picture?', framewidth:500, frameheight:400}

any clue.. (via Domoticz server works).

[clinkadink]

The camera block is designed for IP cameras that can provide MJPEG streams.
The imageUrl is for the image (snapshot) and the refresh parameter refreshes this image every [n] milliseconds. However, that is just preview image on the block. Domoticz uses the same method, they do not receive/show a video stream. It is just displaying multiple images per second.
The videoUrl is for the MJPEG stream, i.e. the video. You have added the image url to this, which is why it isn't working.

A lot of Hikvision cameras support MJPEG streaming. You need to find the url for yours, and add that as the videoUrl.

[HFman]

This i fully get... it should update every second right.. just like in domoticz, this it doesn't do. not at the frontpage, and not when I open the camera URL. I can open a RTSP stream with VLC, but the MPEG stream i didn't find yet...

[clinkadink]

When you paste your url into a browser, do you see the picture or are you prompted for credentials?

[HFman]

first time credentials, but when I fill and remember, then it will not ask again. (your way doesn't work..)
Before i used : forcerefresh:1 but this seems now also not to work..

So every time i when i reload (F5) it update to the lastest picture but after that, no update... (without asking for the credentials)