Docs Overview/
Live/
UIKit/
iOS/
Video Live Features/
Float Window/

Float Window

Description of the Feature

The Floating Window feature allows the host and viewers to enter Small Window mode without leaving the Live Streaming room. The Small Window floats on the Screen and can be freely dragged to an appropriate Position, displaying the Live Streaming content within the Floating Window. In Floating Window mode, the App can switch to other Scenarios or run in the background. Clicking on the Floating Window can restore the normal full-screen Live Streaming interface.




Use Instructions

Overview

The Principle of the Floating Window is to add the video Live Streaming View as the content of the Floating Window on the rootWindow.

Quick Integration

Core code of the Floating Window feature:
// File location: iOS/TUILiveKit/Sources/Component/FloatWindow
FloatWindow                       // Implementation directory of the core feature of the Floating Window
  ├── FloatWindow.swift           // External interface of the Floating Window feature 
  └── FloatView.swift             // Floating Window View
Floating Window data source:
The ViewController that displays the Floating Window needs to implement the following data source so that the Floating Window can obtain the correct view data.
protocol FloatWindowDataSource: {
    func getRoomId() -> String               // The ID of the current live room     
    func getCoreView() -> LiveCoreView     // The video view displayed on the Floating Window
    func relayoutCoreView()                  // This function is triggered when recovering from the Floating Window state to the original ViewController. It resets the layout of the video view
}

Use cases and examples:

Displaying Floating Window:
class ExampleViewController: UIViewController { 
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
       // To display the Floating Window, the current ViewController needs to implement FloatWindowDataSource
       // The current ViewController will exit when displaying the Floating Window
       FloatWindow.shared.showFloatWindow(controller: self)  
    }
}
Audience clicks to enter a specific live streaming room from the room list:
if FloatWindow.shared.isShowingFloatWindow() {
    if FloatWindow.shared.getCurrentRoomId() == liveInfo.roomInfo.roomId {
      // Switch back to the video live streaming room where the floating window is located
      FloatWindow.shared.resumeLive(atViewController: self.navigationController ?? self)
      return
    } else {
      // Switch to other video live streaming rooms
      FloatWindow.shared.releaseFloatWindow()
    }
}
Host starts streaming:
The floating window feature is not supported for hosts yet, so you need to close any existing floating windows before starting a live stream.
if FloatWindow.shared.isShowingFloatWindow() {
    FloatWindow.shared.releaseFloatWindow()
}

Mode Switch

In the live streaming scenario, during the mode switching process, you need to use the same LiveCoreView object to display the live content in both modes. This not only allows sharing the view but also sharing live streaming data and status.



As shown in the figure above, the normal mode is the LiveViewController scenario, and the floating window mode is the LiveFloatWindow scenario. During the mode switching process, you can use the same LiveCoreView object to ensure the live streaming process proceeds normally.