Camera: Live MJPEG view with a MP4 Recording History

Add-on Marketplace UI Widgets
,
1

This widget allows you to view your live camera with the more compatible MJPEG format for the live 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. Useful to show the number of people that have rung your doorbell, or driven up your driveway allowing a quick review of the recordings.

MJPEG has low latency and good compatibility with browsers.
There is a HLS version of this widget that will give higher resolution at the expense of latency and less compatible.

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 recording contains something of interest.

widget

Setup

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_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/doorbell/

Resources

uid: CameraMjpegHistory
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
    - description: "ON will use the lower bandwidth autofps.mjpeg stream otherwise ipcamera.mjpeg"
      label: Use Lower Bandwidth Stream
      name: lowerBandwidth
      required: true
      type: BOOLEAN
component: f7-card
config:
  key: "=(vars.selected === undefined) ? Math.random() : Math.random() + vars.selected"
  style:
    --f7-card-margin-horizontal: 0px
    --f7-card-margin-vertical: 0px
    border-radius: 6px
    height: 9.4rem
    width: 15.2rem
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-image-card
      config:
        style:
          border-radius: 6px
          height: auto
          margin: 0px
          width: 100%
        url: "=props.lowerBandwidth === true ? (props.cameraBaseURL + 'autofps.mjpeg') : (props.cameraBaseURL + 'ipcamera.mjpeg')"
        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
              style:
                margin: -2px
              visible: "=(items[props.camera + '_MP4_History'].state !== NULL ? vars.archive !== 2 : false)"
              z-index: 2
          - 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
              style:
                margin: -2px
              visible: =(vars.archive == 2)
          - component: oh-button
            config:
              action: variable
              actionVariable: selected
              actionVariableValue: =(items[props.camera +'_MP4_History_Length'].state-1)
              iconColor: white
              iconF7: backward_end
              iconSize: 28
              style:
                margin: -2px
              visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
          - 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
              style:
                margin: -2px
              visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
          - component: oh-button
            config:
              action: variable
              actionVariable: selected
              actionVariableValue: =(vars.selected != 0)?(vars.selected-1):(0)
              iconColor: white
              iconF7: arrowtriangle_right
              iconSize: 28
              style:
                margin: -2px
              visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
          - component: oh-button
            config:
              action: variable
              actionVariable: selected
              actionVariableValue: 0
              iconColor: white
              iconF7: forward_end
              iconSize: 28
              style:
                margin: -2px
              visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
          - component: oh-button
            config:
              action: toggle
              actionCommand: "0"
              actionItem: =props.camera+'_MP4_History_Length'
              iconColor: white
              iconF7: clear
              iconSize: 28
              style:
                margin: -2px
              tooltip: Clear cameras mp4 history
              visible: =vars.archive == 2 && items[props.camera+'_MP4_History_Length'].state > 0
1 Like
2

Just updated the widget to work with the newer item naming structure as follows when you create equipment from a thing.
Items names need to be like this…
EquipmentName (this is the item you select in the widget’s setup)
EquipmentName_MP4_History
EquipmentName_MP4_History_Length

4

I’m running OH 4.2.2-release build with the current IP Camera binding.

Currently I do have integrated my “DoorBird” camera, which is ONVIF-compatible and is able to provide a MJPEG feed on their own. Is it still necessary to configure ffmpeg for the binding to work? at least using the marketplace widget “Camera: Clickable thumbnail opens to a larger stream” does not retrieve the stream.

My thing:

UID: ipcamera:onvif:BinderDoor
label: BinderDoor
thingTypeUID: ipcamera:onvif
configuration:
  mjpegOptions: -q:v 5 -r 2 -vf scale=640:-2 -update 1
  ipAddress: 192.168.78.30
  updateImageWhen: "0"
  onvifPort: 80
  gifPreroll: 0
  ipWhitelist: DISABLE
  mp4OutOptions: -c:v copy -c:a copy
  pollTime: 1000
  password: xxx
  port: 80
  snapshotOptions: -an -vsync vfr -q:v 2 -update 1
  ptzContinuous: false
  onvifMediaProfile: 0
  username: yyy
  hlsOutOptions: -strict -2 -f lavfi -i aevalsrc=0 -acodec aac -vcodec copy
    -hls_flags delete_segments -hls_time 2 -hls_list_size 4
  gifOutOptions: -r 2 -filter_complex
    scale=-2:360:flags=lanczos,setpts=0.5*PTS,split[o1][o2];[o1]palettegen[p];[o2]fifo[o3];[o3][p]paletteuse
channels:
  - id: startStream
    channelTypeUID: ipcamera:startStream
    label: Start HLS Stream
    description: Lower the delay to start casting the camera by creating the files
      non stop in case they are needed.
    configuration: {}
  - id: pollImage
    channelTypeUID: ipcamera:pollImage
    label: Poll Image
    description: This can be used to trigger snapshot updates when an external PIR,
      button or other form of sensor turns this channel ON.
    configuration: {}
  - id: image
    channelTypeUID: ipcamera:image
    label: Image
    description: Low frame rate image from your camera. Recommend this is NOT used
      unless you have large pollTime.
    configuration: {}
  - id: recordingGif
    channelTypeUID: ipcamera:recordingGif
    label: GIF Recording
    description: Indicates how long the recording will occur for and when the file
      is created, the channel will change to 0 by itself.
    configuration: {}
  - id: gifHistory
    channelTypeUID: ipcamera:gifHistory
    label: GIF History
    description: A history of the last GIFs created in a CSV formatted string.
    configuration: {}
  - id: gifHistoryLength
    channelTypeUID: ipcamera:gifHistoryLength
    label: GIF History Length
    description: How many GIFs are stored in the history.
    configuration: {}
  - id: recordingMp4
    channelTypeUID: ipcamera:recordingMp4
    label: MP4 Recording
    description: Indicates how long the recording will occur for and when the file
      is created, the channel will change to 0 by itself.
    configuration: {}
  - id: mp4History
    channelTypeUID: ipcamera:mp4History
    label: MP4 History
    description: A history of the last mp4 recordings created in a CSV formatted string.
    configuration: {}
  - id: mp4HistoryLength
    channelTypeUID: ipcamera:mp4HistoryLength
    label: MP4 History Length
    description: How many mp4 recordings are stored in the history.
    configuration: {}
  - id: lastMotionType
    channelTypeUID: ipcamera:lastMotionType
    label: Last Motion Type
    description: A string that contains the type of motion alarm that was last triggered.
    configuration: {}
  - id: ffmpegMotionControl
    channelTypeUID: ipcamera:ffmpegMotionControl
    label: Control FFmpeg Motion Alarm
    description: Enable/Disable the motion alarm and control the sensitivity.
    configuration: {}
  - id: ffmpegMotionAlarm
    channelTypeUID: ipcamera:ffmpegMotionAlarm
    label: FFmpeg Motion Alarm
    description: FFmpeg has detected motion.
    configuration: {}
  - id: thresholdAudioAlarm
    channelTypeUID: ipcamera:thresholdAudioAlarm
    label: Audio Alarm Threshold
    description: By moving this control you should be able to change how sensitive
      the audio alarm is to soft or loud noises.
    configuration: {}
  - id: audioAlarm
    channelTypeUID: ipcamera:audioAlarm
    label: Audio Alarm
    description: Audio has triggered an Alarm.
    configuration: {}
  - id: externalMotion
    channelTypeUID: ipcamera:externalMotion
    label: External Motion
    description: Use any external sensor like a ZWave PIR sensor to flag that the
      camera has motion in its field of view.
    configuration: {}
  - id: motionAlarm
    channelTypeUID: ipcamera:motionAlarm
    label: Motion Alarm
    description: Motion has been detected.
    configuration: {}
  - id: cellMotionAlarm
    channelTypeUID: ipcamera:cellMotionAlarm
    label: Cell Motion Alarm
    description: Cell based motion has been detected.
    configuration: {}
  - id: lineCrossingAlarm
    channelTypeUID: ipcamera:lineCrossingAlarm
    label: Line Crossing Alarm
    description: Motion has been detected.
    configuration: {}
  - id: fieldDetectionAlarm
    channelTypeUID: ipcamera:fieldDetectionAlarm
    label: Field Alarm
    description: Intrusion has detected movement. AKA Field Detection Alarm.
    configuration: {}
  - id: faceDetected
    channelTypeUID: ipcamera:faceDetected
    label: Face Detected Alarm
    description: A face has been detected.
    configuration: {}
  - id: parkingAlarm
    channelTypeUID: ipcamera:parkingAlarm
    label: Parking Alarm
    description: A car has triggered the Parking Detection.
    configuration: {}
  - id: itemLeft
    channelTypeUID: ipcamera:itemLeft
    label: Item Left Alarm
    description: An item has been left.
    configuration: {}
  - id: itemTaken
    channelTypeUID: ipcamera:itemTaken
    label: Item Taken Alarm
    description: An item may have been stolen.
    configuration: {}
  - id: tamperAlarm
    channelTypeUID: ipcamera:tamperAlarm
    label: Tamper Alarm
    description: Camera may be stolen or damaged.
    configuration: {}
  - id: tooDarkAlarm
    channelTypeUID: ipcamera:tooDarkAlarm
    label: Too Dark Alarm
    description: Image is too dark.
    configuration: {}
  - id: storageAlarm
    channelTypeUID: ipcamera:storageAlarm
    label: Storage Alarm
    description: An issue with the cameras storage has been reported.
    configuration: {}
  - id: sceneChangeAlarm
    channelTypeUID: ipcamera:sceneChangeAlarm
    label: Scene Change Alarm
    description: Camera may have been moved.
    configuration: {}
  - id: tooBrightAlarm
    channelTypeUID: ipcamera:tooBrightAlarm
    label: Too Bright Alarm
    description: Image is too bright.
    configuration: {}
  - id: humanAlarm
    channelTypeUID: ipcamera:humanAlarm
    label: Human Alarm
    description: A person has triggered the Human Detection.
    configuration: {}
  - id: animalAlarm
    channelTypeUID: ipcamera:animalAlarm
    label: Animal Alarm
    description: An animal has triggered the object detection.
    configuration: {}
  - id: carAlarm
    channelTypeUID: ipcamera:carAlarm
    label: Car Alarm
    description: A car has triggered the Vehicle Detection.
    configuration: {}
  - id: tooBlurryAlarm
    channelTypeUID: ipcamera:tooBlurryAlarm
    label: Too Blurry Alarm
    description: Image is out of focus.
    configuration: {}
  - id: gotoPreset
    channelTypeUID: ipcamera:gotoPreset
    label: Go To Preset
    description: Move a P.T.Z camera to this ONVIF preset location.
    configuration: {}
  - id: mjpegUrl
    channelTypeUID: ipcamera:mjpegUrl
    label: MJPEG URL
    description: A link you can use in openHAB/HABpanel to fetch a MJPEG video feed
      from the camera.
    configuration: {}
  - id: rtspUrl
    channelTypeUID: ipcamera:rtspUrl
    label: RTSP URL
    description: A link that the camera uses for RTSP.
    configuration: {}
  - id: imageUrl
    channelTypeUID: ipcamera:imageUrl
    label: Image URL
    description: A link you can use to fetch a static image from the camera.
    configuration: {}
  - id: hlsUrl
    channelTypeUID: ipcamera:hlsUrl
    label: HLS URL
    description: A link you can use in openHAB to cast video feeds.
    configuration: {}
5

Just give that config the http based url that gives you mjpeg and the binding will not use ffmpeg. I just updated the binding to support rtsp urls in that config, however all rtsp based urls will fall back to using ffmpeg and this is only in snapshot builds until the next milestone is released.

1 Like
6

ok, thanks!

7

Hi @matt1,
First of, thank you for all the work you put into the binding & widgets!! Just a question, everything is working as it should, but for some reason, when i start from the first video, i can go back in history and view the recorded videos, but only up and till 49. If I try to view a video with the folder counyer at 50 and above(51,52,53) it fails. Openhab logs doesn’t give any feedback when this happens. Any ideas?

8

The binding limits it to stop the channel from using unlimited memory or hitting another limit. I think its a good idea to make this limit configurable so you can change it to a higher value. Did u want this or just wanted to know the reason why?

I’m guessing most people do not use this or know about this ability so keeping it to a low default value so the ram usage is low is what I think is best then you can up the value of you want 50+ history stored.

For me 50 is enough as I reduce false positives so that 50 visitors to my front door is more then I need.

9

Hi Matt, thank you for clearing that up, at least now I know why its doing it.
I guess there won’t be a simple way to go around this?
I was hoping to use the widget, kinda like a NVR if you might, to go back in history for a week or so to view videos. Is there maybe another way to do this, to access the saved clips on the drive?

10

You can specify the output folder for the video on the thing configuration.
so you can access the videos in this folder
Greets