fijkplayer flutter 直播流播放

fijkplayer flutter 直播流播放

fijkplayer 是 ijkplayer 的 Flutter 封装, 是一款支持 android 和 iOS 的 Flutter 媒体播放器插件, 由 ijkplayer 底层驱动。

通过纹理(Texture)接入播放器视频渲染到 Flutter 中。

前言

目前使用的服务端是 srs_stack

我的本地环境

✓\] Flutter (Channel stable, 3.13.1, on macOS 13.6.1 22G313 darwin-x64, locale zh-Hans-CN) • Flutter version 3.13.1 on channel stable at /Users/wangq/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision e1e47221e8 (4 months ago), 2023-08-22 21:43:18 -0700 • Engine revision b20183e040 • Dart version 3.1.0 • DevTools version 2.25.0 • Pub download mirror https://pub.flutter-io.cn • Flutter download mirror https://storage.flutter-io.cn

加入依赖

pubspec.yaml中加入依赖 -> 官方地址

xml 复制代码
fijkplayer: ^0.11.0

配置(解决延迟)

连上视频流可能会发现有差不多10秒的播放延迟, 以下是有一些调整参数可以试下调整

我测试配置了analyzeduration: 1)后延迟就有很大改善(大概1秒多rtmp方案)

如果需要做到1秒内的延迟可能得用srt协议

注意:需要做到1秒内,录制端,传输和播放端均需要做好优化

dart 复制代码
    player.setOption(FijkOption.playerCategory, "fflags", 'nobuffer');
    player.setOption(FijkOption.playerCategory, "fast", 1);
    player.setOption(FijkOption.playerCategory, "framedrop", 5);
    player.setOption(FijkOption.playerCategory, "start-on-prepared", 1);
    player.setOption(FijkOption.formatCategory, "max-buffer-size", 0);
    player.setOption(FijkOption.playerCategory, "packet-buffering", 0);

    player.setOption(FijkOption.formatCategory, "analyzeduration", 1);
    player.setOption(FijkOption.formatCategory, "analyzemaxduration", 100);

    player.setOption(FijkOption.formatCategory, "rtsp_transport", 'tcp');
    player.setOption(FijkOption.formatCategory, "probesize", 100);
    player.setOption(FijkOption.formatCategory, "flush_packets", 0);
    player.setOption(FijkOption.playerCategory, "reconnect", 5);

测试源码

官方的demo 可能是基于久版本的flutter的,我无法直接用, 遇到有问题的可以用以下源码测试

dart 复制代码
import 'package:fijkplayer/fijkplayer.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(VideoScreen(url: 'rtmp://192.168.31.91/live/test110'));
  // runApp(VideoScreen(url: 'http://192.168.31.91:2022/live/test110.flv'));
  // runApp(VideoScreen(url: 'http://192.168.31.91:2022/live/livestream-trans.flv'));
}

class VideoScreen extends StatefulWidget {
  final String url;

  VideoScreen({required this.url});

  @override
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  final FijkPlayer player = FijkPlayer();

  _VideoScreenState();

  @override
  void initState() {
    super.initState();
    player.setDataSource(widget.url, autoPlay: true);

    // 解决播放延迟
    // player.setOption(FijkOption.playerCategory, "fflags", 'nobuffer');
    // player.setOption(FijkOption.playerCategory, "fast", 1);
    player.setOption(FijkOption.playerCategory, "framedrop", 1);
    // player.setOption(FijkOption.playerCategory, "framedrop", 5);
    // player.setOption(FijkOption.playerCategory, "start-on-prepared", 1);
    // player.setOption(FijkOption.formatCategory, "max-buffer-size", 0);
    // player.setOption(FijkOption.playerCategory, "packet-buffering", 0);

    player.setOption(FijkOption.formatCategory, "analyzeduration", 1);
    // player.setOption(FijkOption.formatCategory, "analyzemaxduration", 100);

    // player.setOption(FijkOption.formatCategory, "rtsp_transport", 'tcp');
    // player.setOption(FijkOption.formatCategory, "probesize", 100);
    // player.setOption(FijkOption.formatCategory, "flush_packets", 0);
    // player.setOption(FijkOption.playerCategory, "reconnect", 5);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.red,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('测试视频流播放'),
        ),
        body: Builder(
          builder: (context) {
            return Column(children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(
                    onPressed: () {
                      // player.dispose();
                      player.reset();
                      player.setDataSource(widget.url, autoPlay: true);
                      // player.start();
                    },
                    icon: Icon(Icons.not_started),
                    color: Colors.green,
                  ),
                  IconButton(
                    onPressed: () {
                      player.stop();
                    },
                    icon: Icon(Icons.stop),
                    color: Colors.red,
                  ),
                  IconButton(
                    onPressed: () {
                      var playable = player.isPlayable();
                      print('playable: ${playable}');
                      showSnackBar('playable: ${playable}', context: context);
                    },
                    icon: Icon(Icons.safety_check),
                    color: Colors.blueAccent,
                  ),
                ],
              ),
              FijkView(
                player: player,
                width: 400,
                height: 300,
              ),
            ]);
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    player.release();
  }

  void showSnackBar(String text, {required BuildContext context}) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(text, style: const TextStyle(fontSize: 12))),
    );
  }
}
相关推荐
小红星闪啊闪15 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z16 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z16 小时前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭21 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo030519871 天前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_1 天前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜1 天前
Flutter SystemChrome 完整指南
flutter
葱段1 天前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart
2501_919749031 天前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
浮生若茶80881 天前
Flutter环境搭建全攻略之-Macos环境搭建
flutter·macos