XAMARIN WEBRTC DEMO APP
Consuming the previous DLLs
WEBRTC DEMO APP
Over the past previous articles, we have seen how to build the native WebRTC sdks for android and iOS, create Xamarin bindings for each platform, create a unified library to be consumed by Xamarin forms app and finally a signaling server for the exchange of offer, answer session descriptions and ice-candidates. In this article we will be looking at how to merge everything together in a demo app. The resources used for this article are itemized below:
1. Native WebRTC library for iOS
2. Native WebRTC library for Android
3. Xamarin Binding library for iOS
4. Xamarin Binding library for Android
5. Unified Xamarin WebRTC library for Xamarin Forms (iOS and Android)
6. NET Core signaling server (powered by SignalR)
7. Repository for older WebRTC
8. Alternative Repository for WebRTC
9. Xirsys TURN Server
10. Visual studio for Mac (2019)
11. Visual studio for PC (2019)
12. Visual studio Code
13. NET Interactive Notebooks (Preview)
For the demo app to work properly, we need 2 servers; a signaling server (which was built in article 7) and a TURN server (We will be using a pre-built 3rd party service).Since article 7 talked about the signaling server, I will briefly talk about how to setup a turn server using Xirsys.
XIRSYS TURN SERVER
Xirsys is a company that provides TURN & STUN servers for user’s various needs, In this case, WebRTC. To get started, you just need to sign up for a Xirsys Account and create an app once signed up. This app gives you access to a URL and api key pair which can then be called using your normal http client calls. The image below shows you how the App is created and gives example http request statements in several languages.
Once you have your URL and api key on hand, you can test it to make sure it is working. To do this, I used a new visual studio code extension that although is still in preview mode has proven to be particularly useful to me in rapid prototyping scenarios. This extension is called NET Interactive you can install it by searching for it in the extensions tab of your Visual studio code. NET Interactive allows you to create runnable C# and F# notebooks like Jupyter Python or C++ notebooks. For more information on.NET Interactive, you can click on this link NET Interactive.
The screen shots below show the notebook code to test if your Xirsys URL and api key work:
The code above, was use in my signaling server to request TURN servers on behalf of a connected client app.
CODEBASE
The core of Xamarin Demo App is structured as usual: A Shared project, iOS project and Android project shown below.
The Xamarin unified library from article 6 created a total of 7 DLLs: one in the shared project bin folder and three in the iOS bin and Android bin folthreeers each. The dll gotten from the shared folder should be added to Demo App’s shared project references folder. The dlls found in the unified library Android bin folder should be added in the Demo App’s Android references folder and vice versa for the iOS counterpart.
Once this was done, I installed the SignalR Client and Newtonsoft Json NuGet packages on all three projects via the inbuilt NuGet package manager for visual studio. The bulk of the code was written in the shared project and native implementations and abstractions were written in the iOS and Android project.
In the shared project’s app.xaml.cs file, you setup the connection to your signal server whilst making sure your signaling server is running locally on your machine.
The calling page was built using Xamarin’s Page renderer functionality which allows you to declare a page in the shared project and build its native/unique versions of the page in iOS and Android.
Also, in the shared project, I created controller and client classes needed to initiate the creation, setting up and exchange of peer connections, data channels, session description types and ice candidates needed to facilitate a WebRTC call.
Once the app is started, it will connect to the Signaling server to register itself as a client. Once this is done, it loads a call page asking for unique room id (GUID). Clicking on starting a call implies you are the initiator of the call and other potential participants can join the call by entering the unique id you created and clicking on the join call button.
Once you click on the join or start call button, depending on your platform iOS or Android, you will be taken to a Page Rendered for the specific platform. Behind the scenes, the controller and client classes made in the shared project will be called in the classes at to the page rendered on both iOS and Android and their methods. Also, interfaces and classes from the Xamarin Unified Library for both iOS and Android will be exposed and implemented on each platform
The diagram below shows the interactions made in the back end.
Because the signaling server was running locally, I used emulators to run the apps and for security reasons, laptop camera access was disabled on the emulators. This meant for iOS a stock video would be played to simulate the camera and for Android a pixelated moving screen would be used. The images below show the signaling server running and call between the iOS and Android Emulator.
Throughout this series, we have seen how to go about compiling, porting, unifying, building, and consuming the necessary components needed to make a simple WebRTC Xamarin App. Of course, in production environments, we will need a more robust set of connections in the sub-systems; from implementing all available objects in the Xamarin binding libraries in the unified libraries, to securing your signaling server to scaling the signaling server to allow for more participants in
a call, requests to the server etc. The ways to make your entire system robust is endless and approaches are infinite. However, with this short 8-part series, I hope I was able to give some insight on how to start and setup your WebRTC solutions.
In the next few weeks, I will be looking into setting up a discord server for answering questions anyone might have. Thank you for reading this series and stay safe.
