参考文档：跟我一步一步实现 Flutter 视频播放插件 (一) - 简书
以Android TextureView（查看海康监控视频）为例（Android Studio版本4.0.1，flutter版本51.0.1，Dart版本193.7543）：
1、首先是生成一个插件：
flutter create --org com.example.test --template=plugin cctv_plugin
在Android studio中右键点击项目根目录，选择flutter，选择Open Android module in Android Studio
2、生成CctvView类：
在cctvplugin的插件android/src/main/java/com.example/cctvplugin下生成CctvView类，实现PlatformView和MethodChannel.MethodCallHandler
在cctvplugin/android/libs中集成海康sdk，
在cctvplugin/android目录下的build.gradle文件中依赖海康sdk
在刚才声明的CctvView类中，声明变量：TextureView、MethodChannel、HikVideoPlayer等。
在该类中重写的方法getView()中返回声明的控件textureView
和dispose()中执行mPlayer.stopPlay()方法
生成CctvView构造方法，分别实现各声明参数的实例或初始化
要注意MethodChannel实例时的name，其中textureView实例化的方法getTextureView如下
在重写的方法onMethodCall中实现和flutter进行交互的相关方法代码，loadUrl（展示视频），stop（停止视频播放），用Handler来做结果区分和返回：
其中startRealPlay和getLastError方法分别是海康视频相关代码，这里就不贴出或者截图展示了。到这里CctvView代码就完成了。
3、生成CctvViewFactory类：
继承PlatformViewFactory，声明BinaryMessenger，创建BinaryMessenger参数的构造方法
要注意super(StandardMessageCodec.INSTANCE);这行代码不能省略。
在重写的create方法中return 出来CctvView
4、生成CctvpluginPlugin类，实现FlutterPlugin，MethodCallHandler
依然声明MethodChannel参数，在重写方法onAttachedToEngine中实例MethodChannel，并注册CctvViewFactory
channel =new MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "cctvplugin");
channel.setMethodCallHandler(this);
flutterPluginBinding.getPlatformViewRegistry().registerViewFactory("plugins.cctv_plugin/view", new CctvViewFactory(flutterPluginBinding.getBinaryMessenger()));
其中，MethodChannel的入参BinaryMessenger通过flutterPluginBinding.getFlutterEngine().getDartExecutor()来获取，PlatformViewRegistry由flutterPluginBinding.getPlatformViewRegistry()来获取，CctvViewFactory中的BinaryMessenger由flutterPluginBinding.getBinaryMessenger()来获取。
在重写onMethodCall方法中做了一次海康sdk的初始化
5、生成cctvplugin.dart类（flutter）
在插件android同目录下的lib文件夹下创建cctvplugin.dart
首先声明MethodChannel，其中的name参数要和第4步CctvpluginPlugin中的name保持一致
static const MethodChannel_channel =const MethodChannel('cctvplugin');
初始化海康sdk的代码
static Futureget initHikSdk async {
final bool isInit =await _channel.invokeMethod("initHikSdk");
return isInit;
}
同代码文件中，生成BmsVideoPlayerController类
其中init中的方法name要和第2步中的name保持一致，loadUrl和stop也和第2步中的onMethodCall保持一致。
剩余的代码按照跟我一步一步实现 Flutter 视频播放插件 (一) - 简书来编写即可。也可根据自己的需求和需要进行相应的修改。至此，该插件就开发完成了。
6、运行demo
编写cctv_plugin插件example/lib下的main.dart文件
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:cctvplugin/cctvplugin.dart';
void main() {
runApp(MyApp());
}
class MyAppextends StatefulWidget {
@override
_MyAppStatecreateState() =>_MyAppState();
}
class _MyAppStateextends State {
var viewPlayerController;
@override
void initState() {
super.initState();
initHikSdk();
}
void initHikSdk()async {
Future isInit = Cctvplugin.initHikSdk;
isInit.then((value) {
if (value) {
print("初始化成功");
}else {
print("初始化失败");
}
});
}
@override
Widgetbuild(BuildContext context) {
var x =0.0;
var y =0.0;
var width =400.0;
var height = width *9.0 /16.0;
BmsVideoPlayer videoPlayer =new BmsVideoPlayer(
onCreated: onViewPlayerCreated,
x: x,
y: y,
width: width,
height: height);
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:const Text('Plugin example app'),),
body:Container(child: videoPlayer, width: width, height: height)),
);
}
void onViewPlayerCreated(viewPlayerController)async{
this.viewPlayerController = viewPlayerController;
var result=await this.viewPlayerController.loadUrl("rtsp://112.17.101.77:554/openUrl/OgIeypq");
print("result$result");
}
}
7、把插件引入到项目中使用
添加如下代码
至此，就可以在flutter项目中使用cctvplugin插件了，使用方法和example/lib下的main.dart一致。
网友评论