Skip to content

Commit

Permalink
updated ReadMe
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygit
ygit committed Dec 13, 2023
1 parent c6f2e6f commit e2bfcdb
Showing 1 changed file with 24 additions and 20 deletions.
44 changes: 24 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ With support for HLS and RTMP Live Streaming and Recording, Picture-in-Picture (
| hms_room_kit | [![Pub Version](https://img.shields.io/pub/v/hms_room_kit)](https://pub.dev/packages/hms_room_kit) |
| hmssdk_flutter | [![Pub Version](https://img.shields.io/pub/v/hmssdk_flutter)](https://pub.dev/packages/hmssdk_flutter) |

🧱 The Prebuilt QuickStart Guide is [available here](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt).

📖 Read the Complete Documentation here: https://www.100ms.live/docs/flutter/v2/guides/quickstart

📲 Download the Sample iOS app here: <https://testflight.apple.com/join/Uhzebmut>
Expand All @@ -47,9 +49,9 @@ With support for HLS and RTMP Live Streaming and Recording, Picture-in-Picture (

## 🏃♀️ How to run the Example App

The full featured Example app is [available here](https://github.com/100mslive/100ms-flutter/tree/main/example).
The full featured Example app is [available here](https://github.com/100mslive/100ms-flutter/tree/main/packages/hmssdk_flutter/example).

🚀 We have added explanations & recommended usage guide for different features, UI Layouts, Data Store, etc in [Example app ReadMe](https://github.com/100mslive/100ms-flutter/blob/main/example/README.md).
🚀 We have added explanations & recommended usage guide for different features, UI Layouts, Data Store, etc in [Example app ReadMe](https://github.com/100mslive/100ms-flutter/tree/main/packages/hmssdk_flutter/example).

To run the Example App on your system follow these steps -

Expand All @@ -60,7 +62,7 @@ To run the Example App on your system follow these steps -
4. Now, to run the app, simply execute the `flutter run` command to run the app on a connected device, or iOS simulator, or Android Emulator.
5. For running on an iOS Device (iPhone or iPad), ensure you have set the Correct Development Team in Xcode Signing & Capabilities section.

The default [Example app](https://github.com/100mslive/100ms-flutter/tree/main/example) uses Provider State Management library. For other implementations please check out -
The default [Example app](https://github.com/100mslive/100ms-flutter/tree/main/packages/hmssdk_flutter/example) uses Provider State Management library. For other implementations please check out -

1. [Simple QuickStart](https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps/flutter-quickstart-app)
2. [Bloc](https://github.com/100mslive/100ms-flutter/tree/main/sample%20apps/bloc)
Expand Down Expand Up @@ -326,9 +328,9 @@ To join and interact with others in audio or video call, the user needs to `join
To join a Room, your app should have -

1. User Name - The name which should be displayed to other peers in the room.
2. [Authentication Token](https://www.100ms.live/docs/flutter/v2/foundation/security-and-tokens) - The Client side Authentication Token generated by the Token Service.
2. [Authentication Token](https://www.100ms.live/docs/get-started/v2/get-started/security-and-tokens) - The Client side Authentication Token generated by the Token Service.

### 🔑 [Get Authentication token](https://www.100ms.live/docs/flutter/v2/get-started/quickstart#fetch-token-to-join-the-room)
### 🔑 [Get Authentication token](https://www.100ms.live/docs/flutter/v2/quickstart/quickstart#fetch-token-to-join-the-room)

To join a room we need an authentication token as mentioned above. There are two methods to get the token:

Expand All @@ -337,12 +339,12 @@ To join a room we need an authentication token as mentioned above. There are two
We can get the authentication token using room-code from meeting URL.

Let's understand the subdomain and code from the sample URL
In this URL: `http://100ms-rocks.app.100ms.live/meeting/abc-defg-hij`
In this URL: `https://public.app.100ms.live/meeting/xvm-wxwo-gbl`

- Subdomain is `100ms-rocks`
- Room code is `abc-defg-ghi`
- Subdomain is `public`
- Room code is `xvm-wxwo-gbl`

Now to get the room-code from meeting URL we can write our own logic or use the `getCode` method from [here](https://github.com/100mslive/100ms-flutter/blob/main/example/lib/service/room_service.dart)
Now to get the room-code from meeting URL we can write our own logic or use the `getCode` method from [here](https://github.com/100mslive/100ms-flutter/blob/main/packages/hmssdk_flutter/example/lib/room_service.dart)

To generate token we will be using `getAuthTokenByRoomCode` method of `HMSSDK`. This method has `roomCode` as a required
parameter, `userId` & `endPoint` as optional parameter.
Expand Down Expand Up @@ -385,11 +387,11 @@ To test audio/video functionality, you need to connect to a 100ms room; please c
You can also optionally pass these fields in the HMSSDK constructor -

1. Track Settings - Such as joining a Room with Muted Audio or Video using the `HMSTrackSetting` object. More information is [available here](https://www.100ms.live/docs/flutter/v2/features/join#join-with-muted-audio-video).
1. Track Settings - Such as joining a Room with Muted Audio or Video using the `HMSTrackSetting` object. More information is [available here](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/join#join-with-muted-audio-video).

2. User Metadata - This can be used to pass any additional metadata associated with the user using `metadata` of `HMSConfig` object. For Eg: user-id mapping at the application side. More information is available [here](https://www.100ms.live/docs/flutter/v2/advanced-features/peer-metadata-update).
2. User Metadata - This can be used to pass any additional metadata associated with the user using `metadata` of `HMSConfig` object. For Eg: user-id mapping at the application side. More information is available [here](https://www.100ms.live/docs/flutter/v2/how-to-guides/interact-with-room/peer/peer-metadata-update).

More information about Joining a Room is [available here](https://www.100ms.live/docs/flutter/v2/features/join).
More information about Joining a Room is [available here](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/join).

```dart
// create a class that implements `HMSUpdateListener` and acts as a data source for our UI
Expand All @@ -414,7 +416,7 @@ class Meeting implements HMSUpdateListener {
}
```

## 🎞 [Display a Track](https://www.100ms.live/docs/flutter/v2/features/render-video)
## 🎞 [Display a Track](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/render-video/overview)

It all comes down to this. All the setup so far has been done so that we can show live-streaming videos in our beautiful app.

Expand All @@ -431,9 +433,9 @@ HMSVideoView(
),
```

More information about displaying a Video is [available here](https://www.100ms.live/docs/react-native/v2/features/render-video).
More information about displaying a Video is [available here](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/render-video/overview).

## 👋 [Leave Room](https://www.100ms.live/docs/flutter/v2/features/leave)
## 👋 [Leave Room](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/leave)

Once you're done with the meeting and want to exit, call leave on the HMSSDK instance that you created to join the room.

Expand All @@ -447,7 +449,7 @@ hmsSDK.removeUpdateListener(updateListener);
To leave the meeting, call the `leave` method of `HMSSDK` and pass the `hmsActionResultListener` parameter to get a success callback from SDK in the `onSuccess` override method as follow.

> You will need to implement the `HMSActionResultListener` interface in a class to get `onSuccess` and `onException` callback.
> To know about how to implement `HMSActionResultListener` check the docs [here](https://www.100ms.live/docs/flutter/v2/features/action-result-listeners)
> To know about how to implement `HMSActionResultListener` check the docs [here](https://www.100ms.live/docs/flutter/v2/how-to-guides/listen-to-room-updates/action-result-listeners)
```dart
class Meeting implements HMSActionResultListener{
Expand All @@ -468,7 +470,7 @@ await hmsSDK.leave(hmsActionResultListener: this);
}
```

More information about Leaving a Room is [available here](https://www.100ms.live/docs/flutter/v2/features/leave).
More information about Leaving a Room is [available here](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/leave).

## 🛤 HMSTracks Explained

Expand Down Expand Up @@ -496,7 +498,7 @@ HMSTrack contains a field called source which denotes the source of the Track.

To know the type of track, check the value of type which would be one of the enum values - `AUDIO` or `VIDEO`

## 📨 [Chat Messaging](https://www.100ms.live/docs/flutter/v2/features/chat)
## 📨 [Chat Messaging](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/chat)

You can send a chat or any other kind of message from a local peer to all remote peers in the room.

Expand All @@ -508,7 +510,7 @@ Then use the `sendBroadcastMessage` function on the instance of HMSSDK for broad

When you(the local peer) receives a message from others(any remote peer), `void onMessage({required HMSMessage message})` function of `HMSUpdateListener` is invoked.

More information about Chat Messaging is [available here](https://www.100ms.live/docs/flutter/v2/features/chat).
More information about Chat Messaging is [available here](https://www.100ms.live/docs/flutter/v2/how-to-guides/set-up-video-conferencing/chat).

```dart
// onMessage is HMSUpdateListener method called when a new message is received
Expand Down Expand Up @@ -603,11 +605,13 @@ void onException(
}
```

🧱 The Prebuilt QuickStart Guide is [available here](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt).

📖 Do refer the Complete Documentation Guide [available here](https://www.100ms.live/docs/flutter/v2/guides/quickstart).

🏃♀️ Checkout the Example app implementation [available here](https://github.com/100mslive/100ms-flutter/tree/main/example).

🚀 We have added explanations & recommended usage guide for different features, UI Layouts, Data Store, etc in [Example app ReadMe](https://github.com/100mslive/100ms-flutter/blob/main/example/README.md).
🚀 We have added explanations & recommended usage guide for different features, UI Layouts, Data Store, etc in [Example app ReadMe](https://github.com/100mslive/100ms-flutter/tree/main/packages/hmssdk_flutter/example).

100ms Flutter apps are released on the App Stores, you can download them here:

Expand Down

0 comments on commit e2bfcdb

Please sign in to comment.