Flutter实时MJPEG流播放插件flutter_mjpeg的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter实时MJPEG流播放插件flutter_mjpeg的使用

flutter_mjpeg 是一个用于在Flutter应用中显示MJPEG流的插件。它完全由Dart实现,不需要任何原生代码的支持。

使用方法

要使用 flutter_mjpeg,你需要将 Mjpeg widget 添加到你的Flutter应用中,并指定MJPEG流的URL。

基本示例

Mjpeg(
  stream: 'http://192.168.1.24:8080/video.cgi',
)

API 参数说明

Mjpeg widget 支持以下参数:

参数 描述
stream MJPEG流的HTTP URL
isLive 是否持续加载流
timeout HTTP请求超时时间
width 强制设置宽度
height 强制设置高度
error 错误发生时使用的错误构建器
loading 第一帧到达前使用的加载构建器
fit 图像的 BoxFit
headers 发送HTTP请求时使用的头部信息
httpClient 自定义的HTTP客户端,默认为 Client()
preprocessor 对每一帧进行预处理的函数,默认为 MjpegPreprocessor()

完整示例 Demo

以下是一个完整的示例,展示了如何在Flutter应用中使用 flutter_mjpeg 来播放MJPEG流,并包含了一些额外的功能,如切换流的加载状态和导航到新页面。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_mjpeg/flutter_mjpeg.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final isRunning = useState(true);
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Mjpeg(
                isLive: isRunning.value,
                error: (context, error, stack) {
                  print(error);
                  print(stack);
                  return Text(error.toString(), style: TextStyle(color: Colors.red));
                },
                stream: 'http://uk.jokkmokk.jp/photo/nr4/latest.jpg', //'http://192.168.1.37:8081',
              ),
            ),
          ),
          Row(
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  isRunning.value = !isRunning.value;
                },
                child: Text('Toggle'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => Scaffold(
                      appBar: AppBar(),
                    ),
                  ));
                },
                child: Text('Push new route'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

这个示例展示了如何使用 Mjpeg widget 播放MJPEG流,并提供了按钮来切换流的加载状态以及导航到一个新的页面。你可以根据需要修改 stream 参数中的URL来播放不同的MJPEG流。


更多关于Flutter实时MJPEG流播放插件flutter_mjpeg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter实时MJPEG流播放插件flutter_mjpeg的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用flutter_mjpeg插件在Flutter应用中实时播放MJPEG流的示例代码。这个插件允许你从MJPEG流URL中获取视频帧并显示在Flutter应用中。

首先,确保你的Flutter项目已经添加了flutter_mjpeg依赖。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_mjpeg: ^0.4.0  # 请注意版本号,根据最新版本调整

然后运行flutter pub get来安装依赖。

接下来,创建一个简单的Flutter应用来展示MJPEG流。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:flutter_mjpeg/flutter_mjpeg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MJPEG Stream',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MjpegScreen(),
    );
  }
}

class MjpegScreen extends StatefulWidget {
  @override
  _MjpegScreenState createState() => _MjpegScreenState();
}

class _MjpegScreenState extends State<MjpegScreen> {
  final String mjpegUrl = 'http://your-mjpeg-stream-url';  // 替换为你的MJPEG流URL
  MjpegController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = MjpegController(mjpegUrl);
    _controller!.startListening();
  }

  @override
  void dispose() {
    _controller?.stopListening();
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MJPEG Stream'),
      ),
      body: Center(
        child: _controller != null && _controller!.value.isInitialized
            ? MjpegImage(controller: _controller!)
            : CircularProgressIndicator(),
      ),
    );
  }
}

在这个示例中:

  1. MyApp 类是应用的入口点,它设置了一个基本的Material应用。
  2. MjpegScreen 类是一个有状态的Widget,它持有MJPEG控制器的实例。
  3. _MjpegScreenState 类在initState方法中初始化了MjpegController并开始监听MJPEG流。在dispose方法中,它停止监听并释放资源。
  4. build方法中,它检查控制器是否已初始化,如果已初始化,则显示MJPEG图像;否则显示一个加载指示器。

确保将mjpegUrl替换为你实际的MJPEG流URL。

这个示例展示了如何使用flutter_mjpeg插件在Flutter应用中实时播放MJPEG流。你可以根据需要进一步自定义和扩展这个示例。

回到顶部