Viewing multiple images in directory captured from IP camera

hi all,

I have a couple IP cameras set up, and have them capture several still images if a motion sensor is triggered whilst I’m out.

Is there a way to view those images in the front end.

I have added my code below. I’m sure there is a way more elegant solution to this, but not sure how??

- id: 'cam_pic'
  alias: 'cam picture notification'
  trigger:
    - platform: state
      entity_id: sensor.hall_motion_sensor
      to: 'on'
  condition:
    - condition: state
      entity_id: group.family
      state: 'not_home'
  action:
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: notify.hassionotify      
      data:
        title: 'Motion in the hall'
        message: "Motion detected in the hall {{now().strftime('%H:%M %d-%m-%Y')}}"
        data:
          tag: alert
          url: 'https://MYDOMAIN.duckdns.org'
          image: 'https://MYDOMAIN.duckdns.org/local/images/hall_{{ now ().year }}_{{ now ().month
        }}_{{ now ().day }}_{{ now ().hour }}_{{ now ().minute }}.jpg'
          vibrate:
            - 300
            - 100
            - 400    
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - delay: '00:00:01'
    - service: camera.snapshot
      data:
        entity_id: camera.fire_security
        filename: '/config/www/images/hall_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'
    - service: camera.snapshot
      data:
        entity_id: camera.iphone_security
        filename: '/config/www/images/kitchen_{{ now ().hour }}_{{ now ().minute }}_{{ now ().second }}.jpg'

If you make one of the pics a static file name that is just overwritten by the latest pic, you could just display that on a picture-entity card.

trouble with that is I need to capture several images otherwise the intruder wouldn’t necessarily be pictured.

To be fair, maybe I should be involving some sort of cctv server software or something, but I’m struggling to find something free and Mac!

Budget is of the essence here! My two cameras are an old iPhone and an Amazon Kindle!