Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Use Live Video Call API To Build Video Call App

How To Use Live Video Call API To Build Video Call App

The Video Call function has become the core function of many applications, such as FaceTime, WhatsApp , Duo, Messenger, Zoom etc. Video Call also became Functions that people often use in their daily lives.

How do we add Video Call functionality to our app?

This article will show you how to use the live video call API to implement Video Call functionality quickly. We will implement the following functions:

  • 1v1 video call
  • Group video call
  • Camera switching
  • Microphone, speaker management
  • Video view drag

Introduction to UIKits SDK

UIKits SDK is a brand-new pre-built UIKits and UI Components by ZEGOCLOUD. Through it, We can complete the development of video calls, live streaming, video conference, and other scenarios within 30 minutes.

live video call API


As shown in the figure, UIKits SDK is responsible for processing audio and video calls and the logic related to text chat. Include:

  • UI and interaction of the calling module
  • call status management
  • Audio and video data transmission

You only need to implement business-related logic. For example:

  • User login registration
  • Friends List Management
  • Call billing recharge

When to use UIKits SDK

  • Testing Tools In the early stage of market research, quickly verify customer needs.
  • MVP Quickly realizes minimal products, demonstrates market demand, and gains investor trust.
  • In-app plugins Added audio and video calling module to improve daily application activities and increase user stickiness.

Preparation

  • A ZEGOCLOUD developer account — Register
  • Xcode 12.3 or later
  • Devices with iOS 12.0 or later
  • Basic understanding of iOS development

UIKits SDK integration

Create project

We first create a new project through Xcode and create a new App project through File -> New -> Project -> App.

create live video call api demo

Import SDK

1)Create Podfile

Open Terminal, navigate to your project’s root directory, and run the pod init command to create a Podfile.

pod init
pod init

2)Add SDK dependencies

Open the Podfile file and add the pod 'ZegoUIKitPrebuiltCall' SDK dependency.

podfile edit

3)Install SDK

Open Terminal, and execute the pod install command to install the SDK.

pod install
pod install

Implement Video Call

After completing the preparatory work, you can start writing code. Use Xcode to open the file with the suffix .xcworkspace in the project root directory.

Camera & microphone permission application

Before coding, we first register the camera and microphone permission in the info.plist file.

<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
camera microphone permission application

Add a Call Button

Add a Call button in Main.storyboard, and add a button click event listener in ViewController.

add call button

Add call method

Finally, complete the SDK access in the ViewController file according to the following four steps.

video call api

1) Import the ZegoUIKitPrebuiltCall and ZegoUIKitSDK library

import ZegoUIKitPrebuiltCall
import ZegoUIKitSDK

2) Add constant definition

let appID: UInt32 = <#Your App ID#>
let appSign = <#Your App Sign#>
let callID = "callID111"
let userID = "userID" + String(Int.random(in: 0..<1000))
let userName = "User" + String(Int.random(in: 0..<100))

3) Add call logic

private func oneOnOneVideoCall() {
    let config: ZegoUIKitPrebuiltCallConfig = ZegoUIKitPrebuiltCallConfig(.oneOnOneVideoCall)
    let callVC = ZegoUIKitPrebuiltCallVC(appID, appSign: appSign, userID: userID, userName: userName, callID: callID, config: config)
    callVC.modalPresentationStyle = .fullScreen
    self.present(callVC, animated: true, completion: nil)
}

4) Call the method implemented in step 3

@IBAction func pressCallButton(_ sender: UIButton) {
    oneOnOneVideoCall()
}

Run a demo

1v1 video call UI configuration

The UIKits SDK provides a wealth of custom configuration items, and UI interaction can be quickly modified by setting different parameters.

1V1 video call scene settings can be done through the ZegoLayoutPictureInPictureConfig configuration item:

1)showMyViewWithVideoOnly: Whether to display my view when my camera is turned off, displayed by default.
2) isSmallViewDraggable: Whether the position of the small view in the picture-in-picture layout can be changed by dragging. It’s allowed by default.
3) switchLargeOrSmallViewByClick: Whether to allow users to click on the small view for switching between large view and small view. It’s allowed by default.

private func pictureInPictureLayout() {
    // Modify your custom configurations here.
    let config: ZegoUIKitPrebuiltCallConfig = ZegoUIKitPrebuiltCallConfig(.oneOnOneVideoCall)

    let layout: ZegoLayout = ZegoLayout()
    layout.mode = .pictureInPicture
    let pipConfig: ZegoLayoutPictureInPictureConfig = ZegoLayoutPictureInPictureConfig()
    pipConfig.showMyViewWithVideoOnly = true;
    pipConfig.isSmallViewDraggable = true;
    pipConfig.switchLargeOrSmallViewByClick = true;
    layout.config = pipConfig
    config.layout = layout

    let callVC = ZegoUIKitPrebuiltCallVC(appID, appSign: appSign, userID: userID, userName: userName, callID: callID, config: config)
    callVC.modalPresentationStyle = .fullScreen
    self.present(callVC, animated: true, completion: nil)
}

Group Video Call UI configuration

If you are doing a group video call application, the Video Call API can configure the group video call UI via ZegoLayoutGalleryConfig.

private func galleryLayout() {
    // Modify your custom configurations here.
    let config: ZegoUIKitPrebuiltCallConfig = ZegoUIKitPrebuiltCallConfig(.groupVideoCall)

    let layout: ZegoLayout = ZegoLayout()
    layout.mode = .gallery
    let layoutConfig: ZegoLayoutGalleryConfig = ZegoLayoutGalleryConfig()
    layoutConfig.addBorderRadiusAndSpacingBetweenView = false;
    layout.config = layoutConfig
    config.layout = layout

    let callVC = ZegoUIKitPrebuiltCallVC(appID, appSign: appSign, userID: userID, userName: userName, callID: callID, config: config)
    callVC.modalPresentationStyle = .fullScreen
    self.present(callVC, animated: true, completion: nil)
}

Conclusion

The Live Video Call API is designed to be simpler, so that we don’t need to spend a lot of time studying the use of APIs, and can focus on business logic implementation.

If you are interested in developing audio and video applications, you can download the sample Demo source code of this article.

If you have deeper requirements, such as streaming mix, noise reduction, censorship, etc. you can use our Core SDK.

If you have any questions, you can always consult us 24h technical support

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us