Foscam, got it to work - sort of... not fully

Hi,
this is my very very first post, so I am sorry if i do anything wrong. I apologize in advance. Also I beg to forgive my limited capabilities in the english language as I am not a native speaker (if you see any mistakes, I would apprechiate it if you would correct me so I can improve)

I have searched and found posts here, which seem to be abandoned (last answer sometimes several years ago) I found you tube videos which are either about other cams or in a foreign language which i do not speak.

I bought a Foscam - Apparently a 8010 (?) at least when i enter
h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=getProductModel&usr=XXX&pwd=XXX
I get

<CGI_Result>
    <result>0</result>
    <model>8010</model>
</CGI_Result>

and for
h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=getDevInfo&usr=XXX&pwd=XXX
I get

<CGI_Result>
    <result>0</result>
    <productName>IPS2021</productName>
    <serialNo>0000000000000001</serialNo>
    <devName>Foscam_Camera</devName>
    <mac>ABCDE12345</mac>
    <year>2021</year>
    <mon>8</mon>
    <day>26</day>
    <hour>12</hour>
    <min>25</min>
    <sec>10</sec>
    <timeZone>0</timeZone>
    <firmwareVer>2.101.2.23</firmwareVer>
    <hardwareVer>1.14.2.5</hardwareVer>
    <pkgTime>2000-01-01_00%3A00%3A00</pkgTime>
</CGI_Result>

so i did some searching and found a couple of older topics (some date back years ago) and it seem that foscams are a bit tricky
of course i found the pdf:
h++ps://www.foscam.es/descarga/Foscam-IPCamera-CGI-User-Guide-AllPlatforms-2015.11.06.pdf
but I am stuck!
I wanted to add my cam, have the ability to move it around (got that half working) and see the live stream if i click on it (not just the still image)
How far I got:
I see the still picture in a lovelace card. I created a second card to move the cam around (only works if i am in the same network) and I can see the rtsp stream on vlc (not within home assistant /lovelace)
here is my config:
Cam Card:

type: picture-entity
entity: camera.foscam_camera
camera_image: >-
  h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXX&pwd=XXX
camera_view: rtsp://XXX:[email protected]:88/videoMain
elements:
  - type: icon
    icon: mdi:arrow-up
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveUp&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-down
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomRight&usr=XXX&pwd=XXX

Here I can see the still image of the cam - nothing else - the rtsp video never loads
the controls do not show up
so i have a second card:

type: picture-elements
elements:
  - type: icon
    icon: mdi:arrow-up
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveUp&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-down
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomRight&usr=XXX&pwd=XXX
image: h++ps://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.pngtype: picture-elements
elements:
  - type: icon
    icon: mdi:arrow-up
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveUp&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-down
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 25px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveDown&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 25px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-top-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 50px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveTopRight&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-left
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 50px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomLeft&usr=XXX&pwd=XXX
  - type: icon
    icon: mdi:arrow-bottom-right
    style:
      background: rgba(255, 255, 255, 0.5)
      right: 0px
      bottom: 0px
    tap_action:
      action: url
      url_path: >-
        h++p://1.2.3.4:88/cgi-bin/CGIProxy.fcgi?cmd=ptzMoveBottomRight&usr=XXX&pwd=XXX
image: https://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png

here i have the controls
and they even work - in the way that when i press a button a new website opens (the url of said button)
with

<CGI_Result>
    <result>0</result>
</CGI_Result>

and the cam moves. This of course only works if i use this within my own network. Otherwise the url is not defined.

Has anyone an idea of how i could get this to work properly?

Thank you all in advance for your help.