Flutter视频播放插件flutterpi_gstreamer_video_player的使用

flutterpi_gstreamer_video_player

一个基于 flutter-pi 的视频播放器实现。

注意：此插件仅在安装了 flutter-pi 和 gstreamer 的 Raspberry Pi 上有效，其他平台即使 pub.dev 包的标签可能看起来支持，但实际上并不支持。

示例用法

要在您的应用中使用此插件，需要在 main 函数中执行 FlutterpiVideoPlayer.registerWith()，并在调用 runApp 之前完成注册。理想情况下，您只会在确定平台代码存在时执行此操作。

示例代码：

void main() {
    // 注册插件
    FlutterpiVideoPlayer.registerWith();
    // 启动应用
    runApp(MyApp());
}

然后您可以像使用官方的 video_player 插件一样使用其小部件和类。如果需要更高级别的播放功能，可以考虑使用 chewie。

高级功能

除了官方 video_player 插件提供的功能外，此视频播放器实现还有一些额外的功能，可能对您感兴趣。这些高级功能也在示例中有所体现。

1. 播放原始 GStreamer 管道

您可以使用原始的 GStreamer 管道创建一个 VideoPlayerController，例如：

[@override](/user/override)
void initState() {
    _controller = FlutterpiVideoPlayerController.withGstreamerPipeline(
        'libcamerasrc ! queue ! appsink name="sink"'
    );
    super.initState();
}

在这个例子中，视频播放器会通过 libcamera 显示摄像头预览。

2. 单帧步进

您可以逐帧播放视频。当调用 stepForward 或 stepBackward 时，视频播放将暂停。要继续播放，需要再次调用 _controller.play()。

示例代码：

late VideoPlayerController _controller;

[@override](/user/override)
void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    );
    super.initState();
}

void stepForward() {
    _controller.stepForward(); // 向前跳一帧
}

void stepBackward() {
    _controller.stepBackward(); // 向后退一帧
}

3. 快速定位

您可以快速定位到最近的关键帧，而不是精确的时间位置，这样可以显著提高定位速度。

示例代码：

late VideoPlayerController _controller;

[@override](/user/override)
void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
    );
    super.initState();
}

void doFastSeek() {
    _controller.fastSeek(Duration(seconds: 5)); // 快速定位到第5秒
}

完整示例代码

以下是完整的示例代码，展示了如何使用 flutterpi_gstreamer_video_player 插件。

示例代码：

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player/video_player.dart';
import 'package:flutterpi_gstreamer_video_player/flutterpi_gstreamer_video_player.dart';

void main() {
  // 注册插件
  FlutterpiVideoPlayer.registerWith();
  runApp(const _VideoApp());
}

class ExampleVideoPage extends StatefulWidget {
  const ExampleVideoPage({super.key});

  [@override](/user/override)
  State<ExampleVideoPage> createState() => _ExampleVideoPageState();
}

class _ExampleVideoPageState extends State<ExampleVideoPage> {
  late VideoPlayerController _controller;
  late ChewieController _chewieController;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 使用网络视频
    _controller = VideoPlayerController.networkUrl(
      Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
    );

    _chewieController = ChewieController(
      videoPlayerController: _controller,
      autoInitialize: true,
      autoPlay: true,
      looping: true,
      additionalOptions: (context) {
        return [
          // 添加单帧前进按钮
          OptionItem(
            onTap: () {
              _controller.stepForward();
            },
            iconData: Icons.arrow_right,
            title: 'Step Forward',
          ),
          // 添加单帧后退按钮
          OptionItem(
            onTap: () {
              _controller.stepBackward();
            },
            iconData: Icons.arrow_left,
            title: 'Step Backward',
          ),
          // 添加快速定位按钮
          OptionItem(
            onTap: () {},
            iconData: Icons.fast_forward_outlined,
            title: 'Fast Seek',
          ),
        ];
      },
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Chewie(controller: _chewieController);
  }
}

class CameraViewPage extends StatefulWidget {
  const CameraViewPage({super.key});

  [@override](/user/override)
  State<CameraViewPage> createState() => _CameraViewPageState();
}

class _CameraViewPageState extends State<CameraViewPage> {
  late VideoPlayerController _controller;
  late ChewieController _chewieController;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 使用 GStreamer 管道播放摄像头预览
    _controller = FlutterpiVideoPlayerController.withGstreamerPipeline(
      'libcamerasrc ! queue ! appsink name="sink"',
    );

    _chewieController = ChewieController(
      videoPlayerController: _controller,
      autoInitialize: true,
      autoPlay: true,
      looping: true,
      isLive: true,
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _controller.dispose();
    _chewieController.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Chewie(controller: _chewieController);
  }
}

class _VideoApp extends StatefulWidget {
  const _VideoApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<_VideoApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            leading: BackButton(
              onPressed: () {
                SystemNavigator.pop();
              },
            ),
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Example Video'),
                Tab(text: 'Camera'),
              ],
            ),
          ),
          body: const TabBarView(
            children: [
              ExampleVideoPage(),
              CameraViewPage(),
            ],
          ),
        ),
      ),
    );
  }
}