diff --git a/.vale.ini b/.vale.ini index 5fceca20bd..ca753140f2 100644 --- a/.vale.ini +++ b/.vale.ini @@ -13,7 +13,7 @@ mdx = md BasedOnStyles = Vale, Google - +Vale.Repetition = NO BlockIgnores = (?s) *(\x60\x60\x60[a-z]*\n[\s\S]*?\x60\x60\x60) diff --git a/docs/javascript/v2/release-notes/release-notes.mdx b/docs/javascript/v2/release-notes/release-notes.mdx index 121c4c24f4..deabc42598 100644 --- a/docs/javascript/v2/release-notes/release-notes.mdx +++ b/docs/javascript/v2/release-notes/release-notes.mdx @@ -105,6 +105,8 @@ Released: `@100mslive/hms-video-store@0.11.1`, `@100mslive/react-sdk@0.9.1`, `@1 - Roomkit Prebuilt: Missing CSS reset on some components - Echo in Firefox versions above 116 +#### Added: +- Added new method `getNativeTrackById` to fetch native media stream track. ## 2024-01-12 Released: `@100mslive/hms-video-store@0.11.0`, `@100mslive/react-sdk@0.9.0`, `@100mslive/hls-player@0.2.0`, `@100mslive/roomkit-react@0.2.0` diff --git a/docs/react-native/v2/how-to-guides/handle-interruptions/interruption-handling.mdx b/docs/react-native/v2/how-to-guides/handle-interruptions/interruption-handling.mdx new file mode 100644 index 0000000000..b48c81f49c --- /dev/null +++ b/docs/react-native/v2/how-to-guides/handle-interruptions/interruption-handling.mdx @@ -0,0 +1,31 @@ +--- +title: Interruption Handling +nav: 6.2 +--- + +You're chatting away on your video call and, uh-oh, a phone call comes in. No worries, the 100ms SDK abstracts away handling this situation for you. + +When a telephonic voice call comes in and the user accepts the following happens. + +- All videos including your own are turned off. +- You are muted. + +When the call ends the SDK will restore all videos, taking care not to un-mute you if you had muted yourself before the call came in. Neither will it un-mute all the peers if you had muted them from the app. + +No code required, this happens automatically for all calls. + +In Android, you will get a `ON_ROOM_UPDATE` event with the update type `HMSRoomUpdate.ROOM_MUTED` when the call starts and `HMSRoomUpdate.ROOM_UNMUTED` when the call ends +and also `ON_TRACK_UPDATE` event for local peer with update type `HMSTrackUpdate.TRACK_MUTED` when call starts and `HMSTrackUpdate.TRACK_UNMUTED` when call ends if the tracks were unmuted earlier. + +![interruptionHandle](/docs/v2/flutter-interruption-handle.png) + +| **App State** | **Scenario** | **Android** | **iOS** | +| :------------ | :----------------------------------------- | :----------------------------------------- | :----------------------------------------- | +| Foreground | **A Call interrupts Microphone access** | SDK gets the mic access back after call | SDK gets the mic access back after call | +| Background | **A Call interrupts Microphone access** | SDK doesn't get the mic access after call | SDK gets the mic access back after call | +| Foreground | **A Call interrupts Camera access** | SDK gets the camera access back after call | SDK gets the camera access back after call | +| Background | **A Call interrupts Camera access** | SDK gets the camera access back after call | SDK gets the camera access back after call | +| Foreground | **Other app interrupts Microphone access** | SDK gets the mic access back after call | SDK gets the mic access back after call | +| Background | **Other app interrupts Microphone access** | SDK doesn't get the mic access after call | SDK gets the mic access back after call | +| Foreground | **Other app interrupts Camera access** | SDK gets the camera access back after call | SDK gets the camera access back after call | +| Background | **Other app interrupts Camera access** | SDK gets the camera access back after call | SDK gets the camera access back after call | diff --git a/docs/react-native/v2/how-to-guides/interact-with-room/room/polls.mdx b/docs/react-native/v2/how-to-guides/interact-with-room/room/polls.mdx index 4a98fe57d7..37ec5a29f2 100644 --- a/docs/react-native/v2/how-to-guides/interact-with-room/room/polls.mdx +++ b/docs/react-native/v2/how-to-guides/interact-with-room/room/polls.mdx @@ -1,5 +1,5 @@ --- -title: Polls +title: Polls & Quizzes nav: 8.3 --- @@ -17,9 +17,9 @@ This document provides guidance on how to use the Poll APIs to create a poll, re ## Creating a Poll -### Quick Create +### Quick Start -Here is how to quickly create a poll using poll builder. +Here is how to quickly start a poll Let's consider an example. We'll create a single-choice poll with the title `Survey` and the question `Do you like TypeScript?` The poll will offer two options: `Yes` and `No`. @@ -27,7 +27,7 @@ Let's consider an example. We'll create a single-choice poll with the title `Sur await hmsInstance.interactivityCenter.startPoll({ pollId: 'myUniqueID', title: 'Survey', - type: HMSPollType.poll, + type: HMSPollType.poll, // or `HMSPollType.quiz` mode: HMSPollUserTrackingMode.customerUserID, questions: [ { @@ -37,10 +37,12 @@ await hmsInstance.interactivityCenter.startPoll({ skippable: false, options: [ { - text: 'Yes' + text: 'Yes', + // isCorrectAnswer: true // In case of quiz }, { - text: 'No' + text: 'No', + // isCorrectAnswer: false // In case of quiz } ] } @@ -86,13 +88,15 @@ const selectedOptionIndex = 1; await hmsInstance.interactivityCenter.add({ pollId, - pollQuestionIndex: pollQuestion.index, + pollQuestionIndex: pollQuestion.index, // index of the question responses: { - options: [selectedOptionIndex] + options: [selectedOptionIndex] // array of selected option indices, single item if it's a single-choice question and one or more if it's a multiple-choice question } }); ``` +Once you have submitted your responses, other peers in the room will get `POLL_VOTES_UPDATED` notification. You can check updated vote counts for each option of poll questions. + ## Stopping a Poll Use `hmsInstance.interactivityCenter.stop(pollId: string)` method when you want to stop the Poll and prevent further responses recorded. @@ -100,3 +104,46 @@ Use `hmsInstance.interactivityCenter.stop(pollId: string)` method when you want ```js await hmsInstance.interactivityCenter.stop(pollId); ``` + +## Fetching the Quiz Leaderboard + +Once the quiz has ended, the leaderboard can be fetched which has the quiz summary and peer level statistics sorted by score using the asynchronous `fetchLeaderboard` function added to the interactivityCenter. + +```js +const response = await hmsInstance.interactivityCenter.fetchLeaderboard( + quizId, // `pollId` of the poll/quiz + 5, // The number of peer entries that should be fetched at a time + 1, // The position offset after which the peer level entries should be fetched + false, // Whether to include the current peer in the fetched leaderboard entries +); +``` +The props accepted are: +- `quizId` :HMSPoll - `pollId` of the poll/quiz +- `count` :number - The number of peer entries that should be fetched at a time +- `offset` :number - The position offset after which the peer level entries should be fetched, Note that "Indexing starts from 1" +- `includeCurrentPeer`: boolean - Whether to include the current peer in the fetched leaderboard entries + +The response contains: +- An array of entries of type `HMSPollLeaderboardEntry`, +- A boolean `hasNext` which indicates if there are more entries to be fetched, and +- An object of type `HMSPollLeaderboardSummary` containing details like the average score, average time taken to answer a question, number of users with all correct answers and more. + +```ts +{ + entries: [...], + summary: { + totalUsers: number, + votedUsers: number, + avgScore: number, + avgTime: number, + correctUsers: number, + }; + hasNext: false +} +``` + +## Viewing Poll Results Summary + +After poll has ended you can use `poll.result` to get statistics like how many peers responded and how many total peers were in the room at the time of poll. + +> Have a look at the [API reference of polls](https://www.100ms.live/docs/api-reference/react-native/v2/interfaces/HMSPoll.html) to understand the interface better diff --git a/docs/react-native/v2/how-to-guides/set-up-video-conferencing/local-audio-share.mdx b/docs/react-native/v2/how-to-guides/set-up-video-conferencing/local-audio-share.mdx index 28405c88da..365d00cb37 100644 --- a/docs/react-native/v2/how-to-guides/set-up-video-conferencing/local-audio-share.mdx +++ b/docs/react-native/v2/how-to-guides/set-up-video-conferencing/local-audio-share.mdx @@ -25,11 +25,12 @@ Follow below steps to start audio share on android devices - #### Native file change -Add `FOREGROUND_SERVICE` permission and `HMSAudioshareActivity` activity in the `android/app/src/main/AndroidManifest.xml` file - +Add `FOREGROUND_SERVICE`, `FOREGROUND_SERVICE_MEDIA_PROJECTION` permission and `HMSAudioshareActivity` activity in the `android/app/src/main/AndroidManifest.xml` file - -```xml{2, 8-10} +```xml{2-3, 9-11} + ... diff --git a/docs/react-native/v2/how-to-guides/set-up-video-conferencing/screenshare.mdx b/docs/react-native/v2/how-to-guides/set-up-video-conferencing/screenshare.mdx index b9b3d176b0..b2e3a8a065 100644 --- a/docs/react-native/v2/how-to-guides/set-up-video-conferencing/screenshare.mdx +++ b/docs/react-native/v2/how-to-guides/set-up-video-conferencing/screenshare.mdx @@ -11,6 +11,10 @@ Please note that for a peer to share their screen, their role must have screensh ## Android Setup +
+ +### Step 1 - Add Screenshare Activity in your AndroidManifest file + Add `HmsScreenshareActivity` to manifest located at `android/app/src/main/AndroidManifest.xml` as follows - ```xml @@ -29,6 +33,19 @@ Add `HmsScreenshareActivity` to manifest located at `android/app/src/main/Androi ``` +### Step 2 - Add Permission in in your AndroidManifest file + +If you are targeting Android 14 and above, You also need to add `FOREGROUND_SERVICE_MEDIA_PROJECTION` permission in manifest located at `android/app/src/main/AndroidManifest.xml` as follows - + +```xml{2} + + + {...} + +``` + +
+ ## iOS Setup You need to create an iOS broadcast upload extension. It uses Apple's ReplayKit framework to record the device screen and delivers frame samples to your broadcast extension. You can share not only your own app but also the entire device sceeen including other apps on the device. diff --git a/docs/react-native/v2/quickstart/prebuilt.mdx b/docs/react-native/v2/quickstart/prebuilt.mdx index aba5e3c3f4..89d51b3371 100644 --- a/docs/react-native/v2/quickstart/prebuilt.mdx +++ b/docs/react-native/v2/quickstart/prebuilt.mdx @@ -7,6 +7,8 @@ nav: 2.1 This guide will walk you through simple instructions to create a Video Conferencing app using the 100ms Prebuilt and test it using an Emulator or your Mobile Phone. Ensure that you are using the latest versions of the packages. +> Note: If you are using Expo, refer to the [Expo & Prebuilt Quickstart guide](./expo-prebuilt). + | Package | Version | | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | @100mslive/react-native-room-kit | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-room-kit)](https://www.npmjs.com/package/@100mslive/react-native-room-kit) |