Html5 push notifications with image

Configuration
28

I’m still not able to pull a screenshot from my IP camera. HA does save a jpg in the local folder but it doesn’t attach the picture.

This is my automation.yaml:

- alias: Pic Notification
  initial_state: 'on'
  hide_entity: True
  trigger:
  - platform: state
    entity_id: binary_sensor.door_window_sensor_158d00332db7b2
    from: 'off'
    to: 'on'
  action:
    - service: camera.snapshot
      data_template:
        entity_id: camera.dahua_ipc
        filename: "/config/www/snapshots/camera.dahua_ipc.jpg"
    - service: notify.html5
      data:
        title: 'TEST'
        message: 'There is someone at the door'
        data:
          tag: alert
          image: "https://ipaddres:8123/local/snapshots/camera.dahua_ipc.jpg"
29

You must be able to access image directly from web(internet not local) from provided link.
If password is used for HA you must include that in url as shown in example

1 Like
30

@goprojojo did you solve your problem? and did you use hass.io?

31

@tmjpugh

i tried this:

- service: notify.html5
      data:
        title: 'TEST'
        message: 'teste'
        data:
          tag: alert
          image: "http://weknowyourdreams.com/images/cobra/cobra-13.jpg"

but not Works… i receive the notify but the image not shows. but i use hass io

32

Your image is http
https may be required but not sure

Which browser you try?

1 Like
33

I am tried with chrome on my cell android and my pc.
I receive the notification but not image. I use hass.io

34

My guess is problem is image being used.
I will find example image so you may test

Also FYI
Timestamp field currently not working.
Current work around is add timestamp in the message field as below

- data:
    message: '{{ as_timestamp(now()) | timestamp_custom(''%H:%M'', true) }} - Covers are 
              going to be closed.'
  service: notify.my_notifier

Refer to link below for details on timestamp

35

Guys, is it possible to expand notification to see full image? My image is cropped vertically inside of notification. I tried to pull with 2 fingers, but no success. When i click on the notification it’s just gone.

36

No sorry, still looking for a proper script to pull image from my hikvision or dahua cameras. Hope someone has the same setup and can share the script?

1 Like
37

Having issue with notification image, do I still need html5.py and change this in py?

HTML5_SHOWNOTIFICATION_PARAMETERS = (
    'actions', 'badge', 'body', 'dir', 'icon', 'image', 'lang', 'renotify',
    'requireInteraction', 'tag', 'timestamp', 'vibrate')
38

I have the same problem, why image is not supported?

1 Like
39

no need to change html5.py
the following notification extract, sends a snapshot from my www(local) folder

  - service: notify.html5_juan_samsung_phone
    data:
      title: "Magda has arrived"
      message: "Magda is here."
      data:
        tag: alert
        image: "https://myserverip/local/travel_time/street_view_magda_gps.jpg"
40

When I try to send a RTSP image it doesn’t work now, there is some reason?

{
    "title": "!!! ALLARME COLLINA !!!",
    "message": "Allarme attivato, tra 2 minuti partono le chiamate.",
    "data": {
        "data": [
            {
                "image": "https://sulparo.duckdns.org:8123/api/camera_proxy/camera.cam_0_rtsp?api_password=*******"
            }
        ],
        "actions": [
            {
                "action": "Disabilita",
                "title": "Disabilita Allarme"
            }
        ]
    }
}
41

Do you have api_password enabled?

Does image open in web browser? If work in browser should be OK

42

Yes yes is anabled and in the browser I see the image.

43

This work for me

{
  "data": {
    "image": "https://domain.com/api/camera_proxy/camera.south_gate",
    "renotify": 1,
    "tag": "alert",
    "timestamp": "%m",
    "url": "https://domain.com/states/group.camera",
    "vibrate": "700, 700, 700"
  },
  "message": "{{ as_timestamp(now()) | timestamp_custom('%H:%M', true) }}",
  "title": "Pool Motion"
}
44

Yes, this works also for me… But how can I add a action button??

45

Like this

action:
  - data:
      data:
        actions:
        - action: Open_Entry_Gate
          title: Open Gate
        - action: Dismiss
          title: Dismiss

Sorry about the poor formatting but this came from autoconfig file created by automation UI in HA and I do not want to muck around with spacing and provide something that hasnt been verified functional

To make button you need (x2) automation.

AUTOMATION 1
generates the notification and includes the buttons

AUTOMATION 2
receives the button response from HTML5 message and does the action you set

---------Below are code examples of each-------------

AUTOMATION 1 EXAMPLE
When Ring Doorbell Motion is sensed, a message is sent that has buttons [Open Gate] and [Dismiss] with some text and an image
action>>data>>data>>actions>>action defines the button

- id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  alias: NOTIFY_GateMotion
  trigger:
  - entity_id: binary_sensor.ring_entry_gate_ding
    from: 'off'
    platform: state
    to: 'on'
  - entity_id: binary_sensor.ring_entry_gate_motion
    from: 'off'
    platform: state
    to: 'on'
  action:
  - data:
      data:
        actions:
        - action: Open_Entry_Gate
          title: Open Gate
        - action: Dismiss
          title: Dismiss
        image: https://mysite.com/api/camera_proxy/camera.front_door
        renotify: 1
        tag: alert
        timestamp: '%m'
        url: https://mysite.com/states/group.garage
        vibrate: 700, 700, 700
      message: '{{ as_timestamp(now()) | timestamp_custom(''%H:%M'', true) }}'
      title: Entry Gate Motion
    service: notify.notify

AUTOMATION 2 EXAMPLE
When “Open Gate” pressed in Automation 1 notification, HA receive some listener reply and perform an action. It knows the action to perform based on the “action” specified in both automations. In this case the action will Turn ON entry gate (open gate)
trigger>>event_data>>action identifies the listener and should match action for automation 1 button

- id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  alias: NOTIFY_Html5NotificationClicked
  trigger:
  - event_data:
      action: Open_Entry_Gate
    event_type: html5_notification.clicked
    platform: event
  action:
  - entity_id: switch.entry_gate
    service: switch.turn_on
3 Likes
46

How do I feed the user credentials to access API, so that I can get camera images?

48

My image was cropped like @deviant experienced way back in 2018.
I fixed this now by giving the notification the url under data to be send to the entity_picture when you click the notification.
When someone rings my doorbell I have an automation with the following action:
Sending html5 notification with: message, picture of cam1 (cropped), 2 buttons to open the door and when you click the notification it opens the full image.

   action:
   - service: notify.html5notify
     data:
       message: "Ding Dong, deurbel ingedrukt"
       data:
            actions:
              - action: open_door_5s
                title: Deur open 5s
              - action: open_door_10s
                title: Deur open 10s
            image: https://yourthing.duckdns.org/api/camera_proxy/camera.cam1?token=[use your own access token here]
            url: https://yourthing.duckdns.org/api/camera_proxy/camera.cam1?token=[use your own access token here]