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))),
    );
  }
}
相关推荐
九丝城主11 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克16 小时前
七、性能优化
flutter·性能优化
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克1 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter