Whiteboard - Flutter

The Whiteboard is an interactive, shared canvas that enables users to collaborate in real-time within your Flutter application. It allows multiple participants to draw, write, and add annotations simultaneously, making it ideal for rooms, presentations, brainstorming sessions, and other collaborative activities.

This documentation will guide you on how to start and stop the whiteboard, and handle the necessary events to ensure a smooth user experience.

startWhiteboard()

• To start the whiteboard session, you can call the startWhiteboard() method of the Room class, which initializes the whiteboard and makes it available for user interaction.
• It returns a Future that throws a VideoSDKError if the whiteboard cannot be started, so await it inside try/catch.

Events associated with startWhiteboard

• All participants will receive the Events.whiteboardStarted event when the whiteboard is successfully started. This event includes a URL that can be used to render the whiteboard for interaction within the app.
• It can be subscribed to, using the Room object.
• The whiteboard URL can be displayed in a WebView, so participants can use it inside the app. For detailed instructions on rendering the whiteboard, refer to this guide.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class RoomScreen extends StatefulWidget {
  //Existing configuration
}

class _RoomScreenState extends State<RoomScreen> {
  late Room _room;

  @override
  void initState() {
    super.initState();
    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () async {
          try {
            await _room.startWhiteboard();
          } on VideoSDKError catch (e) {
            print("Could not start the whiteboard: ${e.code} ${e.name}");
          }
        },
        child: const Text("Start Whiteboard"),
      ),
    ]);
  }

  void setupRoomEventListener() {
    _room.on(Events.whiteboardStarted, (url) {
      print("Whiteboard Started. Whiteboard url: $url");
    });
  }
}

stopWhiteboard()

• To end the whiteboard session, you can call the stopWhiteboard() method of the Room class, which terminates the active whiteboard and cleans up any resources associated with it.
• It returns a Future that throws a VideoSDKError if the whiteboard cannot be stopped, so await it inside try/catch.

Events associated with stopWhiteboard

• All participants will receive the Events.whiteboardStopped event when the whiteboard session is successfully terminated. This event signals that the whiteboard is no longer available for interaction within the app.
• It can be subscribed to, using the Room object.

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class RoomScreen extends StatefulWidget {
  //Existing configuration
}

class _RoomScreenState extends State<RoomScreen> {
  late Room _room;

  @override
  void initState() {
    super.initState();
    setupRoomEventListener();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () async {
          try {
            await _room.stopWhiteboard();
          } on VideoSDKError catch (e) {
            print("Could not stop the whiteboard: ${e.code} ${e.name}");
          }
        },
        child: const Text("Stop Whiteboard"),
      ),
    ]);
  }

  void setupRoomEventListener() {
    _room.on(Events.whiteboardStopped, () {
      print("Whiteboard Stopped");
    });
  }
}

API Reference

• startWhiteboard()
• stopWhiteboard()
• whiteboardStarted
• whiteboardStopped