Camera: Live feed with PTZ controls

matt1 · December 27, 2020, 12:28pm

Improved the code in the first post again.

Controls now open up to a larger size so they are easier to press.
Works better across iPhone and android tablets.

sambuca · January 8, 2021, 11:34am

Great widget, thanks.

On the light theme, the controls are not visible when opened, as they are placed on the white space above the image.

Changing the
color: white

for the controls to
color: var(--f7-card-header-text-color)
seem to fix this, or at least makes it better.

I’m sure there are other ways to do this, but I am just getting started with widgets…

Andrew_Pawelski · January 18, 2021, 2:56am

Hope this isnt a dumb question but the camera itself is this an assumption the IPcamera binding has been used to create the equipment?

matt1 · January 18, 2021, 3:45am

Yes as how else can you move a camera if it is not with the ip camera binding? There is a similar widget that is for non movable cameras that are not using the binding as it takes URL for the config setup.

Feel free to use any of the widgets to create your own however your setup works.

zacofunny · January 26, 2021, 8:49am

Is there any way to pop-up this widget or the other one without PTZ, by switching virtual item?

matt1 · January 31, 2021, 10:55pm

sidamos · March 8, 2021, 3:42pm

Cool widget. I added invertPan, because tilt and pan are both reversed for my camera.

Strangely, GotoPreset does not work. It does not find the item (404 in the browser console), but the item is named correctly “CameraName_GotoPreset” and is working in the settings (gear icon) popup.

Edit:
When I use this widget, then a cookie with name “” and value “secure” is being set.
Unfortunately, if any cookie with an empty name is present, the OH 3 authentication does not work anymore. I am being logged out and cannot log in anymore, until I delete this cookie.
This cookie is probably being set by the MJPEG stream URL of my Amcrest camera?

matt1 · March 9, 2021, 7:47am

This widget and the binding both do not create cookies, if the openHAB framework creates them I do not know and you are better off asking for help in your own thread with a subject that is more broad so more people see it.

Very strange, the widget only sends commands to the event bus as does the mainUI controls that the gear icon opens, the binding then reads and acts on these commands from the event bus. This rules out the binding as the cause of this problem. I just looked up what my item is called and it is CameraName_GoToPreset note the capital T in To. Did you create the item using textual config? If so this is a big reason to change to using the UI to create them for you.
FYI the default naming is grabbed from the Label and not the channel ID.

sidamos · March 9, 2021, 8:05am

Thanks, did not spot the capital “T”.

When I delete and recreate the point with the default name, I get “CameraName_gotoPreset”. I think I created the thing with OH 2.5, probably the default name of the item has changed in OH 3.

Anyway, now that I know the issue, I can name it correctly and it works in the widget.

Dharvin_D · April 5, 2021, 3:02pm

Hi that looks very nice in your screenshot.
I’m trying same, but it’s not displaying, just a blank widget - any idea how I can check what is the issue?

In the overview dashboard

config:
  label: Overview
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:ClickablePTZCamera
                config:
                  camera: IPCamera01
masonry:
  - component: oh-masonry
    slots:
      default: []

My Camera is online and the MPEGURL is working when accessed individually.

Dharvin_D · April 13, 2021, 5:53pm

Hello, @matt1 please are you able to post your thing/item code, followed the steps but not able to reach the widget showing something. Thanks

d0t · April 15, 2021, 1:02am

@Dharvin_D - In my setup, while the FOSCAM camera is accessible over HTTP/HTTPS, for some reason the OH Widget only works when you load the OH Main UI over HTTP. By default, that would be:

http://<server-ip>:8080/

Hope that helps!
.

Dharvin_D · April 15, 2021, 5:05pm

@matt1 thanks → that was the issue, switching to http is displaying the camera feed!
Now am up to work on getting the PTZ working

Airmr · April 25, 2021, 7:04pm

I would like to get this to actual discussion again. I used the camera wifget that did this in OH2.5. Now i cant find anything like that for OH3 with the camera stream popup when a trigger is switched.

Thnx

mancer · May 18, 2021, 4:18pm

Hey guys.
Is there any way to use the snapshot URL (snapshots.mjpeg) as video source?
Currently only ipcamera.mjpeg is being used, which for my Amcrest is the sub-stream and only available in ugly blocky 640x480.
What I tried so far:

Putting the snapshots URL in “MJPEG URL” → resulting in no image at all
Putting the snapshots URL in “Snapshot URL” → resulting in “Connection Timeout: Check your IP and PORT are correct and the camera can be reached”

Any help appreciated.

matt1 · May 19, 2021, 5:11am

Yes just change the first url that is marked to ‘card-opened-fade-out’.

I used to have it that way and only opened the full MJPE stream when clicked, but found it annoying to move the camera when it has a 1 second delay on the picture as my cameras all create mjpeg streams onboard. I guess you could hide the controls until the camera is clicked and it opens up. Have a play and see what you can come up with.

Open your own thread if you need help and give photos of what your trying to do.

joep · November 14, 2021, 4:27pm

When I try to install this or Clickable camera widget I keep getting this error:

16:21:29.392 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Unable to parse YAML: Unrecognized field “default” (class org.openhab.core.config.core.dto.ConfigDescriptionParameterDTO), not marked as ignorable (22 known properties: “readOnly”, “max”, “limitToOptions”, “groupName”, “name”, “stepsize”, “context”, “defaultValue”, “min”, “label”, “filterCriteria”, “verify”, “type”, “description”, “options”, “required”, “advanced”, “unit”, “multipleLimit”, “pattern”, “multiple”, “unitLabel”])
at [Source: (StringReader); line: 10, column: 23] (through reference chain: org.openhab.core.ui.components.RootUIComponent[“props”]->org.openhab.core.config.core.dto.ConfigDescriptionDTO[“parameters”]->java.util.ArrayList[1]->org.openhab.core.config.core.dto.ConfigDescriptionParameterDTO[“default”])
16:21:29.394 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Unable to parse YAML

Installing “Custom rollershutter widget with preset configuration” went without error. Tried with 3.2 and 3.2 snapshot. Any idea?

matt1 · November 25, 2021, 9:10am

Thanks for reporting, I have fixed this now as it seems the default value was causing it to fail. Try installing it now.

peterhoeg · November 29, 2021, 3:11am

Hi @matt1, in your post for the clickable camera widget you also reference this “default naming”. Do you have a link to the documentation? My search-fu is too weak it seems.

matt1 · November 29, 2021, 4:09am

There are two ways to achieve the same result.

Create Equipment from thing.
Add equipment from model.

This auto creates the items for you based on what the binding developer has tagged the channel to be. So it will save time choosing a name for the item, plus what type of item and the semantic tags are often now auto selected for you. This also makes setup easier in widgets if you use this naming of the items, so if people prefer textual methods it would be a good idea to copy the same naming structure.

Link to where this is shown with pictures and step by step guide…

Semantic Model | openHAB