Azure Communication Services UI Library Now Available for iOS and Android

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.

Our team at Azure Communication Services is excited to announce general availability (GA) of our UI Library for iOS & Android. In this blog post we will summarize key features of the UI Library SDK's and link you to resources to help you get started with your own mobile application today.

 

The Azure Communication Services UI Library for mobile platforms joins our already available UI Library for web. The promise of the mobile and web UI libraries is to help you quickly implement beautiful experiences for end-users and react quickly to evolving business needs.

 

Scenarios

 

jorhiro7_1-1656366228488.jpeg

jorhiro7_2-1656366228495.jpeg

 

You can use the UI Library in business-to-consumer (B2C) scenarios like virtual appointments, such as a healthcare visit or a mortgage application. Because so many businesses are already using Microsoft Teams, you can take advantage of Azure Communication Services and Teams interoperability to ship even faster.

You can use the Mobile UI SDK to quickly integrate communication in your native, consumer-facing application. While the business persona, whether a medical professional, or mortgage officer, or front-line worker, uses the Teams interface to which they are accustomed.

 

jorhiro7_0-1656368552941.png

 

Of course, you can use Azure Communication Services in consumer-to-consumer (C2C) scenarios or B2C scenarios without Microsoft Teams. You can use your own identity model and build your own suite of applications that integrate communication. For example, LinkedIn delivers meetings built into their web and mobile applications using Azure Communication Services.

 

jorhiro7_1-1656368573801.png

Why mobile development?

 

jorhiro7_3-1656366228501.jpeg

 

Many developers focus on Web applications and take advantage of our core Calling, Chat, and UI SDKs for modern browsers. Web applications have the advantage of not requiring end-users to download an app. But mobile has its own unique advantages. There are 6.64 billion mobile devices reaching 83.72 % of the world population. Native mobile apps enjoy:

  • Improved hardware integration.  Native applications enjoy greater access to devices like GPS and cameras. The device permission model for native mobile applications is easier for end-users to navigate as compared to web apps.
  • Improved performance. Native apps can be more responsive and provide a smoother experience for the user, especially if communication is adjacent to graphic-heavy applications.
  • Notifications and background operation. How does a user go about their day but still receive incoming calls? Mobile applications remain idle in the background and use push notifications to ring the user and pop a toast for incoming calls. Mobile applications are generally more resilient to multi-tasking, allowing the user to have an app like Word open while the communication app is functioning in the background.
  • Offline availability. Native applications can present an interface and troubleshooting tips even if the user doesn’t have working Internet or service access.

Coding with the calling composite.

The UI Library introduces the calling composite, that can be used to build visual communication experiences out of the box. The composite is a turn-key experience for common communication scenarios that have been built using base components as building blocks and packaged to be easily integrated into native mobile applications.

 

Following one of our pillars: zero-day adoption, our commitment with the developers is to create a whole call experience with a couple of lines of code; you can look at the following code snippets

 

Android (java):

 

 

 

val communicationTokenRefreshOptions = CommunicationTokenRefreshOptions({ fetchToken() }, true) val communicationTokenCredential = CommunicationTokenCredential(communicationTokenRefreshOptions) val locator: CallCompositeJoinLocator = CallCompositeGroupCallLocator(UUID.fromString("GROUP_CALL_ID")) val remoteOptions = CallCompositeRemoteOptions(locator, communicationTokenCredential, "DISPLAY_NAME") val callComposite: CallComposite = CallCompositeBuilder().build() callComposite.launch(this, remoteOptions)

 

 

 

iOS (Swift):

 

 

 

let callCompositeOptions = CallCompositeOptions() callComposite = CallComposite(withOptions: callCompositeOptions) let communicationTokenCredential = try! CommunicationTokenCredential(token: "<USER_ACCESS_TOKEN>") let remoteOptions = RemoteOptions(for: .groupCall(groupId: UUID(uuidString: "<GROUP_CALL_ID>")!), credential: communicationTokenCredential, displayName: "<DISPLAY_NAME>") callComposite?.launch(remoteOptions: remoteOptions)

 

 

 

Currently, the Android composites support Java and Kotlin, and for iOS, Swift and UIKit.

 

android-composite.gif

ios-composite.gif

 

The UI Library supports customization in the form of theming & styling following the Fluent UI principles. As part of Microsoft’s commitment to diversity and inclusion, the UI Library is built with accessibility from the ground up and conforming to Microsoft’s Accessibility Standards. The UI Library features localization to enable developers to build experiences that connect with their customers wherever they are.

 

Teams interoperability.

With Azure Communication Services interoperability into Microsoft Teams, developers can do just that with the flexibility, economy, and scalability needed to build their own app experiences that now connect to the Teams platform, so developers can now integrate Teams meetings easily into the Calling composite, simplifying the implementation and improving the velocity so that they will deliver an entire Teams integration experience.

 

Localization.

Localization is a key to making products that can be used across the world. The UI Library for mobile platforms (iOS & Android) now provides support for 13 languages out of the box and RTL (Right to Left) capabilities. Also, the developers can add their own customs labels into the composite, and those will be rendered by just overriding the dictionary. You can learn more about “How to add localization in your app.”

 

Theming.

The UI Library Calling Composite provides the capability for developers to create a custom theme of all experience by passing a set of theming colors and tints. The UI Library supports customization in the form of theming & styling following the Fluent UI principles. You can learn more about  "How to create your theme" , also for the Fluent UI principles we created and extensive set of assets that will help you to design and reuse the guidelines.

 

Participant View Data Injection

The UI Library allows the developers to bring their own data model and link it to Azure Communication Services identities. The data model for a user most likely includes information such as their display name, profile picture or avatar image. Information used by developers to power their own applications and platforms. The UI Library makes it simple for developers to inject that user data model into the UI Components, so that when rendered they show a user’s provided information rather than generic information. You can learn more about the avatar injection on our documentation site.

 

View screen shared content & perform pinch to zoom.

Any calling participant will be capable of viewing the shared content when other participant shares their screen during the call. Participants can zoom into the shared content, using a pinch gesture over the screen to focus on the shared content that’s being presented.

 

Accessibility. 

Accessibility by design is a principle across Microsoft products, and UI Library follows this principle in ensuring that all UI Components are fully accessible. This release includes improvements to move towards compliance with Microsoft accessibility standards. Further improvements are planned for upcoming releases.

 

Summary

Area

Use Cases

Call Types

Join Teams Meeting

 

Join Azure Communication Services call with Group ID

Teams Interop

Call Lobby

Participant Gallery

Remote participants are displayed on grid

 

Video preview available throughout call for local user

 

Default avatars available when video is off

 

Shared screen content displayed on participant gallery

 

Participant Avatar Customization

 

Participant roster

Call configuration

Microphone device management

 

Camera device management

 

Speaker device management (wired & Bluetooth supported)

 

Local preview available for user to check video

Call Controls

Mute/unmute call

 

Video on/off on call

 

End call

 

Hold/Resume Call on Audio Interruption

 

To learn more about the capabilities and use case scenarios for the UI Library for mobile platforms please vit our UI Library Use Cases site, where you will find more information related to the UI Libraries.

 

Next steps.

Now you can start learning and creating custom communication experiences using the UI Library for mobile platforms, so feel free to visit the guide that we prepare for all developers:

 

We're incredibly thankful for customers who were early adopters of the UI Library and gave us valuable feedback. Please stay tuned for future updates and follow our GitHub repositories and also If you have any feature ideas and asks, please reach out to our team via User Voice.

 

Learn more:

You can look at our video series on the YouTube channel to learn more about the Azure Communication Services and how to achieve more with the UI Library:

 

 

What is upcoming?

Subscribe to this blog to learn more about the upcoming releases, including adding more chat and Teams-themed controls over the next few months. All of us at Azure Communication Services are excited to see what beautiful applications you will create, inspiring us to continue innovating and delivering tools to help you do more.

 

Please provide some feedback answering this survey and help us to build together the tools of the future.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.