Fix video rotation via style param

[dbuezas]

Solves incompatibility with rotated video.

Reported in:

• Correct Camera Stream to 16:9 #21 (comment)
• Zoom in rotated 90deg video in WebRTC dbuezas/pan-zoom-controller#1

[AlexxIT]

Are you sure construction ... can pass ESLint?

[dbuezas]

Safari support:

• DomPoint on Safari 10.1
• DomMatrix on Safari 11 (it was called WebKitCSSMatrix before)

[dbuezas]

Are you sure construction ... can pass ESLint?

It shouldn't be an issue: https://caniuse.com/mdn-javascript_operators_spread_spread_in_function_calls

[dbuezas]

I'm also transpiling from typescript to es2015/es6, which begins support on Safari 10, so I would be extremely surprised if there are any syntax issues.

[gtxaspec]

+1 for this, solves video rotation not working with PTZ enabled =D

[gtxaspec]

@dbuezas I applied these changes manually, and rotation + ptz works in Firefox but not Chrome Beta... Version 115.0.5790.98 (Official Build) beta (64-bit), or in the Android HAOS App... wondering if you can test or if it's just me.

[AlexxIT]

@dbuezas maybe it's easier to implement rotation param for card. So users shouldn't use custom style for that

[dbuezas]

I use chrome and the android app and it works for me. Maybe you haven't cleared cache?

Regarding styling in general, I also use it myself to cut a video in half in a "double lense" camera, so it is quite useful to have it IMO

[gtxaspec]

I use chrome and the android app and it works for me. Maybe you haven't cleared cache?

Regarding styling in general, I also use it myself to cut a video in half in a "double lense" camera, so it is quite useful to have it IMO

You're right! My mistake, it works well!

[AlexxIT]

Thanks!

[dbuezas]

I'm not sure if I left a comment on how the heck this works, so here it is:

• the user rotated/skewed/cropped (transformed) the video via css
• The digital ptz needs to know if the browser added black bars to center the video while in full screen, so the same place is zoomed
• this picks the transform the user did and the original aspect ratio of the video, and figures out the aspect ratio of the bounding box of the transformed video
• with that and the dimensions of the screen, this figures out where the browser added black bars to center the video
• Now it can finally ensure that zoom and pan are consistent between the full screen and normal players

[dbuezas]

Oh, and adds a wrapper element around the video so it can manipulate it without interfering with the user styles

[AlexxIT]

https://github.com/AlexxIT/WebRTC/releases/tag/v3.3.0