基于TokBox OpenTok SDK构建Xamarin Forms视频聊天应用的技术咨询

Great question! Custom renderers are exactly the right tool for this job—they’re designed to bridge Xamarin Forms’ cross-platform UI with platform-specific native code, which is perfect for integrating the OpenTok SDKs you already validated in your native prototype. Let’s walk through how to build this step by step.

Overview #

We’ll create a reusable cross-platform control in Xamarin Forms, then build custom renderers for Android and iOS that wrap the native OpenTok views from the Xamarin.OpenTok.Android and Xamarin.OpenTok.iOS NuGet packages. This lets you reuse all the native video chat logic you already tested, while keeping your Forms UI clean and cross-platform.

Step 1: Create a Custom Xamarin Forms Control #

First, define a shared control in your Forms project to act as the container for the video chat. We’ll add bindable properties to pass critical values (API key, session ID, token) from your Forms UI to the native renderers:

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class OpenTokVideoView : View
    {
        // Bindable properties to pass OpenTok credentials
        public static readonly BindableProperty ApiKeyProperty =
            BindableProperty.Create(nameof(ApiKey), typeof(string), typeof(OpenTokVideoView), string.Empty);

        public static readonly BindableProperty SessionIdProperty =
            BindableProperty.Create(nameof(SessionId), typeof(string), typeof(OpenTokVideoView), string.Empty);

        public static readonly BindableProperty TokenProperty =
            BindableProperty.Create(nameof(Token), typeof(string), typeof(OpenTokVideoView), string.Empty);

        public string ApiKey
        {
            get => (string)GetValue(ApiKeyProperty);
            set => SetValue(ApiKeyProperty, value);
        }

        public string SessionId
        {
            get => (string)GetValue(SessionIdProperty);
            set => SetValue(SessionIdProperty, value);
        }

        public string Token
        {
            get => (string)GetValue(TokenProperty);
            set => SetValue(TokenProperty, value);
        }
    }
}

Step 2: Build the Android Custom Renderer #

In your Android project, create a renderer that initializes the OpenTok session, publisher (local camera), and subscriber (remote video), then adds them to a native container:

using Android.Content;
using YourAppNamespace;
using YourAppNamespace.Droid;
using OpenTok;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Widget;

[assembly: ExportRenderer(typeof(OpenTokVideoView), typeof(OpenTokVideoViewRenderer))]
namespace YourAppNamespace.Droid
{
    public class OpenTokVideoViewRenderer : ViewRenderer<OpenTokVideoView, FrameLayout>
    {
        private Session _session;
        private Publisher _publisher;
        private Subscriber _subscriber;
        private FrameLayout _videoContainer;

        public OpenTokVideoViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<OpenTokVideoView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                _videoContainer = new FrameLayout(Context);
                SetNativeControl(_videoContainer);
            }

            if (e.NewElement != null)
            {
                InitializeOpenTokSession();
            }
        }

        private void InitializeOpenTokSession()
        {
            var apiKey = Element.ApiKey;
            var sessionId = Element.SessionId;
            var token = Element.Token;

            if (string.IsNullOrWhiteSpace(apiKey) || string.IsNullOrWhiteSpace(sessionId) || string.IsNullOrWhiteSpace(token))
                return;

            // Initialize session and attach event handlers
            _session = new Session(Context, apiKey, sessionId);
            _session.SessionConnected += OnSessionConnected;
            _session.StreamReceived += OnStreamReceived;
            _session.SessionDisconnected += OnSessionCleanup;
            _session.Error += OnSessionError;

            _session.Connect(token);
        }

        private void OnSessionConnected(object sender, Session.SessionConnectedEventArgs e)
        {
            // Create local publisher and add to container
            _publisher = new Publisher.Builder(Context).Build();
            _session.Publish(_publisher);
            _videoContainer.AddView(_publisher.View);
        }

        private void OnStreamReceived(object sender, Session.StreamReceivedEventArgs e)
        {
            // Subscribe to remote stream and add to container
            _subscriber = new Subscriber.Builder(Context, e.Stream).Build();
            _session.Subscribe(_subscriber);
            _videoContainer.AddView(_subscriber.View);
        }

        // Clean up resources on disconnect/error
        private void OnSessionCleanup(object sender, Session.SessionDisconnectedEventArgs e) => DisposeResources();
        private void OnSessionError(object sender, Session.ErrorEventArgs e) => DisposeResources();

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                DisposeResources();
                Element?.ClearValue(OpenTokVideoView.ApiKeyProperty);
                Element?.ClearValue(OpenTokVideoView.SessionIdProperty);
                Element?.ClearValue(OpenTokVideoView.TokenProperty);
            }
            base.Dispose(disposing);
        }

        private void DisposeResources()
        {
            _session?.Disconnect();
            _session?.Dispose();
            _publisher?.Dispose();
            _subscriber?.Dispose();
            _videoContainer?.RemoveAllViews();
        }
    }
}

Step 3: Build the iOS Custom Renderer #

In your iOS project, create a similar renderer that uses the iOS OpenTok SDK. Note that iOS uses delegate methods instead of events:

using YourAppNamespace;
using YourAppNamespace.iOS;
using OpenTok;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(OpenTokVideoView), typeof(OpenTokVideoViewRenderer))]
namespace YourAppNamespace.iOS
{
    public class OpenTokVideoViewRenderer : ViewRenderer<OpenTokVideoView, UIView>, OTSessionDelegate, OTPublisherDelegate, OTSubscriberDelegate
    {
        private OTSession _session;
        private OTPublisher _publisher;
        private OTSubscriber _subscriber;
        private UIView _videoContainer;

        protected override void OnElementChanged(ElementChangedEventArgs<OpenTokVideoView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                _videoContainer = new UIView();
                SetNativeControl(_videoContainer);
            }

            if (e.NewElement != null)
            {
                InitializeOpenTokSession();
            }
        }

        private void InitializeOpenTokSession()
        {
            var apiKey = Element.ApiKey;
            var sessionId = Element.SessionId;
            var token = Element.Token;

            if (string.IsNullOrWhiteSpace(apiKey) || string.IsNullOrWhiteSpace(sessionId) || string.IsNullOrWhiteSpace(token))
                return;

            _session = new OTSession(apiKey, sessionId, this);
            var connectError = _session.ConnectWithToken(token);
            if (connectError != null)
            {
                DisposeResources();
                // Add user-facing error handling here
            }
        }

        // OTSessionDelegate methods
        [Export("sessionDidConnect:")]
        public void SessionDidConnect(OTSession session)
        {
            // Create local publisher
            var publisherSettings = new OTPublisherSettings { Name = "Xamarin Forms User" };
            _publisher = new OTPublisher(this, publisherSettings);
            var publishError = _session.Publish(_publisher);
            
            if (publishError == null)
            {
                // Position local video as a small overlay
                _publisher.View.Frame = new CoreGraphics.CGRect(0, Control.Frame.Height - 160, 160, 160);
                Control.AddSubview(_publisher.View);
            }
        }

        [Export("session:streamCreated:")]
        public void StreamCreated(OTSession session, OTStream stream)
        {
            // Subscribe to remote stream
            _subscriber = new OTSubscriber(stream, this);
            var subscribeError = _session.Subscribe(_subscriber);
            
            if (subscribeError == null)
            {
                // Position remote video to fill the container
                _subscriber.View.Frame = Control.Bounds;
                Control.AddSubview(_subscriber.View);
            }
        }

        [Export("sessionDidDisconnect:")]
        public void SessionDidDisconnect(OTSession session) => DisposeResources();

        [Export("session:didFailWithError:")]
        public void SessionDidFail(OTSession session, OTError error) => DisposeResources();

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                DisposeResources();
                Element?.ClearValue(OpenTokVideoView.ApiKeyProperty);
                Element?.ClearValue(OpenTokVideoView.SessionIdProperty);
                Element?.ClearValue(OpenTokVideoView.TokenProperty);
            }
            base.Dispose(disposing);
        }

        private void DisposeResources()
        {
            _session?.Disconnect();
            _session?.Dispose();
            _publisher?.Dispose();
            _subscriber?.Dispose();
            _videoContainer?.Subviews?.ToList()?.ForEach(v => v.RemoveFromSuperview());
        }
    }
}

Step 4: Use the Control in Your Xamarin Forms UI #

Add the custom control to your XAML page, passing in your OpenTok credentials (replace placeholders with your actual values):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.VideoChatPage">
    <ContentPage.Content>
        <local:OpenTokVideoView 
            ApiKey="YOUR_OPENTOK_API_KEY"
            SessionId="YOUR_SESSION_ID"
            Token="YOUR_SESSION_TOKEN"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
    </ContentPage.Content>
</ContentPage>

Critical Setup & Best Practices #

• Permissions: Don’t skip these!
  • Android: Add CAMERA, RECORD_AUDIO, and INTERNET permissions to your AndroidManifest.xml.
  • iOS: Add NSCameraUsageDescription and NSMicrophoneUsageDescription entries to your Info.plist with clear messages explaining why you need access.
• Memory Management: Properly dispose of sessions, publishers, and subscribers to avoid leaks—this is especially important in mobile apps.
• Error Handling: Expand the error logic to show user-friendly alerts (e.g., when a connection fails).
• UI Customization: Adjust the video view positions in the renderers to match your app’s design (like moving the local video overlay to a different corner).

内容的提问来源于stack exchange，提问作者Arif Imran