{"id":21213937,"url":"https://github.com/videosdk-live/videosdk-hls-react-native-sdk-example","last_synced_at":"2026-01-06T07:07:19.066Z","repository":{"id":161586635,"uuid":"618281703","full_name":"videosdk-live/videosdk-hls-react-native-sdk-example","owner":"videosdk-live","description":"A ready-to-use React Native UI kit Example for http live streaming(HLS) that enable real-time communication between broadcasters and their audience, allowing for features like chat, Add co-hosts, or other forms of engagement.","archived":false,"fork":false,"pushed_at":"2024-04-04T08:38:56.000Z","size":5416,"stargazers_count":2,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T04:55:12.202Z","etag":null,"topics":["sdk","video","webrtc"],"latest_commit_sha":null,"homepage":"https://docs.videosdk.live/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/videosdk-live.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-24T06:07:46.000Z","updated_at":"2025-01-23T08:04:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"332ec497-b6c7-41e0-ba43-d18050ec76cb","html_url":"https://github.com/videosdk-live/videosdk-hls-react-native-sdk-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-hls-react-native-sdk-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-hls-react-native-sdk-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-hls-react-native-sdk-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/videosdk-live%2Fvideosdk-hls-react-native-sdk-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/videosdk-live","download_url":"https://codeload.github.com/videosdk-live/videosdk-hls-react-native-sdk-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245585815,"owners_count":20639671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sdk","video","webrtc"],"created_at":"2024-11-20T21:24:50.717Z","updated_at":"2026-01-06T07:07:18.980Z","avatar_url":"https://github.com/videosdk-live.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg width=\"400\" src=\"https://static.videosdk.live/videosdk_logo_website_black.png\"/\u003e\n\u003c/p\u003e\n\n---\n\n[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/getting-started)\n[![Discord](https://img.shields.io/discord/876774498798551130?label=Join%20on%20Discord)](https://discord.gg/bGZtAbwvab)\n[![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://app.videosdk.live/signup)\n\nAt Video SDK, we’re building tools to help companies create world-class collaborative products with capabilities of live audio/videos, compose cloud recordings/RTMP/HLS and interaction APIs.\n\n## Demo App\n\n📲 Download the sample iOS app here: https://testflight.apple.com/join/8hUKvpwT\n\n📱 Download the sample Android app here: https://appdistribution.firebase.dev/i/9e63ac73eb4f49c3\n\n## Interactive Livestream (HLS)\n\n- Interactive live stream (HLS) is a media streaming protocol for delivering visual and audio media to viewers over the internet.\n- Interactive live stream (HLS) allows you to distribute content and ensure excellent viewing experiences across devices, playback platforms, and network conditions. It is the ideal protocol for streaming video to large audiences scattered across geographies.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"public/image/hls.png\"/\u003e\n\u003c/p\u003e\n\n- VideoSDK also allows you to configure the interactive livestream layouts in numerous ways like by simply setting different prebuilt layouts in the configuration or by providing your own [custom template](https://docs.videosdk.live/docs/tutorials/customized-layout) to do the livestream according to your layout choice.\n\n## Setup Guide\n\n- Sign up on [VideoSDK](https://app.videosdk.live/) and visit [API Keys](https://app.videosdk.live/api-keys) section to get your API key and Secret key.\n- Get familiarized with [API key and Secret key](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/signup-and-create-api).\n- Get familiarized with [Token](https://docs.videosdk.live/flutter/guide/video-and-audio-calling-api-sdk/server-setup).\n\n## Prerequisites\n\n- React Native 0.59.10 or later\n- Node 10 or later\n- Valid Video SDK [Account](https://app.videosdk.live/)\n- For Android\n  - Java Development Kit (JDK) 8 or later\n  - Android Studio (latest version recommended)\n  - A physical or virtual mobile device running Android 5.0 or later\n- For iOS\n  - Xcode 9.4 or later\n  - CocoaPods\n  - A physical or virtual mobile device running iOS 9.0 or later\n\n## Run the Sample Project\n\n### Step 1: Clone the sample project\n\nClone the repository to your local environment.\n\n```\ngit clone https://github.com/videosdk-live/videosdk-hls-react-native-sdk-example.git\n```\n\n### Step 2: Modify `src/api/api.js` file\n\nGenerate temporary token from [Video SDK Account](https://app.videosdk.live/signup).\n\n```js\nexport const getToken = async () =\u003e {\n  return 'VIDEOSDK_DASHBOARD_TOKEN'; // Update Token here\n};\n```\n\n### Step 3: Install the dependencies\n\nInstall dependencies of all the project dependencies.\n\n```\nnpm install\n```\n\n### Step 4: Run the sample app\n\nBingo, it's time to push the launch button.\n\n```\nnpm run start\nnpm android\nnpm ios\n```\n\n## Key Concepts\n\n- `Meeting` - A Meeting represents Real time audio and video communication.\n\n  **`Note : Don't confuse with Room and Meeting keyword, both are same thing 😃`**\n\n- `Sessions` - A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId.\n- `Participant` - Participant represents someone who is attending the meeting's session, `local partcipant` represents self (You), for this self, other participants are `remote participants`.\n- `Stream` - Stream means video or audio media content that is either published by `local participant` or `remote participants`.\n- `Mode` - There are 2 types of modes:\n\n  `CONFERENCE`: Both audio and video streams will be produced and consumed in this mode.\n\n  `VIEWER`: Audio and video streams will not be produced or consumed in this mode.\n\n\u003cbr/\u003e\n\n## Android Permission\n\nAdd all the following permissions to AndroidManifest.xml file.\n\n```\n    \u003cuses-feature android:name=\"android.hardware.camera\" /\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera.autofocus\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.READ_PHONE_STATE\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\" /\u003e\n\n    \u003c!-- Needed to communicate with already-paired Bluetooth devices. (Legacy up to Android 11) --\u003e\n    \u003cuses-permission\n        android:name=\"android.permission.BLUETOOTH\"\n        android:maxSdkVersion=\"30\" /\u003e\n    \u003cuses-permission\n        android:name=\"android.permission.BLUETOOTH_ADMIN\"\n        android:maxSdkVersion=\"30\" /\u003e\n\n    \u003c!-- Needed to communicate with already-paired Bluetooth devices. (Android 12 upwards)--\u003e\n    \u003cuses-permission android:name=\"android.permission.BLUETOOTH_CONNECT\" /\u003e\n\n```\n\n## iOS Permission\n\nAdd the following entry to your Info.plist file, located at `\u003cproject root\u003e/ios/Runner/Info.plist`:\n\n```\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003e$(PRODUCT_NAME) Camera Usage!\u003c/string\u003e\n\u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n\u003cstring\u003e$(PRODUCT_NAME) Microphone Usage!\u003c/string\u003e\n```\n\n## iOS screen share setup\n\nPlease refer to this documentation guide to [setup screenshare for iOS](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/extras/react-native-ios-screen-share)\n\n\u003cbr/\u003e\n\n## Token Generation\n\nToken is used to create and validate a meeting using API and also initialise a meeting.\n\n🛠️ `Development Environment`:\n\n- For development, you can use temporary token. Visit VideoSDK [dashboard](https://app.videosdk.live/api-keys) to generate temporary token.\n\n🌐 `Production Environment`:\n\n- For production, you have to set up an authentication server to authorize users. Follow our official example repositories to setup authentication server, [videosdk-rtc-api-server-examples](https://github.com/videosdk-live/videosdk-rtc-api-server-examples)\n\n\u003cbr/\u003e\n\n## API: Create and Validate meeting\n\n- `create meeting` - Please refer this [documentation](https://docs.videosdk.live/api-reference/realtime-communication/create-room) to create meeting.\n- `validate meeting`- Please refer this [documentation](https://docs.videosdk.live/api-reference/realtime-communication/validate-room) to validate the meetingId.\n\n\u003cbr/\u003e\n\n## [Initialize a Meeting](https://docs.videosdk.live/react-native/api/sdk-reference/meeting-provider)\n\n- You can initialize the meeting using `MeetingProvider`. Meeting Provider simplifies configuration of meeting with by wrapping up core logic with `react-context`.\n\n```js\n\u003cMeetingProvider\n  config={{\n    meetingId: 'meeting-id',\n    micEnabled: true,\n    webcamEnabled: true,\n    name: 'Participant Name',\n    notification: {\n      title: 'Code Sample',\n      message: 'Meeting is running.',\n    },\n    participantId: 'xyz',\n    // For Interactive Live Streaming we can provide mode, `CONFERENCE` for Speaker and  `VIEWER` for viewer audience.\n    mode: 'CONFERENCE', // \"CONFERENCE\" || \"VIEWER\"\n  }}\n  token={'token'}\u003e\u003c/MeetingProvider\u003e\n```\n\n\u003cbr/\u003e\n\n## [Mute/Unmute Local Audio](https://docs.videosdk.live/javascript/guide/video-and-audio-calling-api-sdk/features/mic-controls)\n\n```js\nconst {unmuteMic, muteMic} = useMeeting();\n\nconst onPress = async () =\u003e {\n  // Enable Mic in Meeting\n  unmuteMic();\n\n  // Disable Mic in Meeting\n  muteMic();\n};\n```\n\n\u003cbr/\u003e\n\n## [Change Audio Device](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/switch-audio-output)\n\n- The `getAudioDeviceList()` function allows a participant to list all of the attached audio devices (e.g., Bluetooth and Earphone).\n\n```js\nimport {getAudioDeviceList} from '@videosdk.live/react-native-sdk';\n\nconst onPress = async () =\u003e {\n  const device = await getAudioDeviceList();\n  console.log('Device :', device); // [\"SPEAKER_PHONE\",\"WIRED_HEADSET\"]\n};\n```\n\n- Local participant can change the audio device using `switchAudioDevice()` method of `Room` class.\n\n```js\nimport {switchAudioDevice} from '@videosdk.live/react-native-sdk';\n\nswitchAudioDevice('SPEAKER_PHONE'); // for device speaker\n\nswitchAudioDevice('EARPIECE'); // for device earpiece\n\nswitchAudioDevice('WIRED_HEADSET'); // for wired headset\n\nswitchAudioDevice('BLUETOOTH'); // for bluetooth device\n```\n\n- Please consult our documentation [Change Audio Device](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/switch-audio-output) for more infromation.\n\n\u003cbr/\u003e\n\n## [Enable/Disable Local Webcam](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/camera-controls)\n\n```js\nconst {enableWebcam, disableWebcam} = useMeeting();\nconst onPress = async () =\u003e {\n  // Enable Webcam in Meeting\n  enableWebcam();\n\n  // Disable Webcam in Meeting\n  disableWebcam();\n};\n```\n\n\u003cbr/\u003e\n\n## [Switch Local Webcam](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/camera-controls)\n\n```js\nconst {changeWebcam, getWebcams} = useMeeting();\nconst onPress = async () =\u003e {\n  // Change Webcam in Meeting\n  const webcams = await getWebcams(); // returns all webcams\n\n  const {deviceId, label} = webcams[0]; // 0th : Rear Cam, 1st : Front Cam\n\n  changeWebcam(deviceId);\n};\n```\n\n\u003cbr/\u003e\n\n## [Change Mode](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/methods#changemode)\n\n- If you want to change the mode of a participant, use the meeting's `changeMode()` method.\n\n```js\nconst {changeMode} = useMeeting();\n\nconst toggleMode = () =\u003e {\n  // For Viewer\n  changeMode('VIEWER');\n\n  // For Speaker\n  changeMode('CONFERENCE');\n};\n```\n\n\u003cbr/\u003e\n\n## [Start/Stop HLS](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/methods#starthls)\n\n```js\nconst {startHls, stopHls} = useMeeting({});\n\nconst config = {\n  // Layout Configuration\n  layout: {\n    type: 'GRID', // \"SPOTLIGHT\" | \"SIDEBAR\",  Default : \"GRID\"\n    priority: 'SPEAKER', // \"PIN\", Default : \"SPEAKER\"\n    gridSize: 4, // MAX : 4\n  },\n\n  // Theme of recording\n  theme: 'DARK', //  \"LIGHT\" | \"DEFAULT\"\n\n  // `mode` is used to either record video \u0026 audio both or only audio.\n  mode: 'video-and-audio', // \"audio\", Default : \"video-and-audio\"\n\n  // Quality of recording and is only applicable to `video-and-audio` type mode.\n  quality: 'high', // \"low\" | \"med\",  Default : \"med\"\n\n  // This mode refers to orientation of recording.\n  // landscape : Record the meeting in horizontally\n  // portrait : Record the meeting in vertically (Best for mobile view)\n  orientation: 'landscape', // \"portrait\",  Default : \"landscape\"\n};\n\n// start HLS\nstartHls(config);\n\n// stop HLS\nstopHls();\n```\n\n\u003cbr/\u003e\n\n## [Chat](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/pubsub)\n\n- The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.\n\n```js\n// importing usePubSub hook from react-native-sdk\nimport {usePubSub} from '@videosdk.live/react-native-sdk';\n\n// CHAT Topic\nconst {publish, messages} = usePubSub('CHAT');\n\n// publish message\nconst sendMessage = () =\u003e {\n  const message = 'Hello People!';\n  publish(message, {persist: true});\n};\n\n// get latest messages\nconsole.log('Messages : ', messages);\n```\n\n\u003cbr/\u003e\n\n## [Raise Hand](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/pubsub)\n\n- This feature allows participants to raise hand during the meeting.\n\n```js\n// importing usePubSub hook from react-native-sdk\nimport {usePubSub} from '@videosdk.live/react-native-sdk';\n\n// RAISE_HAND Topic\nconst {publish} = usePubSub('RAISE_HAND');\n\n// Publish Message\nconst RaiseHand = () =\u003e {\n  publish('Raise Hand');\n};\n```\n\n\u003cbr/\u003e\n\n## [Leave or End Meeting](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/leave-end-meeting)\n\n```js\nconst {leave, end} = useMeeting({});\nconst onPress = () =\u003e {\n  // Only one participant will leave/exit the meeting; the rest of the participants will remain.\n  leave();\n\n  // The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.\n  end();\n};\n```\n\n\u003cbr/\u003e\n\n## [Meeting Event callbacks](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/events)\n\nBy registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.\n\n```js\nimport { Constants, useMeeting } from \"@videosdk.live/react-native-sdk\";\n\nfunction onParticipantJoined(participant) {\n  // This event will be emitted when a new participant joined the meeting.\n  // [participant]: new participant who joined the meeting\n  console.log('onParticipantJoined', participant);\n}\nfunction onParticipantLeft(participant) {\n  // This event will be emitted when a joined participant left the meeting.\n  // [participantId]: id of participant who left the meeting\n  console.log('onParticipantLeft', participant);\n}\nconst onSpeakerChanged = activeSpeakerId =\u003e {\n  // This event will be emitted when any participant starts or stops screen sharing.\n  // [activeSpeakerId]: Id of participant who shares the screen.\n  console.log('onSpeakerChanged', activeSpeakerId);\n};\nfunction onPresenterChanged(presenterId) {\n  // This event will be emitted when a active speaker changed.\n  // [presenterId] : Id of active speaker\n  console.log('onPresenterChanged', presenterId);\n}\nfunction onMeetingJoined() {\n  // This event will be emitted when a localParticipant(you) successfully joined the meeting.\n  console.log('onMeetingJoined');\n}\nfunction onMeetingLeft() {\n  // This event will be emitted when a localParticipant(you) left the meeting.\n  console.log('onMeetingLeft');\n}\n\nfunction onHlsStateChanged(data) {\n   const { status } = data;\n\n  if (status === Constants.hlsEvents.HLS_STARTING) {\n    console.log(\"Meeting Hls is starting\");\n  } else if (status === Constants.hlsEvents.HLS_STARTED) {\n    console.log(\"Meeting Hls is started\");\n  } else if (status === Constants.hlsEvents.HLS_PLAYABLE) {\n    // on hlsStateChanged started you will receive playbackHlsUrl\n    const {playbackHlsUrl}=data;\n    console.log(\"Meeting Hls is playable\");\n  } else if (status === Constants.hlsEvents.HLS_STOPPING) {\n    console.log(\"Meeting Hls is stopping\");\n  } else if (status === Constants.hlsEvents.HLS_STOPPED) {\n    console.log(\"Meeting Hls is stopped\");\n  } else {\n    //\n  }\n }\n\nconst {meetingId, meeting, localParticipant} = useMeeting({\n  onParticipantJoined,\n  onParticipantLeft,\n  onSpeakerChanged,\n  onPresenterChanged,\n  onMeetingJoined,\n  onMeetingLeft,\n  onHlsStateChanged,\n});\n```\n\n\u003cbr/\u003e\n\n## [Participant Events Callback](https://docs.videosdk.live/react-native/api/sdk-reference/use-participant/events)\n\nBy registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.\n\n```js\n  function onStreamEnabled(stream) {\n    // This event will be triggered whenever a participant's video, audio or screen share stream is enabled.\n    console.log(\" onStreamEnabled\", stream);\n  }\n  function onStreamDisabled(stream) {\n    // This event will be triggered whenever a participant's video, audio or screen share stream is disabled.\n    console.log(\" onStreamDisabled\", stream);\n  }\n\n  const {\n    displayName\n    ...\n  } = useParticipant(participantId,{\n    onStreamEnabled,\n    onStreamDisabled,\n  });\n```\n\nIf you want to learn more about the SDK, read the Complete Documentation of [React Native VideoSDK](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/getting-started)\n\n\u003cbr/\u003e\n\n## Project Structure\n\nWe have separated screens and components in the following folder structure:\n\n```\nsrc\n└── scenes\n    └── home\n    └── ILS\n```\n\n\u003cbr/\u003e\n\n### **1. Home Screen**\n\n```\n home\n   └── speaker\n\t└── index.js\n   └── viewer\n\t└── index.js\n    └── index.js\n```\n\n`home/index.js` : This file contains the home screen where `SPEAKER` or `VIEWER` will setup meeting.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/home_screen.png\"/\u003e\n\u003c/p\u003e\n\n`home/speaker/index.js` : This file contains the join screen for `SPEAKER` creator or speaker.\n\u003cbr/\u003e\n\n**Creator Join screen**\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/create_meeting.png\"/\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n**Speaker Join screen**\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/join_speaker.png\"/\u003e\n\u003c/p\u003e\n\n`home/viewer/index.js` : This file contains the join screen for the `VIEWER`, where the user has to enter `meetingId` and `username`\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/join_viewer.png\"/\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n### **2. ILS Screen**\n\n```\n ILS\n  └── Components\n  └── Speaker\n  └── Viewer\n  └── index.js\n  └── ILSContainer.js\n```\n\n- `ILS/index.js` : This file essentially initialise the meeting depending on the config given.\n- `ILS/ILSContainer.js` : It directs users to the `VIEWER` or `SPEAKER` screen.\n\n### Components\n\nThis folder contains all the common components used in `VIEWER` and `SPEAKER` screen.\n\n```\nComponents\n\t└── ChatViewer\n\t└── ParticipantListViewer\n\t└── LocalParticipantPresenter.js\n\t└── WaitingToJoinView.js\n```\n\n#### ChatViewer\n\nThis component is solely responsible for managing chat in the meeting.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/chat_list.png\"/\u003e\n\u003c/p\u003e\n\n#### ParticipantListViewer\n\nThis component is solely responsible for managing the Participant list in the meeting.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/participant_list.png\"/\u003e\n\u003c/p\u003e\n\n- **_Add as a co-Host_**\n\n  - Here, we are using `pubSub` to request a viewer to be co-host. [Click here](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/features/pubsub) to know more about `pubSub`.\n   \u003cp align=\"center\"\u003e\n     \u003cb\u003eHost   \u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp;\u0026emsp; Viewer \u003c/b\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n   \u003cimg height=\"480\" src=\"./public/image/host.png\"/\u003e\n   \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n   \u003cimg height=\"480\" src=\"./public/image/permission.png\"/\u003e\n   \u003c/p\u003e\n\n\u003cbr/\u003e\n\n#### LocalParticipantPresenter.js\n\nThis component is used when local participant share the screen, you can check out the below image.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/screen_share.png\"/\u003e\n\u003c/p\u003e\n\n#### WaitingToJoinView.js\n\nThis component is act as a loader if a participant has not joined successfully.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/creating_room.png\"/\u003e\n\u003c/p\u003e\n\n### Speaker\n\nThe whole user interface and business logic for the `SPEAKER` are contained in this folder.\n\n```\nSpeaker\n  └── MeetingViewer.js\n  └── ParticipantGrid.js\n  └── ParticipantView.js\n  └── PauseInvisibleParticipant.js\n  └── RemoteParticipantPresenter.js\n```\n\n#### MeetingViewer.js\n\nThis file essentially contains the layout for the entire speaker meeting.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/speaker.png\"/\u003e\n\u003c/p\u003e\n\n#### ParticipantGrid.js\n\nThis file is responsible for maintaining a grid with 6 participants in portrait and landscape modes.\n\n#### ParticipantView.js\n\nThis file essentially maintains the stream of a particular participant as well as the status of controls (Mic and Cam)\n\n#### PauseInvisibleParticipant.js\n\nThis file handles participants who are not in the participant grid.\n\n#### RemoteParticipantPresenter.js\n\nThis file handles the screen share of the remote participant.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/remote_screen_share.png\"/\u003e\n\u003c/p\u003e\n\n### Viewer\n\nThe whole user interface and business logic for the `VIEWER` are contained in this folder.\n\n```\nViewer\n  └── ViewerContainer.js\n  └── ControlsOverlay.js\n```\n\n#### ViewerContainer.js\n\nThis file is responsible to show the `VIEWER` livestream and also allow them to interact with chat.\n\n#### ControlsOverlay.js\n\nThis file is responsible for the player overlay which contains play/pause button, seek bar, etc.\n\n\u003c/br\u003e\n\n**Portrait Viewer**\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"180\" src=\"./public/image/portrait_viewer.png\" /\u003e\n\u003c/p\u003e\n\n\u003c/br\u003e\n\n**Landscape Viewer**\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"500\" src=\"./public/image/landscape_without_chat.png\" /\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## Examples\n### Examples for Conference\n\n- [videosdk-rtc-prebuilt-examples](https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples)\n- [videosdk-rtc-javascript-sdk-example](https://github.com/videosdk-live/videosdk-rtc-javascript-sdk-example)\n- [videosdk-rtc-react-sdk-examplee](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example)\n- [videosdk-rtc-react-native-sdk-example](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example)\n- [videosdk-rtc-flutter-sdk-example](https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example)\n- [videosdk-rtc-android-java-sdk-example](https://github.com/videosdk-live/videosdk-rtc-android-java-sdk-example)\n- [videosdk-rtc-android-kotlin-sdk-example](https://github.com/videosdk-live/videosdk-rtc-android-kotlin-sdk-example)\n- [videosdk-rtc-ios-sdk-example](https://github.com/videosdk-live/videosdk-rtc-ios-sdk-example)\n\n### Examples for Live Streaming\n\n- [videosdk-hls-react-sdk-example](https://github.com/videosdk-live/videosdk-hls-react-sdk-example)\n- [videosdk-hls-react-native-sdk-example](https://github.com/videosdk-live/videosdk-hls-react-native-sdk-example)\n- [videosdk-hls-flutter-sdk-example](https://github.com/videosdk-live/videosdk-hls-flutter-sdk-example)\n- [videosdk-hls-android-java-example](https://github.com/videosdk-live/videosdk-hls-android-java-example)\n- [videosdk-hls-android-kotlin-example](https://github.com/videosdk-live/videosdk-hls-android-kotlin-example)\n\n\u003cbr/\u003e\n\n## Documentation\n\n[Read the documentation](https://docs.videosdk.live/) to start using Video SDK.\n\n\u003cbr/\u003e\n\n## Community\n\n- [Discord](https://discord.gg/Gpmj6eCq5u) - To get involved with the Video SDK community, ask questions and share tips.\n- [Twitter](https://twitter.com/video_sdk) - To receive updates, announcements, blog posts, and general Video SDK tips.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideosdk-live%2Fvideosdk-hls-react-native-sdk-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvideosdk-live%2Fvideosdk-hls-react-native-sdk-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvideosdk-live%2Fvideosdk-hls-react-native-sdk-example/lists"}