Ever wished you could blend .NET MAUI with the collaboration magic of Microsoft Teams? With .NET MAUI, building native apps for multiple platforms is easier than ever — and now, you can take it a step further by integrating a new Azure UI Library that get you directly with Teams video calls! making your apps more collaborative and accessible with the power of Azure + Teams. 🚀
Not too many .NET MAUI Frameworks for video calls
One noticeable gap in .NET MAUI right now is the lack of built-in support for implementing video calls. While MAUI excels at creating cross-platform applications with a single codebase, developers looking to integrate real-time video communication need to rely on third-party SDKs or platform-specific implementations. Unlike some frameworks that offer native modules for video conferencing, .NET MAUI doesn't currently provide an out-of-the-box solution, which can add complexity when targeting multiple platforms like Android, iOS, Windows, and macOS. This means handling platform-specific quirks and ensuring smooth video performance across devices, often leading to additional development overhead.
Azure Communication Service UI Library for Mobile
Even with the market being blooding by the lack of options The Azure team has designed this new library as a solution. This required a platform-specific implementation, but today we will just focus on Android.
The Azure Communication UI Mobile Library gives you plug-and-play UI components for building B2C and B2B calling experiences fast—no need to start from scratch. Now let's start the coding...
Prerequisites
Based on Contributors Documentation take this requirements as must:
- Create an Azure account and make a subscription active:
- Don't forget to Download Android Studio and run a test project.
- Create and add the Azure Communication Resource into your previous Azure account created.
- Don't forget to get your service Token for authentication.
- Remember having setup your Visual Studio Or Visual Code.
- Download GitBash at your end or have installed anything that could run
.shfiles. - And finally, download this repo at your end.
After having done all preparation points, let's start with the implementation.
Getting Start
1- Open the repo downloaded call: CommunicationCallingSampleMauiApp with your file explorer/finder.
2- Now, create your own .NET MAUI project. In my case, I created one based on .NET 9 just for Android.
3- From the repo project downloaded, find this folder AndroidMauiBindings and copy the files from the image into your solution folder:
4- Run the script file with your Gitbash (Windows) console or your preference editor, like this:
///First command
chmod +x downloadJarScript.sh
///Second command
./downloadJarScript.sh
5- Import the android bindings previously copied under your solution:
This binding are very important and their Jars libreries too. If you can get it correctly from the repo, try it from the original source.
6- After that, add the resources folder require for bindings to get the necessary assets to drawing the Video Call UI:
7- Now go to your Android Manifest file and make sure it looks like this:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<application
android:allowBackup="true"
tools:replace="android:label"
android:icon="@mipmap/appicon"
android:roundIcon="@mipmap/appicon_round"
android:supportsRtl="true"
android:enableOnBackInvokedCallback="true"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
8- Now is time to compile your project and everything should be good.
9- I submitted a repo with this working, and you can find the missed pieces in there.
10- Considered to add in your Azure Portal the necessary resources to make this work. For this one we will need an Azure Communication Service. First create the resource and finally, generate the token.
11- Finally, the place to put your token and meeting info, you will find it on MainPage.xaml.cs:
private void OnCounterClicked(object sender, EventArgs e)
{
callComposite.joinCall("[Your Name]", "[Place your token in here]", "[Place your Teams link meeting in here]", CallType.TeamsCall, _localization, _dataModelInjection, _orientationProps, _callControlProps);
}
NOTES TO CONSIDERE
NOTE #1: There is a reported about this kind of implementation saved on a very long file path. Consider to save this in a shorter place, As: C:/src/[MyProject]. Issue Link.
NOTE #2: Make sure to setup the project file as was recommended other wise, you could get this type of Issue.
Top comments (0)