DEV Community

vmodal_ai
vmodal_ai

Posted on Originally published at example.com

Jitsi Meet SDK with Flutter: Build an Embedded Video Meeting App

#flutter #dart #jitsi #videocalling

Jitsi Meet SDK with Flutter: Build an Embedded Video Meeting App

Jitsi Meet is an open-source video conferencing platform. Its Flutter SDK allows developers to embed the Jitsi Meet experience into Flutter applications.

The current jitsi_meet_flutter_sdk supports Android and iOS. Current package documentation lists Android API 24 and iOS 15.1 as minimum supported versions.

Step 1: Create the Project 

flutter create jitsi_flutter_demo
cd jitsi_flutter_demo
Enter fullscreen mode Exit fullscreen mode

Step 2: Add the SDK 

flutter pub add jitsi_meet_flutter_sdk
Enter fullscreen mode Exit fullscreen mode

Step 3: Import the SDK 

import 'package:jitsi_meet_flutter_sdk/jitsi_meet_flutter_sdk.dart';
Enter fullscreen mode Exit fullscreen mode

Step 4: Configure iOS

Set:

platform :ios, '15.1'
Enter fullscreen mode Exit fullscreen mode

Add to ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>The app needs access to your camera for meetings.</string>

<key>NSMicrophoneUsageDescription</key>
<string>The app needs access to your microphone for meetings.</string>
Enter fullscreen mode Exit fullscreen mode

Step 5: Create the Jitsi Object 

final jitsiMeet = JitsiMeet();
Enter fullscreen mode Exit fullscreen mode

Step 6: Create Conference Options 

final options = JitsiMeetConferenceOptions(
  room: 'flutter-demo-room',
);
Enter fullscreen mode Exit fullscreen mode

Step 7: Join the Meeting 

await jitsiMeet.join(options);
Enter fullscreen mode Exit fullscreen mode

This is the basic flow documented by the Jitsi Flutter SDK.

Step 8: Add User Information

You can provide user information through the conference options:

final options = JitsiMeetConferenceOptions(
  room: 'flutter-demo-room',
  userInfo: JitsiMeetUserInfo(
    displayName: 'Flutter User',
    email: 'user@example.com',
  ),
);
Enter fullscreen mode Exit fullscreen mode

Use only parameters supported by the SDK version installed in your project.

Step 9: Listen for Meeting Events

Use the SDK's meeting listener APIs to react to events such as conference joined and conference terminated.

final listener = JitsiMeetingListener(
  onConferenceJoined: (url) {
    debugPrint('Joined: $url');
  },
  onConferenceTerminated: (url, error) {
    debugPrint('Ended: $url');
  },
);
Enter fullscreen mode Exit fullscreen mode

Verify the current listener registration method against the package version you install.

Step 10: Leave the Meeting

The SDK provides a hang-up operation:

await jitsiMeet.hangUp();
Enter fullscreen mode Exit fullscreen mode

Step 11: Screen Sharing

On iOS, screen sharing requires a Broadcast Upload Extension. Treat screen sharing as a separate native configuration step rather than assuming camera permissions are enough.

Step 12: Test the Meeting

Test:

  • Camera permission.
  • Microphone permission.
  • Joining.
  • Leaving.
  • Multiple participants.
  • Backgrounding.
  • Network interruption.
  • Screen sharing.
  • Different Android and iOS versions.

Recommended Architecture 

Flutter UI
   ↓
Meeting Controller
   ↓
Jitsi Service
   ↓
Jitsi Meet Flutter SDK
   ↓
Jitsi Server
Enter fullscreen mode Exit fullscreen mode

For private meetings, add appropriate server-side authentication and room-access controls.

Conclusion

SDK integrations are easiest to maintain when credentials, platform-specific configuration, networking, and UI responsibilities are separated. Start with the smallest working flow, verify it on a physical device, and then add production concerns such as authentication, error handling, lifecycle management, and secure credential handling.

Stay tuned for more advanced Flutter SDK integration tutorials!

SEO Keywords

Flutter SDK tutorial, Flutter integration, Flutter mobile development, Dart SDK integration, Flutter Android, Flutter iOS, SDK integration

Tags

flutter dart mobiledevelopment sdk android

Useful Links

Website: www.v-modal.com

SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter

SDK Android: https://github.com/v-modal/vmodal_sdk_android

Discord: https://discord.gg/K72z28KUx

Top comments (0)