Edit

Get started with Cross Platform development using the UI library

  • Article
  • 4 minutes to read

Important

This feature of Azure Communication Services is currently in preview.

Preview APIs and SDKs are provided without a service-level agreement. We recommend that you don't use them for production workloads. Some features might not be supported, or they might have constrained capabilities.

For more information, review Supplemental Terms of Use for Microsoft Azure Previews.

Azure Communication Services introduces Cross Platform development using .NET MAUI, Xamarin and React Native solutions. This sample demonstrates how Azure Communication Services Calling integrates the UI Library for mobile platforms and create the bindings to allow developers to begin building with the calling capabilities.

Azure Communication UI Mobile Library for .NET MAUI

This project demonstrates the integration of Azure Communication UI library into .NET MAUI application. It utilizes Azure Communication Services and the native Azure Communication Services UI library to build a calling experience that features both voice and video calling.

Download code

Find the project for this sample on GitHub.

Features

Refer to the native UI Library overview

Prerequisites

Run sample app

Clone repo.

For Android

Visual Studio Mac/Windows 2022
  1. Navigate to /AndroidMauiBindings and in this directory in terminal run ./downloadJarScript.sh. GitBash or Windows Subsystem for Linux (WSL) should be enabled to run .sh on Windows.
  2. Open CommunicationCallingSampleMauiApp/CommunicationCallingSampleMauiApp.sln in Visual Studio
  3. Edit CommunicationCallingSampleMauiApp/CommunicationCallingSampleMauiApp.csproj and set <TargetFrameworks>net7.0-android</TargetFrameworks>.
  4. Select android device/emulator in visual studio and run CommunicationCallingSampleMauiApp app.

For iOS

Visual Studio Mac 2022
  1. Navigate to communication-services-ui-library-maui/iOSMauiBindings/ProxyLibs/CommunicationUI-Proxy and in this directory in terminal run ./iOSFramework.sh -d.
  2. Open CommunicationCallingSampleMauiApp/CommunicationCallingSampleMauiApp.sln in Visual Studio
  3. Edit CommunicationCallingSampleMauiApp/CommunicationCallingSampleMauiApp.csproj and set <TargetFrameworks>net7.0-ios</TargetFrameworks>.
  4. Select iOS device/simulator in visual studio and run CommunicationCallingSampleMauiApp app.

Highlights and feedback

Visit GitHub to learn more and discover more capabilities and share your valuable feedback.

Azure Communication UI Mobile Library for Xamarin

This project demonstrates the integration of Azure Communication UI library into Xamarin Forms application. It utilizes Azure Communication Services and the native Azure Communication Services UI library to build a calling experience that features both voice and video calling.

Download code

Find the project for this sample on GitHub.

Features

Refer to the native UI Library overview

Prerequisites

Run sample app

Clone repo and open CommunicationCallingXamarinSampleApp.sln in Visual Studio

For Android

  1. Navigate to /XamarinAndroidBindings/ and in this directory in terminal run sh downloadJarScript Learn More
  2. Set CommunicationCallingXamarinSampleApp.Android as start up project, build solution and select a device or emulator to run application.

For iOS

It's recommended that you build the binding libraries on macOS first. First navigate to XamariniOSindins/CommunicationUIProxy.Binding and build the CommunicationUIProxy.Binding.sln. This will generate CommunicationUIProxy.Binding\bin folder where it will have NativeLibrary.dll for you to use. Open CommunicationCallingXamarinSampleApp.sln. Under the CommunicationCallingXamarinSampleApp.iOS/References right click and Add Reference. In the .Net Assembly tab, we can browse to where the .dll of our binding library and add it as a reference. Now you can include the library into your project by adding using Xam.CommunicationUIProxy.iOS; at the top of your .cs files. Set CommunicationCallingXamarinSampleApp.iOS as startup project, build, and select a device or emulator to run application.

Highlights and feedback

Visit GitHub to learn more and discover more capabilities and share your valuable feedback.

Azure Communication UI Mobile Library for React Native

This project demonstrates the integration of Azure Communication UI library into a React Native utilizes the native Azure Communication UI library and Azure Communication Services to build a calling experience that features both voice and video calling.

Download code

Find the project for this sample on GitHub.

Features

Refer to the native UI Library overview

Prerequisites

Run sample app

Navigate to AzureCommunicationUIDemoApp/:

  1. Run yarn install

For iOS

Install iOS app dependencies:

  1. In Terminal, navigate to AzureCommunicationUIDemoApp/ios/:
  2. Run pod install --repo-update

For Android

Build android app dependencies:

  1. In Terminal, navigate to AzureCommunicationUIDemoApp/android/:
  2. Run ./gradlew build

Execute

Navigate back to AzureCommunicationUIDemoApp/

  1. Run yarn react-native start
  2. Open another Terminal, navigate to AzureCommunicationUIDemoApp/ folder, and run yarn react-native run-ios or yarn react-native run-android

Alternatively, you can also run the iOS app by launching Xcode from the .xcworkspace file, and run the app with scheme AzureCommunicationUIDemoApp on your simulator or iOS device.

To run Android app, you can also launch Android Studio and run on Android emulator or Android device after syncing up gradle. There are two ways to sync gradle either with a command in the android folder ./gradlew build or via Android Studio.

Highlights and feedback

Visit the GitHub to learn more and discover more capabilities and share your valuable feedback.