Quickstart

Create a meeting

Call the "create meeting" endpoint from your server. This API does not have any mandatory parameters, although we recommend creating a meeting with a preset. You will receive a response that looks like this:

{
    "success": true,
    "message": "",
    "data": {
        "meeting": {
            "id": "cddfd4a8-d6fb-4d15-be6b-269c6dedfa70",
            "title": "New meeting",
            "roomName": "hexagonal-trip",
            "status": "LIVE",
            "createdAt": "2020-12-21T17:30:00.000Z",
            "participants": []
        }
    }
}

Save data.meeting.id and data.meeting.roomName for later use.

Add a participant

Call the "add particpant" endpoint from your server. This API needs meeting ID from the previous response, as well as needs a clientSpecificId in the body to use as a unique identifier for the participant. We recommend creating a participant with a role. You will receive a response that looks like this:

{
    "success": true,
    "message": "",
    "data": {
        "authResponse": {
            "userAdded": true,
            "authToken": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJp..."
        }
    }
}

Save data.authResponse.authToken for later use.

Initialize the meeting on frontend

Get the roomName from the "create meeting" API call and participant authToken from the "add participant" API call from your backend, and initialize the meeting on frontend.

Step 1

Import the package.

import 'package:dyte_client/dyte.dart';
import 'package:dyte_client/dyteMeeting.dart';

Step 2

Use the DyteMeeting widget.

SizedBox(
         width: <width>,
         height: <height>,
         child: DyteMeeting(
              roomName: "<roomName>",
              authToken: "<authToken>",
              onInit: (DyteMeetingHandler meeting) async {

              },
        )
   )

You can use any other constraining widget instead of SizedBox, the parent widget just needs to have a maxHeight and maxWidth. For a full screen meeting it would look something like this:

import 'package:flutter/material.dart';
import 'package:dyte_client/dyte.dart';

void main() {
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

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

  @override
  Widget build(BuildContext context) {
  
    // get the page height, width
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
  
    return Scaffold(
        body: Row(
          children: <Widget>[
            SizedBox(
              width: width,
              height: height,
              child: DyteMeeting(
                roomName: "<roomName>",
                authToken: "<authToken>",
                onInit: (DyteMeetingHandler meeting) async {
                     var self = await meeting.self;
                },
              )
            )
          ],
        ),
    );
  }
}
``