### Project Setup and Running Locally

Source: https://github.com/100mslive/100ms-docs/blob/main/README.md

Steps to clone the 100ms-docs repository, install dependencies using Yarn or npm, and start the local development server.

```shell
git clone https://github.com/100mslive/100ms-docs.git
yarn
yarn dev
```

```shell
git clone https://github.com/100mslive/100ms-docs.git
npm install
npm run dev
```

--------------------------------

### Install 100ms React SDK using npm or yarn

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/react-quickstart.mdx

Installs the latest version of the 100ms React SDK. This is the initial step before integrating the SDK into your React application.

```bash
## npm
npm install --save @100mslive/react-sdk@latest
## yarn
yarn add @100mslive/react-sdk@latest
```

--------------------------------

### Install 100ms SDK and ParcelJS using NPM

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/javascript-quickstart.mdx

Installs the ParcelJS development dependency and the 100ms video store SDK using the NPM package manager.

```bash
npm install --save-dev parcel
npm install @100mslive/hms-video-store
```

--------------------------------

### Install 100ms SDK and ParcelJS using Yarn

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/javascript-quickstart.mdx

Installs the ParcelJS development dependency and the 100ms video store SDK using the Yarn package manager.

```bash
yarn add --dev parcel
yarn add @100mslive/hms-video-store
```

--------------------------------

### App Component Setup (React/JSX)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/react-quickstart.mdx

This React component, `App`, serves as the main entry point for the application. It imports and renders the `JoinForm` component, allowing users to initiate the process of joining a room. Basic styling is also applied via importing './styles.css'.

```jsx
import "./styles.css";
import JoinForm from "./JoinForm";

export default function App() {
    return (
        <div className="App">
            <JoinForm />
        </div>
    );
}
```

--------------------------------

### Install Dependencies for 100ms React Native Example App (Bash)

Source: https://github.com/100mslive/100ms-docs/blob/main/public/api-reference/react-native/v2/index.html

These commands outline the steps to install project dependencies for the 100ms React Native example application. It includes installing root dependencies and then navigating into the example folder to install its specific dependencies.

```bash
npm install
```

```bash
cd example
npm install
```

--------------------------------

### Install Pods and Run iOS App

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

Installs necessary dependencies for iOS development using CocoaPods and then builds and runs the React Native application on an iPhone simulator. Ensure you are in the 'ios' directory before running 'pod install'.

```bash
cd ios && pod install && cd ../
```

```bash
npx react-native run-ios --simulator="iPhone 14"
```

--------------------------------

### Install 100ms React Native SDK and Permissions Package

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

Installs the necessary 100ms React Native SDK package and the react-native-permissions package to handle camera and microphone permissions. This command uses npm for package management.

```bash
npm install --save @100mslive/react-native-hms react-native-permissions
```

--------------------------------

### Install 100ms React Native SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-quickstart.mdx

Installs the 100ms React Native SDK package into the Expo project. This SDK provides the necessary tools for integrating video conferencing features.

```bash
npx expo install @100mslive/react-native-hms
```

--------------------------------

### Complete App.js Example

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-prebuilt.mdx

A full example of the App.js file for a React Native application using the 100ms SDK. It includes font loading, permission requests for camera and microphone, and conditionally renders the HMSPrebuilt component or a start button.

```javascript
import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, View } from 'react-native';
import { HMSPrebuilt } from '@100mslive/react-native-room-kit';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useFonts } from 'expo-font';
import { requestCameraPermissionsAsync, requestMicrophonePermissionsAsync } from 'expo-camera';

const App = () => {
  // LOAD REQUIRED FONTS
  const [fontsLoaded, fontError] = useFonts({
    'Inter-Bold': require("./assets/fonts/Inter-Bold.ttf"),
    'Inter-Medium': require("./assets/fonts/Inter-Medium.ttf"),
    'Inter-Regular': require("./assets/fonts/Inter-Regular.ttf"),
    'Inter-SemiBold': require("./assets/fonts/Inter-SemiBold.ttf"),
  });

  const [showHMSPrebuilt, setShowHMSPrebuilt] = useState(false);

  // Asking Camera & Microphone permissions from user
  useEffect(() => {
    Promise.allSettled([
      requestCameraPermissionsAsync(),
      requestMicrophonePermissionsAsync(),
    ])
      .then((results) => {
        console.log('Permissions Result: ', results);
      })
      .catch((error) => {
        console.log('Permissions Error: ', error);
      });
  }, []);

  // If fonts are not loaded then show nothing
  if (!fontsLoaded && !fontError) {
    return null;
  }

  // If an error occurred while loading fonts, show it
  if (!!fontError) {
    return <Text>{fontError.message}: {fontError.message}</Text>
  }

  // Content
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <StatusBar barStyle={'dark-content'} />

        {showHMSPrebuilt ? (
          <HMSPrebuilt
            roomCode='rlk-lsml-aiy'
            options={{ userName: "John Appleseed" }}
            onLeave={() => setShowHMSPrebuilt(false)}
          />
        ) : (
          <View style={styles.joinContainer}>
            <Button title='Start' onPress={() => setShowHMSPrebuilt(true)} />
          </View>
        )}
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  joinContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;
```

--------------------------------

### Install Roomkit for React

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/prebuilt-quickstart.mdx

Command to install the Roomkit package for React applications.

```bash
npm install @100mslive/roomkit-react --save
```

--------------------------------

### Run Create React App

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/prebuilt-quickstart.mdx

Command to start the development server for a Create React App application.

```bash
npm start
```

--------------------------------

### Run Next.js App

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/prebuilt-quickstart.mdx

Command to start the development server for a Next.js application.

```bash
npm run dev
```

--------------------------------

### Complete React Native App using 100ms SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

This is the main App.js file for the React Native example. It sets up the navigation between a home screen and a room screen. The home screen handles user interactions and permission requests, while the room screen utilizes the 100ms SDK to join and display video streams.

```javascript
import React, { useState, useRef, useEffect, useCallback } from 'react';
import {
    SafeAreaView,
    FlatList,
    StatusBar,
    Text,
    View,
    TouchableHighlight,
    ActivityIndicator,
    Alert,
} from 'react-native';
import { PERMISSIONS, request, requestMultiple, RESULTS } from 'react-native-permissions';
import {
    HMSSDK,
    HMSUpdateListenerActions,
    HMSConfig,
    HMSTrackType,
    HMSTrackUpdate,
    HMSPeerUpdate
} from '@100mslive/react-native-hms';

/**
 * Take Room Code from Dashbaord for this sample app.
 * For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/get-started/token#get-room-code-from-100ms-dashboard | Room Code} 
 */
const ROOM_CODE = ''; // PASTE ROOM CODE FROM DASHBOARD HERE

/**
 * using `ROOM_CODE` is recommended over `AUTH_TOKEN` approach
 *
 * Take Auth Token from Dashbaord for this sample app.
 * For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/foundation/security-and-tokens | Token Concept} 
 */
const AUTH_TOKEN = ''; // PASTE AUTH TOKEN FROM DASHBOARD HERE

const USERNAME = 'Test User';

//#region Screens
const App = () => {
    const [joinRoom, setJoinRoom] = useState(false);

    const navigate = useCallback((screen) => setJoinRoom(screen === 'RoomScreen'), []);

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#EFF7FF' }}>
            <StatusBar barStyle={'dark-content'} />

            {joinRoom ? (
                <RoomScreen navigate={navigate} />
            ) : (
                <HomeScreen navigate={navigate} />
            )}
        </SafeAreaView>
    );
};

export default App;

const HomeScreen = ({ navigate }) => {
    // Function to handle "Join Room" button press
    const handleJoinPress = async () => {
        // Checking Device Permissions
        const permissionsGranted = await checkPermissions([
            PERMISSIONS.ANDROID.CAMERA,
            PERMISSIONS.ANDROID.RECORD_AUDIO,
            PERMISSIONS.ANDROID.BLUETOOTH_CONNECT
        ]);

        if (permissionsGranted) {
            navigate('RoomScreen');
        } else {
            console.log('Permission Not Granted!');
        }
    };

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <TouchableHighlight
                onPress={handleJoinPress}
                underlayColor="#143466"
                style={{
                    paddingHorizontal: 20,
                    paddingVertical: 12,
                    backgroundColor: '#2471ED',
                    borderRadius: 8
                }}>
                <Text style={{ fontSize: 20, color: '#ffffff' }}>Join Room</Text>
            </TouchableHighlight>
        </View>
    );
};

const RoomScreen = ({ navigate }) => {
    /**
     * `usePeerTrackNodes` hook takes care of setting up {@link HMSSDK | HMSSDK} instance, joining room and adding all required event listeners.
     * It gives us:
     *  1. peerTrackNodes - This is a list of {@link PeerTrackNode}, we can use this list to render local and remote peer tiles.
     *  2. loading - We can show loader while Room Room join is under process.
     *  3. leaveRoom - This is a function that can be called on a button press to leave room and go back to Welcome screen.
     */
    const { peerTrackNodes, loading, leaveRoom, hmsInstanceRef } = usePeerTrackNodes({ navigate });

    const HmsView = hmsInstanceRef.current?.HmsView;

    const _keyExtractor = (item) => item.id;

    // `_renderItem` function returns a Tile UI for each item which is `PeerTrackNode` object
    const _renderItem = ({ item }) => {
        const { peer, track } = item;

        return (
            <View
                style={{
                    height: 300,
                    margin: 8,
                    borderRadius: 20,
                    overflow: 'hidden',
                    backgroundColor: '#A0C3D2'
                }}>
                {/* Checking if we have "HmsView" component, valid trackId and "track is not muted" */}
                {HmsView && track && track.trackId && !track.isMute() ? (
                    // To Render Peer Live Videos, We can use HMSView
                    // For more info about its props and usage, Check out {@link https://www.100ms.live/docs/react-native/v2/features/render-video | Render Video} 
                    <HmsView
                        trackId={track.trackId}
                        mirror={peer.isLocal}
                        style={{ width: '100%', height: '100%' }}
                    />
                ) : (
                    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                        <View
                            style={{ 
                                width: 100,

```

--------------------------------

### Install expo-camera for Permissions

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-quickstart.mdx

Installs the 'expo-camera' library, which is used to request camera and microphone permissions from the user. This is a prerequisite for using the SDK's media capabilities.

```bash
npx expo install expo-camera
```

--------------------------------

### Create Flutter App

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/prebuilt.mdx

Command to create a new Flutter project. Ensure Flutter SDK is installed and accessible in your environment.

```bash
flutter create my_app
```

--------------------------------

### Instantiate HMSSDK (Kotlin)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Demonstrates how to instantiate the HMSSDK in Kotlin. This is the initial step to interact with the SDK's functionalities.

```kotlin
val hmsSdk = HMSSDK
        .Builder(application)
        .build()
```

--------------------------------

### Instantiate HMSSDK (Java)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Demonstrates how to instantiate the HMSSDK in Java. This is the initial step to interact with the SDK's functionalities.

```java
HMSSDK hmssdk = new HMSSDK
                        .Builder(application)
                        .build();
```

--------------------------------

### Complete Flutter 100ms SDK Integration Example

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/quickstart.mdx

This Dart code snippet demonstrates a full integration of the 100ms SDK in a Flutter application. It includes UI components for joining a meeting, handling camera and microphone permissions, initializing the SDK, and managing real-time updates for peers and tracks within a video conference. Dependencies include 'hmssdk_flutter' and 'permission_handler'.

```dart
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hmssdk_flutter/hmssdk_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

void main() => runApp(const MaterialApp(home: HomePage()));

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  Future<bool> getPermissions() async {
    if (Platform.isIOS) return true;
    await Permission.camera.request();
    await Permission.microphone.request();
    await Permission.bluetoothConnect.request();

    while ((await Permission.camera.isDenied)) {
      await Permission.camera.request();
    }
    while ((await Permission.microphone.isDenied)) {
      await Permission.microphone.request();
    }
    while ((await Permission.bluetoothConnect.isDenied)) {
      await Permission.bluetoothConnect.request();
    }
    return true;
  }

// UI to render join screen
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Center(
          child: ElevatedButton(
            style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
            ),
            // Function to push to meeting page
            onPressed: () async {
              await getPermissions();
              Navigator.push(
                context,
                CupertinoPageRoute(builder: (_) => const MeetingPage()),
              );
            },
            child: const Padding(
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
              child: Text(
                'Join',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MeetingPage extends StatefulWidget {
  const MeetingPage({super.key});

  @override
  State<MeetingPage> createState() => _MeetingPageState();
}

class _MeetingPageState extends State<MeetingPage>
    implements HMSUpdateListener {
  //SDK
  late HMSSDK hmsSDK;

  // Variables required for joining a room
  String authToken = 
      "APP_TOKEN_FROM_DASHBOARD";
  String userName = "test_user";

  // Variables required for rendering video and peer info
  HMSPeer? localPeer, remotePeer;
  HMSVideoTrack? localPeerVideoTrack, remotePeerVideoTrack;

  // Initialize variables and join room
  @override
  void initState() {
    super.initState();
    initHMSSDK();
  }

  void initHMSSDK() async {
    hmsSDK = HMSSDK();
    await hmsSDK.build(); // ensure to await while invoking the `build` method
    hmsSDK.addUpdateListener(listener: this);
    hmsSDK.join(config: HMSConfig(authToken: authToken, userName: userName));
  }

  // Clear all variables
  @override
  void dispose() {
    remotePeer = null;
    remotePeerVideoTrack = null;
    localPeer = null;
    localPeerVideoTrack = null;
    super.dispose();
  }

  // Called when peer joined the room - get current state of room by using HMSRoom obj
  @override
  void onJoin({required HMSRoom room}) {
    room.peers?.forEach((peer) {
      if (peer.isLocal) {
        localPeer = peer;
        if (peer.videoTrack != null) {
          localPeerVideoTrack = peer.videoTrack;
        }
        if (mounted) {
          setState(() {});
        }
      }
    });
  }

  // Called when there's a peer update - use to update local & remote peer variables
  @override
  void onPeerUpdate({required HMSPeer peer, required HMSPeerUpdate update}) {
    switch (update) {
      case HMSPeerUpdate.peerJoined:
        if (!peer.isLocal) {
          if (mounted) {
            setState(() {
              remotePeer = peer;
            });
          }
        }
        break;
      case HMSPeerUpdate.peerLeft:
        if (!peer.isLocal) {
          if (mounted) {
            setState(() {
              remotePeer = null;
            });
          }
        }
        break;
      case HMSPeerUpdate.networkQualityUpdated:
        return;
      default:
        if (mounted) {
          setState(() {
            localPeer = null;
          });
        }
    }
  }

  // Called when there's a track update - use to update local & remote track variables
  @override
  void onTrackUpdate(
      {required HMSTrack track,
      required HMSTrackUpdate trackUpdate,
      required HMSPeer peer}) {
    if (track.kind == HMSTrackKind.kHMSTrackKindVideo) {
      switch (trackUpdate) {
        case HMSTrackUpdate.trackRemoved:
          if (mounted) {
            setState(() {
              peer.isLocal
                  ? localPeerVideoTrack = null
                  : remotePeerVideoTrack = null;
            });
          }

```

--------------------------------

### Install Expo Dev Client

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-prebuilt.mdx

Installs the 'expo-dev-client' library, which enables the installation of native libraries and modification of project configurations within an Expo project.

```bash
npx expo install expo-dev-client
```

--------------------------------

### Run 100ms React Native Example App (Bash)

Source: https://github.com/100mslive/100ms-docs/blob/main/public/api-reference/react-native/v2/index.html

Instructions for running the 100ms React Native example app on Android and iOS. For iOS, it includes installing CocoaPods and setting up Xcode. For Android, it uses the React Native CLI.

```bash
npx react-native run-android
```

```bash
cd ios
pod install
cd ..
npx react-native run-ios
```

--------------------------------

### Flutter App Initialization and Permission Handling

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/audio-room-quickstart.mdx

Sets up the main Flutter application, handles microphone and bluetooth permissions, and navigates to the meeting page upon successful permission granting.

```dart
import 'dart:developer';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hmssdk_flutter/hmssdk_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '100ms Audio Room Guide'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    {
  bool res = false;

  static Future<bool> getPermissions() async {
    if (Platform.isIOS) return true;

    await Permission.microphone.request();
    await Permission.bluetoothConnect.request();

    while ((await Permission.microphone.isDenied)) {
      await Permission.microphone.request();
    }
    while ((await Permission.bluetoothConnect.isDenied)) {
      await Permission.bluetoothConnect.request();
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Center(
          child: ElevatedButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ))),
            onPressed: () async => {
              res = await getPermissions(),
              if (res)
                Navigator.push(context,
                    CupertinoPageRoute(builder: (_) => const MeetingPage()))
            },
            child: const Padding(
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
              child: Text(
                'Join Audio Room',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MeetingPage extends StatefulWidget {
  const MeetingPage({super.key});

  @override
  State<MeetingPage> createState() => _MeetingPageState();
}

class _MeetingPageState extends State<MeetingPage>
    implements HMSUpdateListener, HMSActionResultListener {
  late HMSSDK _hmsSDK;

  //Enter the username and authToken from dashboard for the corresponding role here.
  String userName = "Enter Username Here";
  String authToken = "Enter AuthToken Here";
  Offset position = const Offset(5, 5);
  bool isJoinSuccessful = false;
  final List<PeerTrackNode> _listeners = [];
  final List<PeerTrackNode> _speakers = [];
  bool _isMicrophoneMuted = false;
  HMSPeer? _localPeer;

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

//To know more about HMSSDK setup and initialization checkout the docs here: https://www.100ms.live/docs/flutter/v2/how--to-guides/install-the-sdk/hmssdk
  void initHMSSDK() async {
    _hmsSDK = HMSSDK();
    await _hmsSDK.build();
    _hmsSDK.addUpdateListener(listener: this);
    _hmsSDK.join(config: HMSConfig(authToken: authToken, userName: userName));
  }

  @override
  void dispose() {
    //We are clearing the room state here
    _speakers.clear();
    _listeners.clear();
    super.dispose();
  }

  //Here we will be getting updates about peer join, leave, role changed, name changed etc.
  @override
  void onPeerUpdate({required HMSPeer peer, required HMSPeerUpdate update}) {
    if (peer.isLocal) {
      _localPeer = peer;
    }
    switch (update) {
      case HMSPeerUpdate.peerJoined:
        switch (peer.role.name) {
          case "speaker":
            int index = _speakers
                .indexWhere((node) => node.uid == "${peer.peerId}speaker");
            if (index != -1) {
              _speakers[index].peer = peer;
            } else {
              _speakers.add(PeerTrackNode(
                uid: "${peer.peerId}speaker",
                peer: peer,
              ));
            }
            setState(() {});
            break;
          case "listener":
            int index = _listeners
                .indexWhere((node) => node.uid == "${peer.peerId}listener");
            if (index != -1) {
              _listeners[index].peer = peer;
            } else {
              _listeners.add(
                  PeerTrackNode(uid: "${peer.peerId}listener", peer: peer));
            }
            setState(() {});
            break;
          default:
            //Handle the case if you have other roles in the room
            break;
        }

```

--------------------------------

### Create React Native App with Specific Version

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

Initializes a new React Native project with a specified version using npx and navigates into the project directory. This is the first step in setting up the development environment.

```bash
npx react-native init HMSSampleApp --version 0.68.5 --npm && cd ./HMSSampleApp
```

--------------------------------

### Start Metro Bundler

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/prebuilt.mdx

Command to start the Metro Bundler, which is a JavaScript bundler for React Native. It's essential for packaging the application code for both Android and iOS.

```bash
npx react-native start
```

--------------------------------

### Initialize 100ms SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

Initializes the HMSSDK instance using the `build()` static method within a `useEffect` hook. This setup occurs after requesting necessary device permissions and configures listeners for room updates. It also ensures proper cleanup by calling `handleRoomLeave` on component unmount.

```javascript
// Effect to handle HMSSDK initialization and Listeners Setup
useEffect(() => {
  const joinRoom = async () => {
    setLoading(true);

    /**
      * creating {@link HMSSDK} instance to join room
      * For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/features/join#join-a-room | Join a Room} 
      */
    const hmsInstance = await HMSSDK.build();

    // Saving `hmsInstance` in ref
    hmsInstanceRef.current = hmsInstance;

    ...

  };

  joinRoom();

  // When effect unmounts for any reason, we are calling leave function to exit the 100ms Room
  return () => {
    handleRoomLeave();
  };
}, []);
```

--------------------------------

### Android Manifest Permissions

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Declares essential permissions required by the 100ms SDK in the AndroidManifest.xml file. These include CAMERA, RECORD_AUDIO, and INTERNET.

```xml
<uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
```

--------------------------------

### Install react-native-permissions

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/prebuilt.mdx

Installs the 'react-native-permissions' package, which is required for requesting camera and microphone permissions. This version is specifically tested with the SDK.

```bash
npm install react-native-permissions@3.4.0
```

--------------------------------

### Flutter: Start/Stop HLS Streaming - 100ms SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/hls-quickstart.mdx

Example of initiating and stopping HLS streaming using the 100ms SDK in a Flutter application. This snippet shows the UI interaction and the corresponding SDK calls.

```dart
GestureDetector(
                            onTap: () async {
                              setState(() {
                                _isLoading = true;
                              });
                              if (_isHLSRunning) {
                                _hmsSDK.stopHlsStreaming();
                                return;
                              }
                              _hmsSDK.startHlsStreaming();
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  boxShadow: [
                                    BoxShadow(
                                      color: _isHLSRunning
                                          ? Colors.red.withAlpha(60)
                                          : Colors.blue.withAlpha(60),
                                      blurRadius: 3.0,
                                      spreadRadius: 5.0,
                                    ),
                                  ]),
                              child: CircleAvatar(

```

--------------------------------

### Install react-native-room-kit Dependencies (npm)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/prebuilt.mdx

Installs the necessary dependencies for the react-native-room-kit package using npm. Ensure these packages are direct dependencies for proper React Native linking.

```bash
npm install @100mslive/react-native-hms \
  @100mslive/types-prebuilt \
  @react-native-community/blur@^4.3.2 \
  @react-native-masked-view/masked-view@^0.2.9 \
  @shopify/flash-list@1.4.3 \
  lottie-react-native@5.1.6 \
  react-native-gesture-handler@2.12.1 \
  react-native-linear-gradient@2.8.3 \
  react-native-modal \
  react-native-safe-area-context@3.3.0 \
  react-native-simple-toast@1.1.3 \
  react-native-webview@^13.8.7
```

--------------------------------

### Add 100ms SDK and Permissions Handler Dependencies

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/quickstart.mdx

Specifies the necessary 100ms Flutter SDK and the permission_handler package to be added to the pubspec.yaml file for handling audio/video permissions.

```yaml
hmssdk_flutter:
permission_handler:
```

--------------------------------

### Flutter: Handle Room Updates - 100ms SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/hls-quickstart.mdx

Provides a Flutter code example for listening to and handling various room update events from the 100ms SDK. Specifically demonstrates handling HLS streaming state changes.

```dart
@override
  void onRoomUpdate({required HMSRoom room, required HMSRoomUpdate update}) {
    // Checkout the docs for room updates here: https://www.100ms.live/docs/flutter/v2/how--to-guides/listen-to-room-updates/update-listeners
    if (update == HMSRoomUpdate.hlsStreamingStateUpdated) {
      if (room.hmshlsStreamingState?.running ?? false) {
        _isHLSRunning = true;
      } else {
        _isHLSRunning = false;
      }
      _isLoading = false;
      setState(() {});
    }
  }
```

--------------------------------

### Add Jitpack Repository (Gradle)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Configures your root settings.gradle file to include the Jitpack repository, which is required for using 100ms SDK libraries distributed through Jitpack.

```gradle
dependencyResolutionManagement {
 repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
 repositories {
 google()
 mavenCentral()
 jcenter() // Warning: this repository is going to shut down soon
 maven { url 'https://jitpack.io' }
    }
}
rootProject.name = "MyVideoCallApp"
include ':app'

```

--------------------------------

### Expo Setup: Install Dependencies

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/how-to-guides/install-the-sdk/integration.mdx

Commands to install project dependencies and the Expo CLI globally. These are essential steps for setting up a React Native project with Expo.

```bash
npm install
npm install --global expo-cli
expo install expo-dev-client
```

--------------------------------

### HMSSDK Initialization and Event Handling

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/quickstart.mdx

Sets up the HMSSDK instance, attaches necessary event listeners, and manages the state for loading and peer track nodes. Includes logic for leaving a room and cleaning up listeners.

```javascript
export const usePeerTrackNodes = ({ navigate }) => {
    const hmsInstanceRef = useRef(null); // We will save `hmsInstance` in this ref
    const [loading, setLoading] = useState(true);
    const [peerTrackNodes, setPeerTrackNodes] = useState([]); // Use this state to render Peer Tiles

    const handleRoomLeave = async () => {
        try {
            const hmsInstance = hmsInstanceRef.current;

            if (!hmsInstance) {
                return Promise.reject('HMSSDK instance is null');
            }
            // Removing all registered listeners
            hmsInstance.removeAllListeners();

            /**
             * Leave Room. For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/features/leave | Leave Room}
             */
            const leaveResult = await hmsInstance.leave();
            console.log('Leave Success: ', leaveResult);

            /**
```

--------------------------------

### Add 100ms Dependencies to Flutter Project

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/prebuilt.mdx

Instructions to add the 'hms_room_kit' package to your Flutter project's pubspec.yaml file. After adding, run 'flutter pub get' to install the dependency.

```yaml
hms_room_kit:

```

--------------------------------

### Join Video Call (Kotlin)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Shows how to join a video call using the HMSSDK in Kotlin. It includes setting up HMSConfig and implementing the HMSUpdateListener.

```kotlin
val config = HMSConfig("user display name", authToken)

hmsSdk.join(config, MyHmsUpdateListener())

class MyHmsUpdateListener : HMSUpdateListener {
    override fun onJoin(room: HMSRoom) {}
    override fun onTrackUpdate(type: HMSTrackUpdate, track: HMSTrack, peer: HMSPeer) {}
    override fun onPeerUpdate(type: HMSPeerUpdate, peer: HMSPeer) {}
    override fun onMessageReceived(message: HMSMessage) {}
    override fun onRoleChangeRequest(request: HMSRoleChangeRequest) {}
    override fun onRoomUpdate(type: HMSRoomUpdate, hmsRoom: HMSRoom) {}
    override fun onError(error: HMSException) {}
}
```

--------------------------------

### HTML Structure for 100ms Application

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/quickstart/javascript-quickstart.mdx

This HTML code defines the basic structure of the 100ms application, including input fields for joining a room, buttons for controlling audio and video, and a container for displaying remote peers.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Quickstart JS</title>
    <link rel="stylesheet" href="src/styles.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <header>
      <button id="leave-btn" class="btn-danger hide">Leave Room</button>
    </header>
    <form id="join">
      <h2>Join Room</h2>
      <div class="input-container">
        <input id="name" type="text" name="username" placeholder="Your name" />
      </div>
      <div class="input-container">
        <input id="room-code" type="text" name="roomCode" placeholder="Room code" />
      </div>
      <button type="button" class="btn-primary" id="join-btn">
        Join
      </button>
    </form>

    <div id="conference" class="conference-section hide">
      <h2>Conference</h2>

      <div id="peers-container"></div>
    </div>

    <div id="controls" class="control-bar hide">
      <button id="mute-aud" class="btn-control">Mute</button>
      <button id="mute-vid" class="btn-control">Hide</button>
    </div>

    <script type="module" src="src/index.js"></script>
  </body>
</html>
```

--------------------------------

### Flutter: Handle Chat Messaging - 100ms SDK

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/hls-quickstart.mdx

Example of how to handle chat messaging within a Flutter application using the 100ms SDK. This snippet focuses on the integration point for chat features.

```dart
// Checkout the docs for chat messaging here: https://www.100ms.live/docs/flutter/v2/how--to-guides/set-up-video-conferencing/chat
  }

  @override
  void onReconnected() {
    // Checkout the docs for reconnection handling here: https://www.100ms.live/docs/flutter/v2/how--to-guides/handle-interruptions/reconnection-handling
  }

  @override
  void onReconnecting() {
    // Checkout the docs for reconnection handling here: https://www.100ms.live/docs/flutter/v2/how--to-guides/handle-interruptions/reconnection-handling
  }

  @override
  void onRemovedFromRoom({
    required HMSPeerRemovedFromPeer hmsPeerRemovedFromPeer,
  }) {
    // Checkout the docs for handling the peer removal here: https://www.100ms.live/docs/flutter/v2/how--to-guides/interact-with-room/peer/remove-peer
  }

  @override
  void onRoleChangeRequest({
    required HMSRoleChangeRequest roleChangeRequest,
  }) {
    // Checkout the docs for handling the role change request here: https://www.100ms.live/docs/flutter/v2/how--to-guides/interact-with-room/peer/change-role#accept-role-change-request
  }
```

--------------------------------

### Install expo-camera

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-prebuilt.mdx

Installs the expo-camera library, which is essential for requesting camera and microphone permissions from users in an Expo application.

```bash
npx expo install expo-camera -- --legacy-peer-deps
```

--------------------------------

### Install React Native Room Kit Dependencies

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-prebuilt.mdx

Installs all necessary peer dependencies for the 'react-native-room-kit' package, ensuring compatibility and proper linking of native modules.

```bash
npx expo install @100mslive/react-native-hms \
  @100mslive/types-prebuilt \
  @react-native-community/blur \
  @react-native-masked-view/masked-view \
  @shopify/flash-list \
  lottie-react-native \
  react-native-gesture-handler \
  react-native-linear-gradient \
  react-native-modal \
  react-native-reanimated \
  react-native-safe-area-context \
  react-native-simple-toast \
  react-native-webview \
  -- --legacy-peer-deps
```

--------------------------------

### Install react-native-reanimated

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/prebuilt.mdx

Installs the 'react-native-reanimated' package, which is necessary for implementing animated views within the React Native application. Version 2.x.x or higher is supported.

```bash
npm install react-native-reanimated@2.17.0
```

--------------------------------

### Join Video Call (Java)

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/android/v2/quickstart/quickstart.mdx

Shows how to join a video call using the HMSSDK in Java. It includes setting up HMSConfig and implementing the HMSUpdateListener.

```java
HMSConfig config = new HMSConfig("user display name", authToken);

hmsSdk.join(config, new MyHmsUpdateListener());

class MyHmsUpdateListener implements HMSUpdateListener {
    @Override public void onJoin(@NonNull HMSRoom hmsRoom) {}
    @Override public void onMessageReceived(@NonNull HMSMessage hmsMessage) {}
    @Override public void onPeerUpdate(@NonNull HMSPeerUpdate hmsPeerUpdate, @NonNull HMSPeer hmsPeer) {}
    @Override public void onReconnected() {}
    @Override public void onReconnecting(@NonNull HMSException e) {}
    @Override public void onRoleChangeRequest(@NonNull HMSRoleChangeRequest hmsRoleChangeRequest) {}
    @Override public void onRoomUpdate(@NonNull HMSRoomUpdate hmsRoomUpdate, @NonNull HMSRoom hmsRoom) {}
    @Override public void onTrackUpdate(@NonNull HMSTrackUpdate hmsTrackUpdate, @NonNull HMSTrack hmsTrack, @NonNull HMSPeer hmsPeer) {}
    @Override public void onError(@NonNull HMSException e) {}
}
```

--------------------------------

### Xcode Project Setup: Info.plist Entitlements

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/ios/v2/quickstart/quickstart.mdx

Adds necessary permissions to the Info.plist file for camera, microphone, and network access, which are crucial for video conferencing functionality.

```xml
<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing.</string>
```

--------------------------------

### Install expo-build-properties

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/react-native/v2/quickstart/expo-prebuilt.mdx

Installs the expo-build-properties library, which is used to configure minimum deployment targets for Android and iOS platforms within an Expo project.

```bash
npx expo install expo-build-properties -- --save-dev --legacy-peer-deps
```

--------------------------------

### Initialize and Join Room with HMSSDK in Flutter

Source: https://github.com/100mslive/100ms-docs/blob/main/docs/flutter/v2/quickstart/hls-quickstart.mdx

This Flutter code initializes the HMSSDK, builds it, adds an update listener, and joins a room using provided authentication token and user name. It follows the standard setup process for the 100ms SDK in a Flutter application.

```dart
class HLSViewerPage extends StatefulWidget {
  final String authToken;
  final String userName;
  const HLSViewerPage(
      {super.key, required this.authToken, required this.userName});

  @override
  State<HLSViewerPage> createState() => _HLSViewerPageState();
}

class _HLSViewerPageState extends State<HLSViewerPage>
    implements HMSUpdateListener {
  late HMSSDK _hmsSDK;
  VideoPlayerController? _controller;
  late Future<void> _initializeVideoPlayerFuture;

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

  void initHMSSDK() async {
    _hmsSDK = HMSSDK();
    await _hmsSDK.build();
    _hmsSDK.addUpdateListener(listener: this);
    _hmsSDK.join(
        config:
            HMSConfig(authToken: widget.authToken, userName: widget.userName));
  }

  @override
  void dispose() {
    _controller?.dispose();
    _controller = null;
    super.dispose();
  }

  @override
  void onJoin({required HMSRoom room}) {
    if (room.hmshlsStreamingState?.running ?? false) {
      if (room.hmshlsStreamingState?.variants[0]?.hlsStreamUrl != null) {
        _controller = VideoPlayerController.network(

```

--------------------------------

### Install and Run Vale Linter

Source: https://github.com/100mslive/100ms-docs/blob/main/README.md

Commands to install Vale using Homebrew, synchronize styles, and run linting on documentation files. Vale is a linter that checks for writing style and grammar.

```bash
brew install vale
vale sync
vale docs/*
```