Join room call support in React native

[codal-hkrishnani]

This issue is for:

How can we connect video/audio call using room id for react native apps? We need support in react native to be able to join video/audio call with room Id

Version

implementation 'com.azure.android:azure-communication-calling:+'

[ShaunaSong]

Hi @codal-hkrishnani,

Thank you for your inquiry about joining room calls using room IDs in React Native apps.

By the end of Q2 (June 2024), we will have the ability to join Room ID along with roles and capabilities in General Availability (GA). Currently, we only offer the ability to join Room ID (without roles and capabilities) in public beta in version 1.7.0-beta.1 for both Android and iOS.

You can use the current implementation for public beta:

implementation 'com.azure.android:azure-communication-calling:1.7.0-beta.1'

implementation 'com.azure.android:azure-communication-ui-calling:1.7.0-beta.1'

Please stay tuned for updates, and feel free to reach out if you have any further questions or need assistance.

Best regards,
Shauna

[codal-hkrishnani]

Hi @ShaunaSong ,

Thanks for responding as per you suggestion I used 1.7.0-beta.1 as well as 2.4.0 implementation mentioned in documentation and create native module for RN to join call using room id taken reference from here now thing is I am getting these errors in android studio

` What went wrong: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'. Could not find com.azure.android:azure-communication-calling:1.7.0-beta.1. Required by: project :app`

However If I use implementation 'com.azure.android:azure-communication-calling:+' these errors go away and I get run time error which says Failed to create call callAgent

Failed to create CallAgent: java.lang.NullPointerException: Attempt to invoke virtual method 'com.azure.android.communication.calling.TelecomManagerOptions com.azure.android.communication.calling.CallAgentOptions.getTelecomManagerOptions()' on a null object reference

Any help/suggestions appreciated. Thanks

[Mohtasim]

Hi @codal-hkrishnani, the error seems like local IDE has not been able to detect the newly changed library version and it might be due to cache as well.

When changing the underlaying dependency, please clean the cache and try to re-built to see if the errors have been resolved. To do so, you can try the following cd android ./gradlew clean or yarn cache clean ./gradlew build .. cd yarn run android or npx react-native run-android

You can also try to open the Android Studio and when you change the UI Library version to 1.7.0-beta.1 in your gradle build file, you can sync the gradle build as well.

With successful gradle build on the library, you will be able to see past the above errors and run the react-native application from terminal.

[codal-hkrishnani]

@Mohtasim - I tried changes you suggested but I am still having same issues.

[Mohtasim]

Hi again @codal-hkrishnani, thank you for trying out the changes. May I suggest that you try to build your React-Native project from the scratch. Somtimes, RN have this linking & build issues along with IDE itself too.

From our end, We have tried to update to 1.7.0-beta.1 and building from scratch by removing existing node modules worked out. For your error above, since I do not have visibility of the local android gradle build settings that you have, you may want to take a look at the stackoverflow solutions of the similar problems that others have faced.

Thank you.

[Mohtasim]

Hi again @codal-hkrishnani, apologies for our suggested ui library import.

The import suggested was missing a part of the library name.

Here is the corrected import that you need to use in android/app/build.gradle

implementation 'com.azure.android:azure-communication-ui-calling:1.7.0-beta.1'

Apologies for the confusion. And thank you so much for your patience.

Best Regards :)

[codal-hkrishnani]

Hi @Mohtasim - Thank you for swift response, this worked!

I am able to join rooms!! I have another query regarding call configuration such as mute/unmute, show/hide camera for video call. So do you think you can help a bit on that ? Or provide any documentation or any reference can help. Thanks again!

[Mohtasim]

Hi @codal-hkrishnani, Thank you for confirming that the issue has been resolved.

For mute/unmute & show/turn off camera in call configuration, please take a look at our How-To/Tutorial guide here.

For your new separate query, it would be beneficial for the community if you register a new issue for separate queries. So that folks with similar query/interest can find the specific issue page and the answer.

Thank you for your queries. :)

[codal-hkrishnani]

That make sense! Quick question @Mohtasim, the doc you shared for call configuration in that CallCompositeLocalOptions is being used, I was wondering will that same method we using for room calls as well or it is just for group call..

[Mohtasim]

@codal-hkrishnani The call configuration in CallCompositeLocalOptions is accepted by launch API when we are launching a rooms call as well. Please feel free to use our guide to join a Rooms Call here

The room call creation locator is a part of CallCompositeRemoteOptions API which is separate. The CallComposite Launch method accepts both LocalOptions & RemoteOptions. Please take a look at the example at the Rooms Call Join link.

[codal-hkrishnani]

Ok thanks @Mohtasim , could you please let me know which iOS pod version should we use for room calls in iOS ?

[Mohtasim]

@codal-hkrishnani The version for iOS beta is 1.7.0-beta.1 as well. Thanks

[sachinpatel3]

Hey @Mohtasim Is there any method or way by which we show remote and local stream of room call in react-native side. As right now i can't find any method to get stream data via streamID.

[iaulakh]

Hi @sachinpatel3, The UI library does not expose streams through its API. Please use the native SDK directly to access video streams. You can refer to the QuickStart guide for Voice and Video Calling for more information on how to do this.

[codal-hkrishnani]

@Mohtasim - I tried with similar sdk version you mentioned above but I am getting this error, any idea why ?

[Mohtasim]

Hi @codal-hkrishnani, to utilize UI library in your react-native bridge for iOS, you have to include the following pod,

platform :ios, '15.0'

target '<yourApp>' do
    use_frameworks!
    pod 'AzureCommunicationUICalling', '<version>'
end

Please take a look at the reference here to utilize UI library and APIs properly for iOS.

[Mohtasim]

Hi @codal-hkrishnani & @sachinpatel3, if you are planning to utilize the ACS Native UI Calling experience, integrate with React Native bridging, and bring it to production ASAP, please reach out to acsmobileuidevdroid@microsoft.com. We can setup a meeting with you to understand your workflow better. Thanks you :)

[codal-hkrishnani]

@Mohtasim - Sounds great, I tried to send an email but seems like we are restricted to send an email to give email address

[garchiro7]

@codal-hkrishnani thank you for trying contact us, let us review this issue, in the meantime please send me your email and I 'll reach you directly.