EDIT: If you are using OH3.x there is a far easier method using the newer widgets, the below is left for OH2.x users. To see the widget please see this link.
Clickable Camera Widget - Add-on Marketplace / UI Widgets - openHAB Community
I am hoping to write a few of these HowTo’s as I am finding out that certain things work well in one app then in another it does not work so well (iOS vs Android vs BasicUI). I hope to save everyone wanting to use cameras the same trial and error and possible giving up before the solution is found.
Credit for some of these ideas goes to this article https://github.com/openhab/openhab1-addons/wiki/Foscam-IP-Cameras but I thought it would be better placed in this forum where people can comment and post different examples.
Some ways you can display a basic picture in Openhab 2 are:
Image url="http://192.168.0.999:54321/ipcamera.jpg" refresh=900000 //Every 15 minutes
Webview url="http://192.168.0.999:30001/ipcamera.gif" height=9 //Animated gif that moves
Video url="http://192.168.0.999:30001/ipcamera.mjpeg" encoding="mjpeg"
Webview url="http://192.168.0.999:30001/ipcamera.m3u8" height=15
Video url="http://192.168.0.999:30001/snapshots.mjpeg" encoding="mjpeg"
If you want to display multiple thumb nails of all your cameras that open up when clicked on to a larger view then read the steps below…
You can use the cameras URLs directly which is often a better way if the stream passes direct from a camera to your tablet/phone without passing through the Openhab server, however there are times when this does not work due to digest authentication. The IpCamera binding will unlock the ability to open the streams on multiple tablets at the same time if your camera is limited to x number of streams. Example is Doorbird limited to 1, ESP32 cameras limited to 1, Foscam limited to 4. With the binding these limits do not apply as the binding can copy and forward the stream so the camera only sees 1 stream open.
Overview and background of method:
We will create a number of HTML files, one that shows all cameras and then one for each camera that will open up if you click on the thumbnail of the pic. Clicking on the single cameras picture will then return you back to the thumbnails that show all cameras.
To serve these html files we are going to use a built in feature of Openhab that allows us to access these files with the url format http://OpenhabServerIP:8080/static/allcams.html
The file must be placed inside a folder called ‘html’ which can be found with the default samba share that openhabian creates called ‘openHAB2-conf’. If you use VS code to edit your Openhab files you already know the location of this folder.
Inside these html files, we can display mjpeg streams or pictures or anything that a webpage can display, so you can choose to use snapshots at 1FPS, a HLS or Mjpeg stream at a higher rate if your camera supports this.
Details:
To display this in the iOS app I use this line inside the sitemap file and adjust the height to suit how many cameras you have displayed at the same time…
Webview url="http://192.168.1.2:8080/static/allcams.html" height=10
Create a file with the below text in it (two choices to choose from) and save it as allcams.html in the html folder. Visual Studio Code works well for doing this and can be used for the rest of your Openhab files.
allcams.html using snapshots
<!DOCTYPE html>
<html>
<meta http-equiv="refresh" content="60">
<body bgcolor="black">
<a href="http://192.168.1.2:8080/static/backyardcam.html"><img id=cam1 src=http://192.168.1.2:40061/ipcamera.jpg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/drivewaycam.html"><img id=cam2 src=http://192.168.1.2:40062/ipcamera.jpg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/frontdoorcam.html"><img id=cam3 src=http://192.168.1.2:40063/ipcamera.jpg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/babycam.html"><img id=cam4 src=http://192.168.1.2:40064/ipcamera.jpg width=49.4% border="0"></a><br>
</body>
</html>
allcams.html using mjpeg streams (can use this with snapshots.mjpeg for a high res 1 FPS feed)
<!DOCTYPE html>
<html>
<body bgcolor="black">
<a href="http://192.168.1.2:8080/static/backyardcam.html"><img id=cam1 src=http://192.168.1.2:30061/ipcamera.mjpeg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/drivewaycam.html"><img id=cam2 src=http://192.168.1.2:30062/ipcamera.mjpeg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/frontdoorcam.html"><img id=cam3 src=http://192.168.1.2:30063/ipcamera.mjpeg width=49.4% border="0"></a>
<a href="http://192.168.1.2:8080/static/babycam.html"><img id=cam4 src=http://192.168.1.2:30064/ipcamera.mjpeg width=49.4% border="0"></a><br>
</body>
</html>
Note the line that contains refresh in it for the snapshots, I set this to 60 for once a minute, but you can change it to what you wish. However it is the refresh that disrupts Android and BasicUI if you set this too low as it then ends up giving more blank screen then a useful picture. On iOS it displays the old picture until the new picture is ready so it looks great on iOS. At any time you can drag down on the screen and let go to update the picture so a long period of time works best for me as I use some iOS and some Android devices.
Now create separate html files for each of your cameras that match the filenames linked in the above and containing the below text. Choose which format you prefer from snapshot or mjpeg or even HLS.
Snapshot method
<!DOCTYPE html>
<html>
<meta http-equiv="refresh" content="1">
<body bgcolor="white">
<a href="http://192.168.1.2:8080/static/allcams.html"><img id=cam2 src=http://192.168.1.2:40001/ipcamera.jpg width=99.4% border="0"></a><br>
</body>
</html>
mjpeg works on iOS, BasicUI and Android
Note the lacking refresh line and this time we are using mjpeg.
<!DOCTYPE html>
<html>
<body bgcolor="white">
<a href="http://192.168.1.2:8080/static/allcams.html"><img id=cam2 src=http://192.168.1.2:40001/ipcamera.mjpeg width=99.4% border="0"></a><br>
</body>
</html>
Customisations
HLS streaming works great on iOS in high resolution and frame rates but it does take over the whole screen which can be a desirable feature or annoying if you wish to see the stream and the Openhab controls at the same time. There is a delay behind real time with HLS but it does have higher resolution with most cameras, so the choice between mjpeg for no delay or HLS for better quality needs to be made.
If you want to place the ability to use either stream in your sitemap then consider using these lines as you don’t need to use Html files unless you want the ability to see all cameras at the same time and then a single larger view opens when you click/finger the cameras picture.
Text label="Mjpeg Stream" icon="camera"{Video url="http://192.168.1.2:50001/ipcamera.mjpeg" encoding="mjpeg"}
Text label="HLS Stream" icon="camera"{Webview url="http://192.168.1.2:50001/ipcamera.m3u8" height=15}