Swift 3, iOS 10+, xCode 8.3+, Quickblox - Toggle full screen remote stream while keeping aspect ratio/video res

Question

I am working with a webRTC remote video stream and attaching the remote session to this:

@IBOutlet weak var remoteVideoElement: QBRTCRemoteVideoView!

What I want to have happen is when a user taps the outlet above, the remote stream fill the entire window. When the user taps it again, it will return to its place as it was in the layout normally. For the most part it works fine except I cannot maintain the correct aspect ratio or screen resolution of the remote video stream. Can someone help me figure out the right way to get the desired effect?

Here is my code:

var isExpanded = Bool()
var videoPlayerViewCenter = CGPoint()

override func viewDidLoad() {
        super.viewDidLoad()
        isExpanded = false

        let toggleFullScreen = UITapGestureRecognizer(target: self, action: #selector (self.toggleFullScreenRemoteVideo(sender:)))
        self.view.addGestureRecognizer(toggleFullScreen)
}

func toggleFullScreenRemoteVideo(sender: QBRTCRemoteVideoView) {
        if !isExpanded {
            // GO FULL SCREEN
            UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
                self.videoPlayerViewCenter = self.remoteVideoElement.center
                self.view.bringSubview(toFront: self.modalShadeBackground)
                self.view.bringSubview(toFront: self.remoteVideoElement)
                self.remoteVideoElement.frame = CGRect(x: 0, y: 0, width: self.view.frame.height, height: self.view.frame.width)
                self.remoteVideoElement.frame = AVMakeRect(aspectRatio: (self.remoteVideoElement.layer.preferredFrameSize()), insideRect: self.remoteVideoElement.frame)
                self.remoteVideoElement.contentMode = .scaleAspectFit
                self.remoteVideoElement.frame = UIScreen.main.bounds
                self.remoteVideoElement.center = self.view.center
                self.remoteVideoElement.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
                self.remoteVideoElement.layoutSubviews()
            }, completion: nil)
        } else {
            // REVERT BACK TO ORIGINAL CONTRAINTS IN THE LAYOUT
            UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
                self.remoteVideoElement.transform = CGAffineTransform.identity
                self.remoteVideoElement.center = self.videoPlayerViewCenter
                self.view.sendSubview(toBack: self.remoteVideoElement)
                self.view.sendSubview(toBack: self.modalShadeBackground)
                self.remoteVideoElement.frame = AVMakeRect(aspectRatio: (self.remoteVideoElement.layer.preferredFrameSize()), insideRect: self.remoteVideoElement.frame)
                self.remoteVideoElement.layoutSubviews()
            }, completion: nil)
        }
        isExpanded = !isExpanded
    }

Answer 1

I am not sure about QBRTCRemoteVideoView but I solved similar issue with video streaming by getting the ratio of my video image and convert it to the rect of my video view. basically like this:

let xScale = maxImageDrawingArea.size.width / imageSize.width    
let yScale = maxImageDrawingArea.size.height / imageSize.height
let scaleFactor = xScale < yScale ? xScale : yScale;

then get your view size by

let height = maxImageDrawingArea.size.height * scaleFactor
let width = maxImageDrawingArea.size.width * scaleFactor

then use this height and width to draw your video holder in your case remoteVideoElement

Update me how did it go;

Good luck,