Attitudes to Food Allergy

Food allergies are increasingly common. Around 2 million people in the UK live with a diagnosed food allergy, and the majority of these are children. Food allergies cannot be cured, and the only way…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Building an Omegle clone in Flutter using 100ms SDK

This is how your Omegle clone will look like at the end of this tutorial.

Ensure that you have the following requirements:

It provides you with the following features:

100ms SDK itself handles cases like headphone switching , phone call interruptions etc. on it’s own so no need to write extra code for that.

Finally, go to Rooms in the dashboard and click on room pre-created for you

We will see the step by step implementation of the app and also how to use 100ms flutter SDKin any flutter app from scratch. In this app we will need to setup the firebase for firestore which we are using as our database. The setup steps can be found here:

We need to put the `google-services.json` file in the android/app folder.

For running the project :

Hurray! This was super easy.

Now Let’s build this from scratch:

In the pubspec.yaml file under dependencies add:

We will require Recording Audio, Video and Internet permission in this project as we are focused on the audio and video track in this tutorial.

Add the permissions outside your application tag in your AndroidManifest file (android/app/src/main/AndroidManifest.xml):

Add Permission in android/app/src/main/AndroidManifest.xml

Add the permissions to your Info.plist file:

<key>NSCameraUsageDescription</key> <string>{YourAppName} wants to use your camera</string><key>NSLocalNetworkUsageDescription</key> <string>{YourAppName} App wants to use your local network</string><key>NSMicrophoneUsageDescription</key> <string>{YourAppName} wants to use your microphone</string>

Add Permission in ios/Runner/Info.plist

Now you are ready ✨

Let’s dive deeper for setting up the functions. These steps are common to any application using 100ms SDK.

SdkInitializer.hmssdk.build();

Calling the build method wherever we are using the hmssdk

Body parameters for the post call to above link

HMSConfig config = HMSConfig(authToken: token from above endpoint, userName: Any username);

Setting up the config object

await hmssdk.join(config: config);

Joining the meeting using join method of HMSSDK

hmssdk.addUpdateListener(listener:HMSUpdateListener);

Adding listener to HMSSDK

We need to pass the HMSUpdateListener instance in the listener parameter from wherever we want to listen to the updates from SDK. General implementation involves implementing HMSUpdateListener in the class where we are maintaining the state of the application .

We have completed the 100ms SDK setup for joining room and listening to room updates.

Let’s set some jargons here

We will need roomId or roomLink to join the room and since user should be able to join any random room from here we are storing some roomId’s in database along with the number of users in the room. This is not the best way as all the rooms may get occupied at a time. So the best way is to generate room dynamically.

For the sake of simplicity, we have created rooms & stored roomIds in Firebase.

Here is a basic schema of the Firebase Store of roomIds . Feel free to suggest your database strategies we will be more than happy to hear from you all.

There are two ways to join a room by using room-link or roomId . Since here we need roomId or roomUrl. We are using Firebase to store all the rooms so we’ll fetch the roomId use it to join the room.

The Firebase services can be found in services.dart:

Firebase Services File

When the user clicks JoinRoom, the joinRoom function is invoked and it initializes the 100ms SDK, attaches update listeners & joins the room.

Join Room Function

Let’s look into the join function from JoinService.dart

2. Setting up Audio & Video for peers

We get audio, video and all other updates from the listener which we have attached on our HMSSDK instance. Among the various update methods available, we will be using only the following 2 methods for our app:

for listening to updates

For rendering video we will be using HMSVideoView from HMSSDK package. We just need to pass the track which we have initialised above in this as :

In this way we can render the video for remote peer. There are some more functions used in the application let’s discuss them one by one:

– switchAudio: This function is used to switch local peer audio i.e if you want to mute yourself then just call this method with isOn parameter as true.

isOn seems to be confusing so just keep in mind that we need to pass the current audioStatus in isOn parameter.

– switchVideo: This is similar to switchAudio function.This is used to switch local peer video i.e if you want to turnOff the video then just pass isOn parameter as true.

– switchCamera: This is used to switch between front or rear camera.

If the user’s audio and video is mute so we render screen as :

If the user’s video is mute so we render screen as :

These are the loading screens based on if you are joining a room/switching a room and if the room does not have any other peers respectively.

3. Chat Anonymously

There is also an option to chat anonymously in the application.

Whenever we receive a message we can show a small dot over the Messages icon.

Whenever we receive message from remote peer the onMessage method is called where we receive an Object of HMSMessage. Here we have created a custom class Message for the application as we only need direct messaging. The Message class looks like:

So in the onMessage we are converting HMSMessage to Message object and adding in our messages list.

For sending message we are using sendBroadcastMessage method as :

Now let’s move to the last feature of our application, the ability to switch rooms

4. Switch Room

In the application switch room involves a series of leave room and join room function call. Whenever user clicks on switch room button:

For leaving the room the leave function of HMSSDK is used as :

We also update the Firebase to maintain correct roomState. The join method is same as discussed above.

The complete switchRoom function can be found below :

So the user leaves the room and then joins another room whenever the switchRoom button(the center red button) is pressed.

That’s it, give yourself a try.Any sort of question, suggestion please let us know.

Hope you guys enjoyed…

Attitudes to Food Allergy

Building an Omegle clone in Flutter using 100ms SDK

Add a comment

Related posts:

Starting to save with DeFI

4 Inspiring Qualities to Look for When You Search for Your Ideal Mentor

Google Data Analytics Capstone Bike Share