How to rotate camera view

Configuration Frontend
1

Hello,

I have a foscam FI9900EP and have the stream on a picture-glance card :

  - card:
      camera_view: auto
      type: picture-glance
      entities: []
      camera_image: camera.fi9900ep_garage
      tap_action:
        action: navigate
        navigation_path: security-garagedoor
      hold_action:
        action: none
    attributes:
      label: Garagedoor

Works fine, except that I want to rotate the picture with 90 degrees…how can I do this ?

2

card-mod + style “transform: rotate(90deg)” for the image element.

3

Found it, thanks !

4

Hey, can you share the final code please? :slight_smile:

5

Imho this question should be addressed to the topic starter

6
7

I found this out by accident:

I used the camera integration to add a camera entity with the rtsp stream of my camera.
While adding a card to a lovelace dashboard I tried adding it by entity. I looked for my new camera entity I just created and clicked on the name of it. The stream opened. I clicked on the gear icon in the upper right corner and in the menu I could change the camera’s orientation.

Bottom line: The orientation can be changed in the options of the entity.

8

Could you give the complete code ? I cant figure out how to implement it

9

I do not have a ready code. Just gave a proposal. Since the author marked it as a solution - better to ask him.

12

could u share the whole code I cant figure out how to implement it

13

I was looking for a solution to this myself and found this thread here - but was struggling as the solution lacked detail. So, for others that end up here looking for a solution, maybe this will help:

1 Like
14

this code works for me:

type: custom:webrtc-camera
url: cam_voordeur_sub_2
media: video
style: |
  ha-card {
    height: 360px;
    width: 250px;
  }
  video {
    transform: rotate(270deg);
    object-fit: contain;
  }
15

I know nothing about this card - but this card-mod code MAY work only with old versions of card-mod since starting from some version it requires a “card_mod” keyword.

16

Latest version I think (no updates pending in HACS or HA)

I added the keyword, makes no noticable difference in the dashboard.

type: custom:webrtc-camera
url: cam_voordeur_sub_2
media: video
card_mod:
  style: |
    ha-card {
      height: 360px;
      width: 250px;
    }
    video {
      transform: rotate(270deg);
      object-fit: contain;
    }
17

The latest version of card-mod cannot work w/o that “card_mod” keyword.