Twilio WebRTC go in MAUI

[alberk8]

Hi,

I would like to know if it is possible to use Twilio WebRTC go within MAUI app for mobile and desktop ?

[alberk8]

has anyone come up with a native binding to twilio video sdk for android and ios?

[LukeStephen]

I'm also following this, I posted the same to reddit here: https://www.reddit.com/r/dotnetMAUI/comments/ue4c42/has_anyone_gotten_twilio_video_to_work_with_net/

I hope twilio comes out with the same type of library they have for iOS that we use...

[alberk8]

If I am not mistaken twilio has native SDK for iOS and Android. The thing here is to get some gurus to do a binding so that it can be called from managed C# code.

[LukeStephen]

Agree, and also Windows (Mac is already taken care of if it's an M1 or M2 chip since it can run iOS apps)

[alberk8]

I have tried Twilio bindings for Xamarin on Maui and it does not seems to compile.
Any help will be appreciated.

c:\Test\MauiAppVideo\MauiAppVideo\MainPage.xaml.cs(1,7,1,18): error CS0246: The type or namespace name 'TwilioVideo' could not be found (are you missing a using directive or an assembly reference?)

Severity	Code	Description	Project	File	Line	Suppression State
Error		com.android.tools.r8.internal.Hc: Attribute InnerClasses requires EnclosingMethod attribute. Check -keepattributes directive.	MauiAppVideo	D:\Staging\Test\MauiAppVideo\MauiAppVideo\R8	1

[MhAllan]

Dream on. We are asking the Microsoft ACS to make SDK for Microsoft C# and Microsoft MAUI for 3 years now and at the end they gave us jar binding 😅. I think if you want do a toy mobile app you use these XF/MAUI but if you want real mobile app you have to go native.

[realchrisparker]

Hello,
I wanted to give a shout out to Paul Varache, from The49 (UK) and his great work on creating the following NuGet.
https://www.nuget.org/packages/The49.Twilio.Video.Maui/1.0.0-alpha.1
https://github.com/paulvarache/TwilioVideo.Maui

I am a contributor but a minor one at this time. We will make the Github public shortly and hope that others will contribute. The alpha currently works very well and allows video calls one to one and groups.

[realchrisparker]

Hi Luke,

My apologies, the GitHub is still private. Paul is making some changes that will simplify a few things. But I will Paste some information here to get you started.

[realchrisparker]

A simple example of a video call xaml/cs page.

Top of the cs file.

#if IOS
using AVFoundation;
using Foundation;
using Twilio;
#elif ANDROID
using TwilioVideo = Twilio.Video;
#endif

using The49.Twilio.Video.Maui.Services;

Set up private variables.

private LocalVideoTrack localVideoTrack = null; //our local camera.
private LocalAudioTrack localAudioTrack = null; //our local microphone.
private Room room = null; //twilio chat room.

Below code is in the OnAppearing event but you could put this in a button click event, etc.
This code does not check for camera and microphone permissions.

protected override async void OnAppearing()
    {
        base.OnAppearing();

        var roomName = "myvideochat"; //Name of your video room.

        // Code to obtain a Twilio token using your credentials
       //
       //

        //Create local audio track.
        localAudioTrack = LocalAudioTrack.Create( true );

            //Get video cameras and get front as default.
#if ANDROID
        var enumerator = new Tvi.Webrtc.Camera2Enumerator( Microsoft.Maui.ApplicationModel.Platform.CurrentActivity );
        var cameraNames = enumerator.GetDeviceNames(); //store all camera names.
        var CurrentCameraId = cameraNames.FirstOrDefault( n => enumerator.IsFrontFacing( n ) );
        if( CurrentCameraId is null )
            return;

        var cameraCapturer = new TwilioVideo.Camera2Capturer( Microsoft.Maui.ApplicationModel.Platform.CurrentActivity, CurrentCameraId );
#elif IOS
        var cameraSource = TVICameraSource.CaptureDeviceForPosition( AVCaptureDevicePosition.Front ); //default to front camera.
        var cameraCapturer = new TVICameraSource( new CameraSourceDelegate() );
#endif

        localVideoTrack = LocalVideoTrack.Create( true, cameraCapturer );
        localVideoTrack.AddSink( localVideoView ); //Place the local video inside the view.

#if IOS
        cameraCapturer.StartCaptureWithDevice( cameraSource ); //On iOS you have to start capturing with the device source.
#endif

        //Build the twilo room and connect to it as local user..
        var options = new ConnectOptions.Builder( token )
            .RoomName( roomName )
            .VideoTracks( new List<LocalVideoTrack> { localVideoTrack } )
            .AudioTracks( new List<LocalAudioTrack> { localAudioTrack } )
            .Build();
        room = TwilioVideoService.Default.Connect( options ); //connect to the room with local video and audio tracks.
    }
}

[realchrisparker]

The local video and audio tracks have a "IsEnabled" property on them that takes a bool value. This allows you to show/hide video and mute/unmute audio.

[realchrisparker]

Xaml

xmlns:twilio="https://schemas.twilio.com/dotnet/2023/maui"

<Grid>
      <twilio:TwilioVideoView x:Name="remoteVideoView"
                        Margin="0,-50,0,-50" />

      <Border Stroke="Transparent"
              StrokeThickness="2.5"
              StrokeShape="RoundRectangle 20"
              BackgroundColor="White"
              VerticalOptions="End"
              HorizontalOptions="End"
              Margin="10"
              Padding="0">

          <Grid HeightRequest="200"
                WidthRequest="130">

              <twilio:TwilioVideoView x:Name="localVideoView" />

          </Grid>

      </Border>
</Grid>

[realchrisparker]

Also to setup the view when connecting to a room that already has a participant you can add

room.Connected += OnRoomConnected;

After calling the room = TwilioVideoService.Default.Connect( options ); call. Then your OnRoomConnected could look something like this;

void OnRoomConnected( object sender, EventArgs e )
{
        var theRoom = sender as Room; //Sender is the room.
        foreach( var participant in theRoom.RemoteParticipants ) //loop through participants that are already in the room when we connected.
        {
            var remoteTrack = participant.RemoteVideoTracks.FirstOrDefault(); //get the participants video track.
            if( remoteTrack is not null && remoteTrack.RemoteVideoTrack is not null )
            {
                remoteTrack.RemoteVideoTrack.AddSink( remoteVideoView ); //show the video track in our view.
            }
            participant.VideoTrackSubscribed += OnParticipantVideoTrackSubscribed;
        }
}

void OnParticipantVideoTrackSubscribed( object sender, RemoteParticipant.VideoTrackSubscriptionEventArgs e )
{
    e.RemoteVideoTrack.AddSink( remoteVideoView ); //show the video track in our view.
}

[MhAllan]

@realchrisparker Thank you so much for that, but It is still private.

[jayeshkv]

https://www.nuget.org/packages/The49.Twilio.Video.Maui/

this should give you everything you need

[realchrisparker]

@jayeshkv Thank you for providing @MhAllan the link. I hope it works for everyone and I hope some of you decide to contribute to make it better.

[LukeStephen]

Looking forward to the GitHub repo being made public so we can contribute to it.

Any chance you're thinking of reaching out to Twilio to see if they will take it over to officially support it?

[headintheclouds21]

Has there been any progress on this? Paul's nuget package seems great, but I wasn't able to get it working. Does anyone have a small sample "hello world" project to look at to see how this is being done?

[LukeStephen]

Twilio is discontinuing all video offerings, so this project is dead I assume...

[headintheclouds21]

Ah bummer. Thanks for the info. Looks like Twilio is partnering with Zoom to provide it's video sdk
https://www.twilio.com/en-us/changelog/programmable-video-eol-notice

[RanderThe]

They will hold this
https://www.twilio.com/en-us/changelog/-twilio-video-will-remain-a-standalone-product