IpCamera: New IP Camera Binding

matt1 · February 19, 2020, 11:28pm

The binding can cast:
jpg
gif
HLS

However at any time Google could change something in a firmware.
Mjpeg appears to be possible, just I need a trace of a working stream to work out what is missing. It may be possible to pass the streams through nginx and get them working, I just lack the time to try, so if someone has it working and knows how to do a wireshark or similar capture it would be great to hear from you. HLS is the only way to do it with audio.

I don’t use habpanel, I cast most of my stuff or use automations to do things automatically. The snapshot based mjpeg streams are most likely to stay open for extended periods of time without stopping. Cameras may stop the stream on you, but snapshots are not likely to be stopped. Give them all a test and see what works best for you and I would love to hear the results of any testing as I have not done any.

delid4ve · February 20, 2020, 12:08am

So far snapshots seems the best option.
Mjpeg streams don’t close the ffmpeg when not in use so I soon hit 100% cpu usage
Still trying to get the hls working in there.

Also be nice if the developer of the iOS app integrated WebKit-playsinline for the app so we can have inline hls streams (using a web view). I know it was just rewritten to swift so I’ll drop him a message when I get a chance to find the post

matt1 · February 20, 2020, 12:50am

That’s a bug that is fixed for the next build.

Also someone posted a way to get hls working by placing it in a HTML file with a few lines of code. Search this thread maybe a month ago. I did it a year ago and from memory that is how I did it too so probably have notes somewhere.

edit:

delid4ve · February 20, 2020, 7:26am

@matt1 thanks for that. Could you possibly add to the readme as Im sure i cant be the only one

you can also do in sitemaps like this to get cams side by side, however it only works through the dashboard as the ios app, as i suspected, doesnt integrate webkit-playsinline. this means all streams open a new fullscreen player in safari (I have opened this on git)

<!DOCTYPE html>
<html>
	<body>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50001/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50002/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50003/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50004/ipcamera.m3u8" />
		</div>
	</body>
</html>

rubenfuser · February 20, 2020, 9:15am

hello everyone! first of all thanks for this binding! very nice job!
i’m trying to configure this binding but i’m stuck in some settings…
i don’t understand if the problem is my webcam (a sub brand of dahua named imou) or some wrong settings i’m using on binding.
all settings made are done via paperui, so no typos are made using command line.

here are some screenshot:

also here there is a screen of onvif device manager:

summarizing, the rtsp is right because i can see on vlc with that url the realtime streaming, but on openhab i have no images or control of any of webcam settings…

thanks to who will have 5 mins to help a little noob

delid4ve · February 20, 2020, 9:22am

@matt1

Now that was quick time:

Sebastian_Neu · February 20, 2020, 7:38pm

Does anyone know how I integrate the HLS stream into HABPANEL? I use the Chrome browser and have installed an HLS extension. When I open the stream via the address bar, the video is played. But embedded in a template widget, the video doesn’t work.

Sholst · February 20, 2020, 10:04pm

How do I know which port to use for the video stream?

matt1 · February 20, 2020, 11:18pm

@delid4ve
Thanks so much for helping out, you clearly understand html coding better than I do. Are you able to do a PR on the readme file? if too hard just PM what you want added and I can put it into the readme as I agree it is needed. What do you think of creating a habpanel widget? As mentioned I don’t use habpanel and have not played with it in over 6 months.

@Sebastian_Neu
For getting HLS to work in habpanel look at the posts only 5-10 above yours.

@rubenfuser
you need to set the SERVER_PORT as -1 turns off the serving feature. The URLS will then display contents after doing that and you can use them in habpanel or in your sitemap. Readme has examples for the sitemap.

@Sholst
more info is needed to know what exactly you are asking. If you are asking about the SERVER_PORT configuration, just randomly choose a number for each camera above 1024. Read the log file and it will often tell you what needs to be done to get things running.

delid4ve · February 21, 2020, 8:47am

I wouldn’t say understand but I try…
Added a pull request, still don’t get git completely but the code block is there if you want to add

delid4ve · February 21, 2020, 8:51am

In which area are you talking:
For your camera url:
whatever the rtsp port is set to in your camera config

For the binding:
Whatever port you desire, as long as it doesn’t conflict. So something high like 50001 is a good choice. *This has to be different for every camera.

rubenfuser · February 21, 2020, 12:44pm

hello, thanks a lot for you help, but i’ve tried to change SERVER_PORT to 50001 but nothing happen. in log i’ve no errors but nothing is displayed in PAPERUI nor in SITEMAP. simply i get the broken file icon…
any idea? i’ve also installed ffmpeg…not yet rebooted my RPI…
thanks a lot!

delid4ve · February 21, 2020, 8:01pm

Openhab iOS app TestFlight version 2.3.17 includes the hls stream fix I posted above.
Go to the iOS app git repo and read the Readme to see how to install the latest version.

delid4ve:

you can also do in sitemaps like this to get cams side by side, however it only works through the dashboard as the ios app, as i suspected, doesnt integrate webkit-playsinline. this means all streams open a new fullscreen player in safari (I have opened this on git)

<!DOCTYPE html>
<html>
	<body>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50001/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50002/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50003/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50004/ipcamera.m3u8" />
		</div>
	</body>
</html>

Sascha_ · February 23, 2020, 7:24am

Wow! Just updated to latest version and I’m very impressed by @matt1 's work. Thumbs up!!

Just one litte quirk, maybe this is fixable.

I’m using the autofps.mjpeg feature in my sitemap, working just fine. However, initial picture takes seemingly forever. Maybe there is a caching method which may help here

Keep up the good work

matt1 · February 23, 2020, 9:32am

Glad you like the binding.

Yes that behaviour I am pretty sure is caused by a FIFO buffer in the iOS app or platform. Does not happen on other browsers that I have tested with, so if your not on iOS please let me know…
I have a half work around already working for next build but it will always mean an extra delay 1 frame delay when on iOS. I have tried a number of fixes already which is why I am so sure it is a fifo causing it and hence it is not 100% solvable unless you use a higher frame rate which defeats the whole idea of this feature. I mentioned it here.

matt1 · February 24, 2020, 11:12am

New build 2020-02-24 has these changes:

group display HLS improvements.
mjpeg fix to display quicker on iOS @Sascha_

Andrew_Pawelski · February 25, 2020, 11:19am

@delid4ve have you got this working in the openhab IOS app? how do you do this in a sitemap?

delid4ve · February 25, 2020, 1:48pm

create a html file in conf\html (call it Cams.html for this example).
Add the code below (changing the urls for your hls streams, and the number of divs depending on how many cams you have).

<!DOCTYPE html>
<html>
	<body>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50001/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50002/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width:100%; " src="http://192.168.6.4:50003/ipcamera.m3u8" />
		</div>
		<div style="width: 50%; float: left;">
			<video playsinline autoplay muted controls style="width: 100%; " src="http://192.168.6.4:50004/ipcamera.m3u8" />
		</div>
	</body>
</html>

Then in your sitemap you can add:

Text label="CCTV" icon="camera" {
Webview url="http://IPADDRESS:PORT/static/Cams.html" height=9
}

This works in sitemaps (please be aware that the browser has to support hls - I use apple devices so this is native for me, it doesnt work in chrome without extensions)
It also works in the test flight version of the ios app (not app store release at present).

github.com

openhab/openhab-ios/blob/main/README.md

<p align="center">
    <a href="https://www.bountysource.com/teams/openhab/issues?tracker_ids=860186"><img alt="Bountysource" src="https://www.bountysource.com/badge/tracker?tracker_id=860186"></a>
    <br>
    <img alt="Logo" src="openHAB/Images.xcassets/AppIcon.appiconset/Icon.png" width="100">
    <br>
    <b>openHAB client for iOS</b>
</p>

## Introduction

This app is a native client for openHAB which allows easy access to your sitemaps.

<a href="https://itunes.apple.com/us/app/openhab/id492054521?ls=1&mt=8"><img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-example-preferred.png" alt="Download on the App Store"></a>

Beta releases are available on [TestFlight](https://testflight.apple.com/join/563WBakc).

## Features
* Control your openHAB server and [openHAB Cloud instance](https://github.com/openhab/openhab-cloud)
* Receive notifications from openHAB Cloud
* Supports wall mounted tablets

This file has been truncated. show original

Brignoud · February 25, 2020, 5:19pm

Hi Mattew,
ONVIF correctly working I a new user of your bind like I use to do with the other Milight and really satisfied

I got the following from the administration tool of my camera

Just wondering if some HIK functions are addressable via bind or are they totally uneusefull
Also asking if there is some API gate with SV3C and where to look at with ONVIF manager tool so that I can make use of the alarm features
I also saw there a movement panel inside. Does it means I can address them via the binding?
Sorry if some questions are almost answered with the read.me

The very last: what the “control protocol port” (8091) stand for?

matt1 · February 25, 2020, 11:19pm

No idea as that is not part of the binding. Download the manual for whatever hikvision device that came from.

You do not need onvif unless your cameras as PTZ and you want to move them, otherwise just ignore onvif.