# Flutter 中使用 rtsp 協議 在 Flutter 中可以集成 VLC 播放器通過 rtsp 協議連接到監控相機來實現遠程監控，當然也可以用來做直播 APP。 ## 使用 flutter_vlc_player 庫 擴展包地址[點我跳轉](https://pub.dev/packages/ ...
Flutter 中使用 rtsp 協議
在 Flutter 中可以集成 VLC 播放器通過 rtsp 協議連接到監控相機來實現遠程監控，當然也可以用來做直播 APP。
使用 flutter_vlc_player 庫
擴展包地址點我跳轉。
首先在 pubspec.yaml 中添加庫引用：
dependencies:
flutter_vlc_player: ^7.2.0
安卓端配置
- 在
android/app/src/main/AndroidManifest.xml中添加網路使用許可權
<uses-permission android:name="android.permission.INTERNET" />
- 如果 rtsp 為非加密連接，則需要加上明文網路使用許可權
android:usesClearTextTraffic="true"
- 在
android/app/build.gradle中加入以下配置：
android {
packagingOptions {
// Fixes duplicate libraries build issue,
// when your project uses more than one plugin that depend on C++ libs.
pickFirst 'lib/**/libc++_shared.so'
}
buildTypes {
release {
minifyEnabled true
useProguard true
proguardFiles getDefaultProguardFile(
'proguard-android-optimize.txt'),
'proguard-rules.pro'
}
}
}
請註意，如果您的 gradle 版本較新，那麼 useProguard 已經不再使用，請刪除這一行。
- 在
android/app目錄內新建一個proguard-rules.pro文件，內容為
-keep class org.videolan.libvlc.** { *; }
- 調整
android/app/build.gradle中的 minSdkVersion。
defaultConfig {
minSdkVersion 27 //20以上
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
使用 flutter_vlc_player 庫
import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';
class VLCTest extends StatefulWidget {
const VLCTest({super.key});
@override
State<VLCTest> createState() => _VLCTestState();
}
class _VLCTestState extends State<VLCTest> {
late VlcPlayerController _vlcPlayerController;
String host = "rtsp://192.168.2.22:8554/mystream";
@override
void initState() {
super.initState();
_vlcPlayerController = VlcPlayerController.network(
host,
hwAcc: HwAcc.full,
autoPlay: true);
}
@override
void dispose() async {
// TODO: implement dispose
super.dispose();
await _vlcPlayerController.stopRendererScanning();
await _vlcPlayerController.dispose();
}
@override
Widget build(BuildContext context) {
return FractionallySizedBox(
widthFactor: 1,
heightFactor: 1,
child: Center(
child: VlcPlayer(controller: _vlcPlayerController, aspectRatio: 16 / 9),
),
);
}
}
本地測試
下麵就是本地測試環節，需要在本地建立 rtsp 伺服器並推流，在 flutter 程式中連接並拉取。
使用 OBS+OBS-RTSPServer 插件搭建 rtsp 伺服器並將桌面推流
目前（截止 2023 年 7 月）OBS-RTSPServer 插件最新 release 版本為 3.0，支持的最新 OBS 版本為 28，
在OSB下載 28.x 版本安裝 OBS 本體。
然後在obs-rtspserver v3.0.0下載 3.0.0 版本插件安裝
全部安裝完成後，在 OBS 中新建場景-桌面。
在工具-RTSP 伺服器中設置“目標”中的 URL 為rtsp://localhost:8554/mystream，然後打開伺服器即可。
註意，不需要設置 OBS 的推流功能，現在就已經在 rtsp 伺服器中推流了。
使用 flutter 進行測試
將 flutter 代碼中的 host 地址改為rtsp://localhost:8554/mystream,打開這個界面稍等一會兒就會自動播放。
如果 flutter 中無法播放，請下載一個 VLC 播放器或 potplayer 播放上述地址進行測試。
延遲優化
經過上述步驟的測試，我們發現有延遲問題，推流端的延遲我們無法保證，因為往往推流的是監控設備。
於是我們先優化拉取的延遲問題。
我們可以將 VLC 的拉流緩存時長調低就可以極大緩解延遲問題。
_vlcPlayerController = VlcPlayerController.network(
host,
hwAcc: HwAcc.full,
autoPlay: true,
options: VlcPlayerOptions(
advanced: VlcAdvancedOptions([
VlcAdvancedOptions.liveCaching(100),
VlcAdvancedOptions.networkCaching(100)
])));
當然如果您有更好的優化方案，煩請告知，感謝！
打包壓縮
通過flutter build apk後，我們發現安裝包竟增加了 100+MB！這是不可接收的！
使用flutter build apk --analyze-size 分析我們發現在打包過程中 flutter 自動將所有 abi 打包進了 APK 包里。
於是我們可以用flutter build apk --release --split-per-abi --target-platform android-arm,android-arm64來指定目標平臺。
針對打包後體積過大的問題，有人如下說道
VLC uses lots of native code. As a result, it has 18-30MB of native libraries per CPU architecture. While that will be compressed somewhat in the APK, a 57MB increase in APK is actually better than I would expect.
You either need to:
Live with it, or
Use splits or product flavors to indicate which subset of CPU architectures you are willing to support (the library itself supports arm64-v8a, armeabi-v7a, mips, x86, and x86_64), or
Do not use VLC
