如何在iOS中全屏显示Twilio远程视频视图“ TVIVideoView”

Question

I am using Twilio for Video calling and its working fine but the only issue is unable to set the full screen for remote video.Below code is a way to create remote video setup by Twilio in their QuickStart Project .

Xcode Version: 9.3 Swift Version: 4.1

func setupRemoteVideoView() {
    // Creating `TVIVideoView` programmatically
    self.remoteView = TVIVideoView.init(frame: CGRect.zero, delegate:self)
    self.view.insertSubview(self.remoteView!, at: 0)

    // `TVIVideoView` supports scaleToFill, scaleAspectFill and scaleAspectFit
    // scaleAspectFit is the default mode when you create `TVIVideoView` programmatically.
    self.remoteView!.contentMode = .scaleAspectFit;

    let centerX = NSLayoutConstraint(item: self.remoteView!,
                                     attribute: NSLayoutAttribute.centerX,
                                     relatedBy: NSLayoutRelation.equal,
                                     toItem: self.view,
                                     attribute: NSLayoutAttribute.centerX,
                                     multiplier: 1,
                                     constant: 0);
    self.view.addConstraint(centerX)
    let centerY = NSLayoutConstraint(item: self.remoteView!,
                                     attribute: NSLayoutAttribute.centerY,
                                     relatedBy: NSLayoutRelation.equal,
                                     toItem: self.view,
                                     attribute: NSLayoutAttribute.centerY,
                                     multiplier: 1,
                                     constant: 0);
    self.view.addConstraint(centerY)
    let width = NSLayoutConstraint(item: self.remoteView!,
                                   attribute: NSLayoutAttribute.width,
                                   relatedBy: NSLayoutRelation.equal,
                                   toItem: self.view,
                                   attribute: NSLayoutAttribute.width,
                                   multiplier: 1,
                                   constant: 0);
    self.view.addConstraint(width)
    let height = NSLayoutConstraint(item: self.remoteView!,
                                    attribute: NSLayoutAttribute.height,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.height,
                                    multiplier: 1,
                                    constant: 0);
    self.view.addConstraint(height)
}

Answer 1

Here's your code tidied a little:

  func setupRemoteVideoView() {
        // Creating `TVIVideoView` programmatically
        self.remoteView = TVIVideoView.init(frame: CGRect.zero, delegate: self)
        self.view.insertSubview(self.remoteView, at: 0)

        // `TVIVideoView` supports scaleToFill, scaleAspectFill and scaleAspectFit
        // scaleAspectFit is the default mode when you create `TVIVideoView` programmatically.

        self.remoteView.contentMode = .scaleAspectFit
        remoteView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        remoteView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        remoteView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
        remoteView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
        view.setNeedsLayout()
    }

Here are the important changes:

  remoteView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true remoteView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true remoteView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true remoteView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true view.setNeedsLayout() 

But since these changes are so big I'll show you how it fits into a view controller (this compiles)

import UIKit

class TVIVideoView: UIView {
    var delegate: UIViewController
    init(frame: CGRect, delegate: UIViewController) {
        self.delegate = delegate
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class ViewController: UIViewController {
    var remoteView =  UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func setupRemoteVideoView() {
        // Creating `TVIVideoView` programmatically
        self.remoteView = TVIVideoView.init(frame: CGRect.zero, delegate: self)
        self.view.insertSubview(self.remoteView, at: 0)
        // `TVIVideoView` supports scaleToFill, scaleAspectFill and scaleAspectFit
        // scaleAspectFit is the default mode when you create `TVIVideoView` programmatically.
        self.remoteView.contentMode = .scaleAspectFit
        remoteView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        remoteView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        remoteView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
        remoteView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
        view.setNeedsLayout()
    }
}

Discussion:

Do a little research on autolayout. (Apple has excellent documentation including a Swift book.) Autolayout has improved a lot since the code provided by Twilio was current. Anchors simplify the process immensely. The key things to remember with auto layout are:

• the view must be added to a parent
• you must activate constraints

• there must be enough constraints for the system to calculate a height, width and starting point. (the easy way to remember this is that your constraints are ultimately turned into a frame (CGRect) by the system

  -- I'm simplifying a bit, but that's the gist of it. If any of this is unclear let me know and I'll edit my answer. 🍀