February 7th, 2023

用 .NET 启动你的 DJI Ryze Tello 无人机

kinfeylo
Regional Cloud Advocate

大疆的 DJI Ryze Tello 是入门级的无人机,不仅在 STEM 教育中有非常广泛的应用,也可以作为编程入门的首选。 通过 UDP 协议调用 DJI Ryze Tello SDK 可以让 DJI Ryze Tello 无人机执行起飞,降落,转向以及不同的花式动作。 本文将会通过 .NET 创建应用来控制 DJI Ryze Tello。

.NET UDP 编程

什么是 UDP

“UDP(用户数据报协议)是一个与IP 协议一起使用的长期协议,用于在传输速度和效率比安全性和可靠性更重要的场合下发送数据。 UDP 使用一个简单的、具有最小协议机制的无连接通信模型。 UDP 使用校验和保证数据完整性,使用端口号以区分数据发送方和接收方中不同的应用程序。它无需握手会话,即将不可靠的底层网络直接暴露给了用户的应用程序:不保证消息交付、不保证交付顺序也不保证消息不重复。如果需要网络接口层面的纠错功能,则应用程序可以使用为此目的设计的传输控制协议(TCP)或者流控制传输协议(SCTP)。”

在现场实时测控领域,如果有实时、抗干扰性、安全性等要求,都可以采用 UDP 传输数据。我想这也是 DJI Ryze Tello 为何使用 UDP 协议通信的原因。

C# 调用 UDP Client

在 System.Net.Sockets 下你可以通过类 UdpClient 来完成 UDP 协议的相关调用。 这是官方给我们的例子

UdpClient 类提供了在阻塞同步模式下发送和接收无连接 UDP 数据报的简单方法。 因为 UDP 是一种无连接的传输协议,所以在发送和接收数据之前不需要建立远程主机连接。 但是,您确实可以选择通过以下两种方式之一建立默认远程主机:

使用远程主机名和端口号作为参数创建 UdpClient 类的实例

创建 UdpClient 类的实例,然后调用 Connect 方法

您可以使用 UdpClient 中提供的任何发送方法将数据发送到远程设备。 使用 Receive 方法从远程主机接收数据。

用 .NET Polyglot Notebook 连接 DJI Ryze Tello

通过 Polyglot Notebook 可以完成 .NET 的交互式编程。在用 .NET 封装 DJI Ryze Tello SDK 之前我们可以用 Notebooks 连接 DJI Ryze Tello 做相关原型测试。

要连通 DJI Ryze Tello SDK ,需要通过 UDP 连通 192.168.10.1 以及端口 11111.

通过 C# 调用 UDPClient 连接的方式如下

string telloIP = "192.168.10.1";

int telloPort = 8889;

UdpClient udpClient = new UdpClient();

udpClient.Connect(telloIP,telloPort);

并封装好指令执行的方法

public  void Command(UdpClient udpClient,string cmd)
{

    Byte[] sendCmdBytes = null;
            
    sendCmdBytes = Encoding.UTF8.GetBytes(cmd);
      
    udpClient.Send(sendCmdBytes, sendCmdBytes.Length);
}

完成上面的设置,你就可以执行对应的指令完成控制 DJI Ryze Tello 的操作

Command(udpClient,"command");

Command(udpClient,"takeoff");

Command(udpClient,"land");

结合 .NET Polyglot Notebook 就可以完成对 DJI Ryze Tello 的操作以及相关技术测试。 以下视频是 Notebooks 控制 DJI Ryze Tello  的具体效果

用 .NET MAUI 构建 DJI Ryze Tello 应用

.NET MAUI 是跨平台,跨设备的前端应用技术,开发团队使用一种编程语言 C# 就可以完成 iOS / Android / macOS / Windows 的应用开发。现在是多终端的年代,通过不同设备控制你手上的 DJI Ryze Tello , 搭建多应用场景是非常棒的。本系列主要通过 iOS 和 Android 移动设备控制 DJI Ryze Tello, 以下是一些关键步骤

通过 .NET Comet 构建前端 UI

Comet 是一种编写跨平台 UI 的现代方式 ( https://github.com/dotnet/Comet )。 基于 .NET MAUI,它采用 Model – Views – Update (MVU) 模式. 和传统的 XAML 相比 , 它有几个显著的特点

  1. 基于函数式编程

  2. Comet 参考了 SwiftUI 和 Flutter 描述界面的方式,更容易去编写页面层次逻辑,如:

Image 03

  1. 用 Comet 开发 .NET MAUI 应用不仅可以在 Visual Studio 上开发 ,也可以在 Visual Studio Code 上开发。

    注意:如果需要在 Visual Studio Code 调试 .NET MAUI 应用,请安装 C# 和 .NET Comet 组件

绑定 iOS/Android 原生库的技巧

一个好的应用需要整合非常多的场景,如支付,电商,地图等,作为开发团队不需要重复造车,直接可以调用不同的 SDK 来完成相关的操作。 .NET MAUI 解决了跨平台应用界面和绝大多数页面逻辑以及业务逻辑的问题。但当我们使用第三方 SDK 时你会发现缺少相关 .NET MAUI 的原生库,通过 Binding 可以让 .NET MAUI 绑定 iOS / Android 的原生库。

从 DJI Ryze Tello SDK 文档可知通过 UDP 可以控制 DJI Ryze Tello , 也可以通过 UDP 实时图传 DJI Ryze Tello 的摄像头信号。这个时候我们需要通过 libVLC 库对 DJI Ryze Tello 摄像头提供的 UDP 信号进行 H264 编码解码的服务并显示在移动应用的界面上。

在 .NET MAUI 上,我一般通过命令行创建 iOS / Android 原生绑定项目,如下

dotnet new iosbinding -o VLCSharp.iOS 

dotnet new android-bindinglib -o VLCSharp.Droid

iOS 绑定 libVLC 库相关技巧

  1. 用 Sharpie 做初次转换

我们通过安装 Sharpie 针对 iOS 的 libVLC 库 MobileVLCKit.framework 进行绑定,通过执行以下命令可以快速转换 libVLC 的库

sharpie bind -framework ./MobileVLCKit.framework --namespace MobileVLCKit -sdk iphoneos16.1

注意: iOS 原生库对应的 iOS 版本,否则你是没办法进行转换

转换后替换项目中的 StructsAndEnums.cs 和 ApiDefinitions.cs 以及把 MobileVLCKit.framework 添加到 iOS 绑定的项目 VLCSharp.iOS 中

  1. 修改 csproj 文件,把原生库依赖的库都需要添加进去

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net7.0-ios</TargetFramework>
    <RootNamespace>MobileVLCKit</RootNamespace>
    <Nullable>enable</Nullable>
    <ImplicitUsings>true</ImplicitUsings>
    <IsBindingProject>true</IsBindingProject>
	<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
	<NoBindingEmbedding>false</NoBindingEmbedding>
  </PropertyGroup>

  <ItemGroup>
    <ObjcBindingApiDefinition Include="ApiDefinition.cs" />
    <ObjcBindingCoreSource Include="StructsAndEnums.cs" />
  </ItemGroup>

  <ItemGroup>
    <NativeReference Include="MobileVLCKit.framework">
      <Kind>Framework</Kind>
      <IsCxx>True</IsCxx>
      <ForceLoad>True</ForceLoad>
      <SmartLink>True</SmartLink>
      <Frameworks>MediaPlayer Accelerate AssetsLibrary AVFoundation CoreMedia AudioToolbox CoreData CoreMedia CoreSpotlight MobileCoreServices CoreAudio OpenGLES CFNetwork CoreText QuartzCore CoreGraphics UIKit Security StoreKit SystemConfiguration VideoToolbox</Frameworks>
      <LinkerFlags>-lbz2 -liconv -lstdc++</LinkerFlags>
    </NativeReference>
  </ItemGroup>
</Project>
  1. 首次编译,会出错,请从 GitHub https://github.com/kinfey/dotNETMauiHOL/tree/main/code/apps/02.Binding/TelloApp.Bindings/VLCSharp.iOS 下载并替换 StructsAndEnums.cs 和 ApiDefinitions.cs

替换后编译就成功了

如果希望了解更多 iOS Binding 的知识和相关技巧,你可以通过该连接了解 https://github.com/kinfey/AMapMAUIControls/blob/main/tutorial/cn/01.iOSBinding.md

Android 绑定 libVLC 库相关技巧

  1. 创建 Jars 文件夹,把 Android 的 libVLC 的库 org.videolan.libvlc.aar 添加到绑定的项目 Jars 文件夹中

  2. 修改 .csproj 文件

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net7.0-android</TargetFramework>
    <SupportedOSPlatformVersion>21</SupportedOSPlatformVersion>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <LibraryProjectZip Include="Jars\org.videolan.libvlc.aar" />
  </ItemGroup>

  <ItemGroup>
    <TransformFile Include="Transforms\Metadata.xml" />
    <TransformFile Include="Transforms\EnumFields.xml" />
    <TransformFile Include="Transforms\EnumMethods.xml" />
  </ItemGroup>
</Project>
  1. 编译,和 iOS 一样编译出错,请从 GitHub https://github.com/kinfey/dotNETMauiHOL/tree/main/code/apps/02.Binding/TelloApp.Bindings/VLCSharp.Droid 下载并替换 EnumMethods.xml

替换后,编译成功了

如果希望了解更多 Android Binding 的知识和相关技巧,你可以通过该连接了解 https://github.com/kinfey/AMapMAUIControls/blob/main/tutorial/cn/02.DroidBinding.md

自定义界面控件

.NET MAUI 可以通过 Handler 构建自定义界面控件,我们通过 Handler 绑定 LibVLC 实现图传,而且和一般自定义页面控件不同虽然用的都是 libVLC 库,但在不同平台上调用方式以及构建方式是不同的,所以在 Platforms 上需要针对不同的控件来完成定义,分别定义 iOS 文件夹新增 VideoPlayerView.ios.cs , Android 文件夹新增 VideoPlayerView.android.cs

Image 04

之后再通过继承 Handler 的类分别调用来完成自定义 VLC 控件的定义

Image 05

我们可以无缝把自定义的 VLC 控件添加到我们的应用中,和 Commet UI 是无缝对接的

new VStack
{
    new VlcUI().Padding(20).Alignment(Alignment.TopLeading)
}.Frame(width:400,height:300).Alignment(Alignment.Center),

我们可以看看那安卓上的实现效果,通过图传可以实时在应用端获取 DJI Ryze Tello 的摄像头信号

Image 06

当我们完成页面逻辑和业务逻辑构建后,我们就可以用 .NET MAUI 构建的 iOS / Android 应用快速启动 DJI Ryze Tello ,下图是在 iPhone 控制 DJI Ryze Tello 起降的效果,以及实时图传

小结

这就是通过 .NET 控制 DJI Ryze Tello 的主要步骤,如果大家希望了解更多细节和更详细内容,请访问 https://github.com/kinfey/dotNETMauiHOL , 这里面包括了完整的学习内容,还有具体细节,希望各位能更好地掌握用 .NET MAUI 跨平台应用的技巧,做更多有趣的应用。

学习主题 相关内容 点击进入
开发环境配置 开发环境搭建技巧,包括 .NET MAUI 环境的安装 ,开发工具的配置以及基于 iOS / Android 应用开发要准备的条件 点击进入
C# UDP 编程基础 学习 C# UDP 编程 ,以及通过 Notebooks 连接 DJI Ryze Tello ,完成原型开发的搭建 点击进入
.NET MAUI 基础学习 学习 .NET MAUI 的相关知识,包括 iOS / Android 开发的相关知识 点击进入
.NET MAUI Comet UI 构建应用界面 学习 .NET MAUI Comet 的相关知识 , 使用 .NET MAUI Comet 构建应用界面 点击进入
.NET MAUI 绑定移动应用的原生库 学习把移动应用原生库迁移到 .NET MAUI 点击进入
.NET MAUI 构建一个完整的项目技巧 用 .NET MAUI 构建一个完整项目的技巧,包括不同平台的设定以及自定义控件等知识 点击进入

相关资源

  1. 用 .NET MAUI 构建 DJI Ryze Tello 无人机应用系列 https://github.com/kinfey/dotNETMauiHOL

  2. 学习 .NET MAUI https://aka.ms/mauiBlog.Learn

  3. 关于 .NET Polyglot Notebook https://aka.ms/mauiBlog.Notebook

  4. .NET MAUI 绑定 iOS 原生库 https://aka.ms/mauiBlog.iOSBinding

  5. .NET MAUI 绑定 Android 原生库 https://aka.ms/mauiBlog.DroidBinding

  6. .NET MAUI 自定义页面控件 https://aka.ms/mauiBlog.CustomUI

  7. C# 调用 UDP https://aka.ms/mauiBlog.UDP

Author

kinfeylo
Regional Cloud Advocate

1 comment