Bir Flutter Eklentisi tasarlama ve geliştirmenin pratik deneyimi
Flutter yerel kodu nasıl çağırır?
Yapmamız gereken, Flutter'a gerçek zamanlı ses ve video uygulamak. Bu nedenle, belirli bir çalışmaya başlamadan önce, Flutter'ın "Get Media Devices" gibi yerel platform API'lerini nasıl çağırdığını anlamanız gerekir.
Yukarıdaki resmi mimari diyagramı yeterince açık: Flutter, MethodChannel aracılığıyla bir yöntem çağrısı başlatır ve ardından yerel platform, mesajı aldıktan sonra ilgili uygulamayı (Java / Kotlin / Swift / Object-C) çalıştırır ve sonucu eşzamansız olarak döndürür. GetUserMedia bir örnektir.İlk olarak, bu yöntemi Flutter katmanında belirtin.Özel uygulama, MethodChannel aracılığıyla çağıran yöntemin adını ve karşılık gelen parametreleri taşıyan bir mesaj göndermektir.
Gelecek < MediaStream > getUserMedia ( Harita < Dize, dinamik > Medya Kısıtlamaları ) async { // MethodChannel'ı önceden kaydettirin MethodChannel channel = WebRTC.methodChannel (); Deneyin { // Karşılık gelen getUserMedia yöntemini çağırmak için MethodChannel'ı kullanın final Haritası < dinamik, dinamik > response = await channel.invokeMethod ( 'getUserMedia', // yöntem adı < Dize, dinamik > {'constraints': mediaConstraints}, // parametreler ); // Zaman uyumsuz dönüş sonucuna göre Flutter katmanında kullanılan bir MediaStream nesnesinin tam kapsüllenmesi String streamId = yanıt; MediaStream akışı = yeni MediaStream (akış kimliği); stream.setMediaTracks (yanıt, yanıt); // sonucu döndür dönüş akışı; } PlatformException catch (e) { // istisnayı ele al throw'Unable to getUserMedia: $ {e.message} '; } }Gelecek, Javascript'in Promise'ine benzer bir zaman uyumsuz çağrıyı temsil eder; zaman uyumsuz bir işlevde zaman uyumsuz / beklemeye benzer, await yöntemi, await eşzamansız bir yöntem olsa bile eşzamanlı ve sıralı olarak çalıştırılır.
Platform aynı zamanda MainActivity'de MethodChannel'ı da kaydettiğinde ve MethodChannel aracılığıyla yöntem çağrısının mesajını ve parametrelerini aldığında, platforma dayalı olarak karşılık gelen mantığı uygular ve yürütme sonucunu döndürür.Burada, örnek olarak yalnızca Android platformu alınmıştır:
// Flutter çağrılarını almak için MethodChannel'ı kaydedin import io.flutter.app.FlutterActivity; ithal io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.MethodChannel.MethodCallHandler; import io.flutter.plugin.common.MethodChannel.Result; public class MainActivity, FlutterActivity { private static final String CHANNEL = "FlutterWebRTC"; @Override public void onCreate (Bundle registeredInstanceState) { super.onCreate (SavedInstanceState); GeneratedPluginRegistrant.registerWith (this); // MethodChannel'ı Kaydedin, ChannelName daha önce Flutter'da kaydedilen adla aynı olmalıdır new MethodChannel (getFlutterView (), CHANNEL) .setMethodCallHandler ( // Her yöntemin özel uygulamasını sağlayın new MethodCallHandler () { @Override public void onMethodCall (MethodCall çağrısı, Sonuç sonucu) { // YAPMAK } }); } } // Uygulama @Override public void onMethodCall (MethodCall çağrısı, Sonuç sonucu) { // Yöntemin adı getUserMedia ise eğer (call.method.equals ("getUserMedia")) { // Android getUserMedia yöntemini uygular // ... // Başarılı olursa ilgili bilgileri döndür // sonuç.success (// ilgili bilgiler); // başarısız olursa bir istisna atın // sonuc.error (// hata mesajı); } Başka { result.notImplemented (); } }Daha ayrıntılı bilgi için lütfen Flutter'ın resmi örneklerine ve açıklamalarına bakın.
Ses ve video SDK'sını uygulamaya yönelik fikirler
Yukarıda bahsedilen Flutter ilkesini yerel platform yöntemini anladıktan sonra, bir ses ve video SDK uygulamak için iki fikrimiz var.
1. Önce ses ve video SDK'sını yerel platformda uygulayın ve ardından Flutter, MethodChannel aracılığıyla SDK tarafından sağlanan yöntemleri doğrudan çağırır.
Spesifik çözüm, mevcut Agora SDK'yı MethodChannel aracılığıyla doğrudan çağırmak ve farklı parametreler ve farklı yöntem adları gibi Flutter katmanındaki olası farklılıkları silmektir.
Bu yaklaşımın temel avantajı, bir köprünün kurulmasına benzer şekilde, mevcut SDK'nın büyük ölçüde yeniden kullanılabilmesidir.
2. Önce yerel platforma dayalı WebRTC standardını uygulayın, ardından Flutter katmanındaki MethodChannel aracılığıyla WebRTC arayüzünü çağırın ve ardından ses ve video SDK mantığını uygulayın.
Bu çözüm ilk olarak WebRTC standardını uygulamak için yerel platformu kullanır (önceki bölümde uygulanan getUserMedia bu standardın bir parçasıdır) ve ardından Flutter katmanında bir WebRTC Eklentisi olarak kaydolur. Bu Flutter WebRTC Eklentisine dayanarak, ses ağı ses ve video SDK'sına bakın ve Agora SD-RTN küresel sanal iletişim ağına bağlanın.
Önceki noktayla karşılaştırıldığında, bu çözüm, daha fazla Dart standart kitaplığı (matematik, io, dönüştürme vb.) Ve üçüncü taraf ekosistemleri ((flutter_webrtc gibi) gerektiren yepyeni bir Dart dili SDK'sı uygulamaya eşdeğerdir. Daha fazla platformu (Windows gibi) desteklerken, platform WebRTC standardını uyguladığı sürece doğrudan kullanılabilir.
WebRTC'ye aşina olan öğrenciler, tarayıcı WebRTC uygulamalarını uygularken bir Adaptör kavramı olduğunu bilebilirler.Amaç, birkaç ana akım tarayıcının WebRTC arayüzlerindeki küçük farklılıkları gizlemektir. Fikir bu çözüme benzer, ancak uyarlanmıştır. Platform Firefox / Chrome / Safari'den Windows / iOS / Android vb. Olarak değiştirildi.
Nihayetinde araştırma amacıyla, ama aynı zamanda Flutter'ın kod kümesine ve çok platformlu ortak fikirlerine (teoride, SDK iyi tasarlanmış bir istemci mantığı katmanıdır. WebRTC iyi desteklendiğinde, işin içeriği değişir). WebRTC standardında sesli ve görüntülü iletişim mantığını uygulamak için Dart dili nasıl kullanılır), bu çözümü benimsemeyi seçiyoruz, böylece okuyucular bu Flutter SDK'nın bir bütün olarak Shengwang Web platformunun ses ve video SDK'sına kavramsal olarak daha yakın olduğunu bulabilir. .
SDK yapısı
SDK'nın temel işlevleri kabaca ses ve video yakalama ve oynatma, Agora Ağ Geçidi ile P2P bağlantılarının kurulması ve yönetimi ve Ağ Geçidi ile mesaj alışverişi ve işlemeyi içerir.
Flutter topluluğu nispeten yeni olmasına rağmen, Dart'ın standart kitaplığı çok eksiksiz olarak kabul edilebilir ve halihazırda birçok mükemmel üçüncü taraf Eklenti vardır.
Kod aşağıdaki modüllere ayrılabilir:
Dart: io'daki Websocket ile ilgili yöntemlere dayalı olarak Gateway ile mesaj iletişimini gerçekleştirin (mesajları ve yanıtları yayınlama / abone olma gibi)
Açık kaynak topluluğuna dayalı flutter_webrtc projesi, ses ve video yakalama ve p2p bağlantısı gibi WebRTC ile ilgili işlevleri gerçekleştirir
EventEmitter SDK'nın gerektirdiği yardımcı sınıfları uygulamak için dart Stream nesnesine veya basit bir Map'e dayanır (tabii ki, değiştirmek için doğrudan Dart'ın Stream / Sink konseptini de kullanabilirsiniz).
Bu modüller tamamlandıktan sonra, Soundnet Web SDK'ya benzer İstemci ve Akış nesneleri bunların üzerine uygulanabilir.
Bunların arasında, video akışlarının oynatılmasının flutter_webrtc eklentisindeki RTCVideoView nesnesi yardımıyla gerçekleştirilebileceğini belirtmekte fayda var Spesifik ilkeleri anlamak isteyenler, Flutter dış dokusu (Doku) kavramlarını öğrenebilirler.
Bu noktada, SDK temel olarak oluşturulmuş, ardından UI katmanının geliştirilmesi.Flutter'ın bu kısmı büyük ölçüde React çerçevesinden esinlenmiştir.Çerçeveye aşina olan web geliştiricileri, bu SDK'ya dayalı olarak Android üzerinde çalışabilen bir sürümü kolayca uygulayabilirler. / iOS platformu video görüşmesi Uygulaması. Daha önce paylaştığımız demo, mevcut Shengwang Android / iOS / Web SDK ile başarılı bir şekilde birlikte çalışabilir ve ilgili kod yakın gelecekte açık kaynak olabilir.
sonuç olarak
Flutter topluluğu hala çok genç olmasına rağmen, birçok mükemmel üçüncü taraf eklentisi yavaş yavaş ortaya çıktı.Dart'ın nispeten kapsamlı standart kitaplığıyla birleştiğinde, bu tür bir ses ve video SDK'sı veya benzer işlevleri uygulamak, çok sayıda tekerleğin kendi başınıza yapılmasını gerektirmez. Ek olarak, Flutter'ın kendi ortamı oluşturmak / oluşturmak / hata ayıklamak için çok uygundur, bu nedenle tüm geliştirme sürecinde neredeyse hiç çukur yoktur.
Ayrıca, uygulama katmanının geliştirme sürecinde, stil, web geliştirme için React'i kullanmaya çok yakındır.Flutter'ın saniyenin altındaki Hot Reload ve diğer özellikleriyle birleştiğinde, yerel geliştirmeye kıyasla geliştirme deneyimi ve verimlilik açısından birçok avantaja sahiptir.
Yerel geliştirmeyle temasa geçmek isteyen web geliştiricileri için platformlar arası özelliklerin aşamalı olarak iyileştirilmesi (masaüstü tarafında flutter-desktop-gömme projesi ve tarayıcı tarafında uğultulu kuş projesi) ve Google'ın yeni işletim sistemi Fuchsia'nın olası gelişini göz önünde bulundurarak Flutter, daha yüksek geliştirme verimliliği ve daha iyi geliştirme deneyimi arayan yerel geliştiriciler için çok uygun bir giriş noktasıdır ve yeni yılda kendi teknoloji yığınlarına eklemeye değer.
[Ekli] İlgili çerçeve ve bilgiler
Bilgi koleksiyonu
Takip edin + özel mesajı ücretsiz olarak "Android bilgileri" yanıtlayın!
Önceki Android gelişmiş mimari malzemelerine, kaynak koduna, notlarına ve videolarına erişim sağlayın. Gelişmiş UI, performans optimizasyonu, mimarlık kursu, NDK, hibrit geliştirme (ReactNative + Weex) WeChat uygulaması, Flutter çok yönlü Android gelişmiş uygulama teknolojisi
