How to setup video view in Maui

[tompi]

Hey @andersonvieiragomeslopes, since I got a request for this, I thought I would just show how Im doing it, and get some input from you, what you think about this approach. For Maui, everything works pretty much the same, except for attaching the video view to the "forms" layout.

Trying use the Microsoft.Maui.Controls.Compatibility.Platform.Android.LayoutExtensions.ToView didnt work for me, got a runtime error saying there was no viewhandler for this when I tried to add it to a contentview(which used to work fine in Xamarin).

Anyway, here is what I did:

1. Made a viewrenderer like this:

    public class AcsVideoRenderer : View
    {
        public static readonly BindableProperty NativeVideoViewProperty =
            BindableProperty.Create(nameof(NativeVideoView), typeof(object), typeof(AcsVideoRenderer));

        public object NativeVideoView
        {
            get { return GetValue(NativeVideoViewProperty); }
            set { SetValue(NativeVideoViewProperty, value); }
        }
    }

2. Then in Android, I implemented it like this:

    public class AcsVideoRendererViewHandler : ViewHandler<AcsVideoRenderer, FrameLayout>
    {
        private FrameLayout _frameLayout;
        public AcsVideoRendererViewHandler() 
            : base(AcsVideoRendererViewHandler.AcsVideoRendererMapper, null)
        {
        }

        public static PropertyMapper<AcsVideoRenderer, AcsVideoRendererViewHandler> AcsVideoRendererMapper = new()
        {
            [nameof(AcsVideoRenderer.NativeVideoView)] = (handler, virtualView) => handler.SetNativeVideoView(virtualView.NativeVideoView),
        };
        
        private void SetNativeVideoView(object virtualViewNativeVideoView)
        {
            if (virtualViewNativeVideoView == null)
            {
                return;
            }
            
            if (virtualViewNativeVideoView is not VideoStreamRendererView videoStreamRendererView)
            {
                throw new ArgumentException("Invalid parameter", "NativeVideoView");
            }

            _frameLayout.AddView(videoStreamRendererView);
        }

        protected override FrameLayout CreatePlatformView()
        {
            _frameLayout = new FrameLayout(MauiApplication.Current);
            _frameLayout.SetForegroundGravity(GravityFlags.Fill);
        
            return _frameLayout;
        }
    }

3. In iOS like this:

public class AcsVideoRendererViewHandler : ViewHandler<AcsVideoRenderer, UIView>
{
    private UIView _uiView;
    private ACSVideoStreamRendererView? _currentRenderer;

    public AcsVideoRendererViewHandler()
        : base(AcsVideoRendererViewHandler.AcsVideoRendererMapper, null)
    {
    }

    public static PropertyMapper<AcsVideoRenderer, AcsVideoRendererViewHandler> AcsVideoRendererMapper = new ()
    {
        [nameof(AcsVideoRenderer.NativeVideoView)] = (handler, virtualView) =>
            handler.SetNativeVideoView(virtualView.NativeVideoView),
    };

    private void SetNativeVideoView(object virtualViewNativeVideoView)
    {
        if (virtualViewNativeVideoView == null)
        {
            return;
        }

        if (virtualViewNativeVideoView is not ACSVideoStreamRendererView videoStreamRendererView)
        {
            throw new ArgumentException("Invalid parameter", "NativeVideoView");
        }

        if (_currentRenderer != null)
        {
            // If there was a previous view, remove it.
            // This typically happens when camera is switched.
            _currentRenderer.RemoveFromSuperview();
        }

        _currentRenderer = videoStreamRendererView;

        _uiView.Add(videoStreamRendererView);
    }

    protected override UIView CreatePlatformView()
    {
        _uiView = new UIView();

        return _uiView;
    }
}

4. Changed all video eventhandlers to take object instead of view(this feels a bit hacky...)
5. In xaml, the tag looks like this:

            <acs:AcsVideoRenderer
                x:Name="ACSLocalVideoStreamContainer"
                VerticalOptions="Fill"
                HorizontalOptions="Fill" />

And the viewmodel looks like this:

    private void VideoCallManagerOnOnLocalVideoAdded(object? sender, object videoView)
    {
        _logger.Debug("Got view with local video stream");
        MainThread.InvokeOnMainThreadAsync(() => CallerStatusCard.ACSLocalVideoStreamContainerView.NativeVideoView = videoView);
    }

6. Triggering this from android:

           var camera = _deviceManager.Cameras.First(c => c.CameraFacing == initialCameraDirection);
            _localVideoStream = new LocalVideoStream(camera, Platform.CurrentActivity);
            _localVideoRenderer = new VideoStreamRenderer(_localVideoStream, Platform.CurrentActivity);
            var renderingOptions = new CreateViewOptions(ScalingMode.Fit);
            var nativeView = _localVideoRenderer.CreateView(renderingOptions);
            nativeView.SetForegroundGravity(GravityFlags.Fill);
            OnLocalVideoAdded?.Invoke(this, nativeView);

7. Triggering from iOS:

        var camera = _deviceManager
            .Cameras
            .FirstOrDefault(c => c.CameraFacing == initialCameraFacing);
        _localVideoStream = new ACSLocalVideoStream(camera);
        _localVideoRenderer = new ACSVideoStreamRenderer(_localVideoStream, out var nsError);
        _nsErrorHelper.LogIfError(nsError);
        var renderingOptions = new ACSCreateViewOptions(ACSScalingMode.Fit);
        var nativeView = _localVideoRenderer.CreateViewWithOptions(renderingOptions, out nsError);
        _nsErrorHelper.LogIfError(nsError);
        OnLocalVideoAdded?.Invoke(this, nativeView);

Appreciate any improvements or suggestions to this, otherwise it works, and should provide the missing piece of the puzzle for making the demo Maui compliant I think...