Whiteboard - iOS

A whiteboard is a digital canvas that allows users to collaborate in real-time by drawing, writing, and sharing ideas visually, making it ideal for brainstorming, presentations, and teamwork.

Before initiating a whiteboard session, it is essential to have an active VideoSDK Room in progress.

Starting the Whiteboard

To start the whiteboard in a room, invoke the startWhiteboard() method of the Room class.

Upon successful execution, the onWhiteboardStarted event will return a url.

You can embed the url into a WKWebView to display the whiteboard session within your iOS app.

Stopping the Whiteboard

To stop the whiteboard session, call the stopWhiteboard() method of the Room class. This will trigger the onWhiteboardStopped event, halting the whiteboard for all participants.

startWhiteboard() and stopWhiteboard() are async throws, so call them with try await inside a Task. They throw a VideoSDKError if the call fails, for example ERROR_ACTION_PERFORMED_BEFORE_ROOM_JOINED before you join the room, or WHITEBOARD_OPERATION_IN_PROGRESS while an earlier start or stop is still running.

Example

Swift

import UIKit
import WebKit
import VideoSDKRTC

class RoomViewController: UIViewController {
  private var room: Room?
  private var isWhiteboardStarted = false

  private var webView: WKWebView?

  override func viewDidLoad() {
    super.viewDidLoad()
    //setup ui
    //setup actions
    setupWebView()

    do {
      room = try VideoSDK.createRoom(
        roomId: "<roomId>",
        token: "<token>"
        //... Initialization parameters
      )
      room?.addEventListener(self)
      // join the room before you start the whiteboard
    } catch {
      print("Failed to initialize the room: \(error)")
    }
  }

  //setup webview
  private func setupWebView() {
       // Create WKWebView
       webView = WKWebView(frame: .zero)
       guard let webView = webView else { return }

       webView.translatesAutoresizingMaskIntoConstraints = false

       // Add WKWebView to the view hierarchy
       view.addSubview(webView)

       // Set up constraints
       NSLayoutConstraint.activate([
           webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
           webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
           webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
           webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
       ])
       // Initially hide the WebView
       webView.isHidden = true
   }
  // show webview
  func showWebView(with url: URL) {
      guard let webView = webView else { return }

      let request = URLRequest(url: url)
      webView.load(request)
      webView.isHidden = false
  }
  // hide webview
  func hideWebView() {
      webView?.isHidden = true
  }
}

extension RoomViewController {
  // Start or stop the Whiteboard
  @IBAction func toggleWhiteboardTapped(_ sender: Any) {
      Task {
          do {
              if isWhiteboardStarted {
                  try await room?.stopWhiteboard()
              } else {
                  try await room?.startWhiteboard()
              }
          } catch {
              print("Whiteboard error: \(error)")
          }
      }
    }
}

// Handle Whiteboard State Changed Event
extension RoomViewController: RoomEventListener {
  func onWhiteboardStarted(url: URL) {
        DispatchQueue.main.async {
          self.isWhiteboardStarted = true
          self.showWebView(with: url)
        }
    }

  func onWhiteboardStopped() {
        DispatchQueue.main.async {
          self.isWhiteboardStarted = false
          self.hideWebView()
        }
    }
}

Events Associated with startWhiteboard() and stopWhiteboard()

• onWhiteboardStarted: Fired when the whiteboard is successfully started and it will return the url.

• onWhiteboardStopped: Fired when the whiteboard session is stopped for all participants.

Swift

extension RoomViewController: RoomEventListener {
  func onWhiteboardStarted(url: URL) {
      print("Whiteboard Started Successfully with url:", url)
    }

  func onWhiteboardStopped() {
       print("Whiteboard Stopped Successfully")
    }
}

API Reference

• startWhiteboard()
• stopWhiteboard()
• onWhiteboardStarted()
• onWhiteboardStopped()