diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/01-video-calling.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/01-video-calling.mdx index ec565be47e..92480ca321 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/01-video-calling.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/01-video-calling.mdx @@ -712,15 +712,18 @@ const styles = StyleSheet.create({ // highlight-start customCallControlsContainer: { position: 'absolute', - bottom: 20, + bottom: 40, paddingVertical: 10, width: '80%', marginHorizontal: 20, flexDirection: 'row', alignSelf: 'center', justifyContent: 'space-around', - backgroundColor: 'pink', + backgroundColor: 'orange', borderRadius: 10, + borderColor: 'black', + borderWidth: 5, + zIndex: 5, }, // highlight-end }); @@ -754,10 +757,17 @@ const CustomTopView = () => { const dominantSpeaker = useDominantSpeaker(); return ( - - Video Call between {participants.map(p => p.name).join(', ')} humans + + Video Call between {participants.map(p => p.name).join(', ')} - Dominant Speaker: {dominantSpeaker?.name} + {dominantSpeaker?.name && ( + + Dominant Speaker: {dominantSpeaker?.name} + + )} ); }; @@ -784,11 +794,14 @@ const styles = StyleSheet.create({ // highlight-start customCallTopViewContainer: { width: '100%', - height: 100, - backgroundColor: 'lightblue', + height: 50, + backgroundColor: 'black', justifyContent: 'center', alignItems: 'center', }, + customCallTopViewText: { + color: 'white', + }, // highlight-end }); @@ -822,7 +835,7 @@ export default function App() { }, toggleAudioPublishingButton: { container: { - backgroundColor: 'yellow', + backgroundColor: 'green', }, }, }), diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx index fa3d50246d..93e6c3c1e3 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx @@ -3,6 +3,9 @@ title: Livestream Tutorial description: How to build a livestream experience using Stream's React Native Video SDK --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + import { TokenSnippet } from '../../../shared/_tokenSnippet.jsx'; In this tutorial, we'll quickly build a low-latency in-app livestreaming experience. @@ -19,35 +22,40 @@ We'll cover the following topics: Let's get started, if you have any questions or feedback be sure to let us know via the feedback button. -### Step 1 - Setup a new React Native app +## Step 1 - Setup a new React Native app Create a new React Native app using the official template, ```bash title=Terminal -npx react-native@latest init LiveStreamExample -cd LiveStreamExample +npx react-native@latest init VideoCallExample +cd VideoCallExample ``` -### Step 2 - Install the SDK and declare permissions +## Step 2 - Install the SDK and declare permissions -To install the Stream Video React Native SDK, run the following command in your terminal of choice: +In order to install the Stream Video React Native SDK, run the following command in your terminal of choice: ```bash title=Terminal -yarn add @stream-io/video-react-native-sdk +yarn add @stream-io/video-react-native-sdk @stream-io/react-native-webrtc ``` The SDK requires installing some peer dependencies. You can run the following command to install them: ```bash title=Terminal -yarn add @stream-io/react-native-webrtc react-native-device-info \ - react-native-incall-manager react-native-svg \ - @react-native-community/netinfo @notifee/react-native +yarn add react-native-device-info@10.6.0 +yarn add react-native-incall-manager@4.1.0 +yarn add react-native-svg +yarn add @react-native-community/netinfo@9.3.9 +yarn add @notifee/react-native@7.7.1 + +# Install pods for iOS npx pod-install ``` #### Add Stream Video SDK's setup method -##### Android + + Add the following in your `MainApplication.java` file: @@ -69,9 +77,8 @@ public class MainApplication extends Application implements ReactApplication { } ``` - - -##### iOS + + Add the following in your `AppDelegate.m` or `AppDelegate.mm` file: @@ -90,31 +97,37 @@ Add the following in your `AppDelegate.m` or `AppDelegate.mm` file: } ``` -#### Declare permissions - -##### iOS + + -Add the following keys and values to `Info.plist` file: - -- `Privacy - Camera Usage Description` - "`LiveStreamExample` requires camera access to capture and transmit video" -- `Privacy - Microphone Usage Description` - "`LiveStreamExample` requires microphone access to capture and transmit audio" +#### Declare permissions -##### Android + + -In `AndroidManifest.xml` add the following permissions before the `` section. +In `AndroidManifest.xml` add the following permissions before the `application` section. ```xml - - - - - - - - - - - + + // highlight-start + + + + + + + + + + + // highlight-end + + ... + + + ``` If you plan to also support Bluetooth devices then also add the following. @@ -125,8 +138,34 @@ If you plan to also support Bluetooth devices then also add the following. ``` + + + +Add the following keys and values to `Info.plist` file, under `dict` tag. + +```plist title="Info.plist" + + + ... + CFBundleName + $(PRODUCT_NAME) + // highlight-start + NSCameraUsageDescription + $(PRODUCT_NAME) would like to use your camera + NSMicrophoneUsageDescription + $(PRODUCT_NAME) would like to use your microphone + // highlight-end + ... + + + +``` + + + + :::note -For simplicity, in this tutorial, we do not cover about managing native runtime permissions. Before starting the next step, ensure that camera and microphone permissions are given for this app by granting them in the native settings app. We have discussed a detailed solution to manage native runtime permissions in the [Manage Native Permissions](../../core/native-permissions) guide. +For simplicity, in this tutorial, we do not cover about managing native runtime permissions. Before starting the next step, ensure that microphone permissions are given for this app by granting them in the native settings app. We have discussed a detailed solution to manage native runtime permissions in the [Manage Native Permissions](../../core/native-permissions) guide. ::: #### Android Specific installation @@ -134,9 +173,14 @@ For simplicity, in this tutorial, we do not cover about managing native runtime In `android/app/build.gradle` add the following inside the `android` section: ```java -compileOptions { - sourceCompatibility JavaVersion.VERSION_1_8 - targetCompatibility JavaVersion.VERSION_11 +android { + ... + // highlight-start + compileOptions { + sourceCompatibility JavaVersion.VERSION_1_8 + targetCompatibility JavaVersion.VERSION_11 + } + // highlight-end } ``` @@ -146,6 +190,22 @@ In `android/gradle.properties` add the following: android.enableDexingArtifactTransform.desugaring=false ``` +#### Run the app + +To ensure the best possible experience, we highly recommend running the app on a physical device. +This is due to the limitations in audio and video device support on emulators. +You can refer to the React Native documentation for guidance on [running the app on a physical device](https://reactnative.dev/docs/running-on-device). + +However, if you still prefer to use an emulator, execute the following command: + +```bash +# run iOS app +yarn ios + +# run Android app +yarn android +``` + ### Step 3 - Broadcast a livestream from your device The following code shows how to publish from your device's camera. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call-control-customization.png b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call-control-customization.png index b663bed5a1..be4c6ccdd2 100644 Binary files a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call-control-customization.png and b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call-control-customization.png differ diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call.png b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call.png index 1a519a892d..e1c72ec113 100644 Binary files a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call.png and b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-call.png differ diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-style-customization.png b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-style-customization.png index aa05ca9dc0..f542cd843b 100644 Binary files a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-style-customization.png and b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-style-customization.png differ diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-top-view-customization.png b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-top-view-customization.png index d12319d57c..ee450d6957 100644 Binary files a/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-top-view-customization.png and b/packages/react-native-sdk/docusaurus/docs/reactnative/assets/02-tutorials/01-video-calling/video-top-view-customization.png differ