This widget allows you to view your live camera with a HLS stream, and when a MP4 recording is made via the ipCamera binding, it will allow the folder icon to be clicked to show the recordings to be reviewed. Once you have seen all the recordings, you can click on the “X” button to clear the counter which will NOT delete the recordings. The X just resets the number of how many recordings that have been made since you last reviewed and cleared the counter. The video camera icon returns you to the live view. You can enter full screen mode if the live view or the recording contains something of interest. A big thank you to @11194 for creating the original widget that this one is based from.
To get this widget working you MUST name your items with the default naming that occurs when you use the OH3 feature “Add equipment to model” from the things channel page (found at very bottom of page). If you manually create items, then the following items will need to be named as follows and linked to the channels of the same name:
EquipmentName (this is the item you select in the widget’s setup)
EquipmentName_MP4_History
EquipmentName_HLS_URL
EquipmentName_MP4_History_Length
The Base Url config needs to be set to use your openHAB IP address and also be updated to include the cameras unique ID. This will look like this and will end with a /
http://192.168.1.2:8080/ipcamera/19216813/
Resources
uid: CameraHLSHistory
tags: []
props:
parameters:
- context: item
label: Select the Camera (Equipment)
name: camera
required: true
type: TEXT
- description: "example: http://192.168.1.2:8080/ipcamera/CameraUniqueID/"
label: Base URL
name: cameraBaseURL
required: true
type: TEXT
timestamp: Aug 14, 2022, 12:32:23 AM
component: f7-card
config:
key: "=(vars.selected === undefined) ? Math.random() : Math.random() + vars.selected"
style:
border-radius: 6px
height: 9rem
width: 16.7rem
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
slots:
default:
- component: oh-video-card
config:
hideControls: false
startManually: false
url: =props.cameraBaseURL + items[props.camera + '_MP4_History'].state.split(",")[vars.selected] +".mp4"
visible: =vars.archive == 2
- component: oh-video-card
config:
hideControls: false
item: =[props.camera + '_HLS_URL']
startManually: false
visible: =vars.archive != 2
- component: f7-row
config:
class: no-gap
style:
position: absolute
top: 0px
width: 99%
z-index: 2
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: archive
actionVariableValue: 2
iconColor: white
iconF7: folder
iconSize: 28
z-index: 2
visible: "=(items[props.camera + '_MP4_History'].state !== NULL ? vars.archive !== 2 : false)"
style:
margin: -2px
- component: Label
config:
style:
color: white
font-size: 9px
left: 18px
position: absolute
top: 12px
z-index: -1
text: =items[props.camera+'_MP4_History_Length'].state
visible: =vars.archive != 2 && items[props.camera+'_MP4_History_Length'].state > 0
- component: Label
config:
style:
color: white
font-size: 9px
left: 12px
position: absolute
top: 9px
z-index: -1
text: =(vars.selected+1)
visible: =vars.archive == 2
- component: oh-button
config:
action: variable
actionVariable: archive
actionVariableValue: 1
iconColor: white
iconF7: videocam
iconSize: 28
visible: =(vars.archive == 2)
style:
margin: -2px
- component: oh-button
config:
action: variable
actionVariable: selected
actionVariableValue: =(items[props.camera +'_MP4_History_Length'].state-1)
iconColor: white
iconF7: backward_end
iconSize: 28
visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
style:
margin: -2px
- component: oh-button
config:
action: variable
actionVariable: selected
actionVariableValue: =(vars.selected+1 < items[props.camera +'_MP4_History_Length'].state)?(vars.selected+1):(items[props.camera +'_MP4_History_Length'].state-1)
iconColor: white
iconF7: arrowtriangle_left
iconSize: 28
visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
style:
margin: -2px
- component: oh-button
config:
action: variable
actionVariable: selected
actionVariableValue: =(vars.selected != 0)?(vars.selected-1):(0)
iconColor: white
iconF7: arrowtriangle_right
iconSize: 28
visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
style:
margin: -2px
- component: oh-button
config:
action: variable
actionVariable: selected
actionVariableValue: 0
iconColor: white
iconF7: forward_end
iconSize: 28
visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
style:
margin: -2px
- component: oh-button
config:
action: toggle
actionCommand: "0"
actionItem: =props.camera+'_MP4_History_Length'
iconColor: white
iconF7: clear
iconSize: 28
tooltip: Clear cameras mp4 history
visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
style:
margin: -2px
