1

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)
}
Asad Jamil
  • 198
  • 9

1 Answers1

-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.

Mozahler
  • 4,958
  • 6
  • 36
  • 56
  • 1
    I tried your code snippet, but the problem is still there I want to make remote screen full. I'm attaching an image to give you a better understanding. – Asad Jamil Apr 25 '18 at 12:58
  • I want to make this remote video section to entire screen https://www.dropbox.com/s/pz1fe5saolisx1y/IMG_1472-2.PNG?dl=0 – Asad Jamil Apr 25 '18 at 13:05
  • I aslo tried changing this "self.remoteView!.contentMode = .scaleAspectFit" to "self.remoteView!.contentMode = .scaleAspectFill" but it pixelate the picture/video – Asad Jamil Apr 25 '18 at 13:07
  • Why downvote my attempt to help explain concepts to someone interested in learning? smh – Mozahler Mar 31 '19 at 17:27
  • Where? The most recent edit I see dates back to April 2018. – Mozahler Jul 20 '19 at 15:47