Usos del decodificador de video Flutter fijkplayer

Cuando estaba trabajando en un proyecto de videovigilancia, necesitaba mostrar el flujo de video al cliente. Al principio, usé el VideoPlayer que viene con flutter para reproducir el video de vigilancia. No encontré ningún problema al principio, porque el emulador de Android se usó principalmente y la iso nunca se usó. Ya sea que el simulador o el dispositivo real puedan reproducir la prueba, hasta que el desarrollo se acerque al final, el problema se encuentra al probar en el simulador de ios. Cuando la transmisión de video es H264, se puede reproducir normalmente, pero cuando la transmisión de video es H265, sigue girando . El simulador y el dispositivo real no se pueden reproducir (se pueden reproducir tanto el emulador de Android como el dispositivo real). Más tarde, planeé cambiar a un complemento de terceros para ajustar la reproducción.

Importe el complemento fijkplayer al que se hace referencia en pubspec.yaml
```
 # 视频解码器 软解码
  fijkplayer: ^0.10.1
```

Estado detallado

nombre del Estado	rendimiento del jugador
inactivo	Estado inactivo, el FijkPlayer que acaba de completar su construcción se encuentra en este estado. En este estado, el reproductor ocupa una pequeña cantidad de memoria y no se inician subprocesos adicionales. El estado inactivo solo se puede convertir al estado inicializado a través de setDataSource
inicializado	En comparación con el estado inactivo, el estado de finalización de la inicialización solo tiene más información sobre la fuente de datos del medio de entrada. Tampoco se abren hilos adicionales.
asyncPreparando	Estado de preparación asíncrono, llame a prepareAsync en el estado inicializado para alcanzar este estado. Este no es un estado estable, este estado espera a que se complete una tarea específica y automáticamente pasa al estado preparado. El principal trabajo de preparación en este estado es detectar el tipo de archivo multimedia, abrir el archivo multimedia, abrir el decodificador y crear un nuevo hilo de decodificación, crear un nuevo hilo de lectura de datos, abrir el dispositivo de salida de audio, crear un nuevo hilo de salida de video , etc.
preparado	asyncPreparing cambia automáticamente a este estado después de completar la tarea especificada. En este estado, una parte de los datos de audio y video se ha almacenado en el búfer y se ha decodificado, y se puede reproducir en cualquier momento.
comenzó	Se están reproduciendo medios (video, audio).
en pausa	Reproducción de medios (video, audio) en pausa.
terminado	La reproducción de medios (video, audio) está completa. La reproducción se puede reiniciar desde el principio.
interrumpido	Se han liberado los recursos ocupados por varios hilos del jugador. El dispositivo de audio está apagado.
fin	Se ha liberado toda la memoria del reproductor que debe liberarse manualmente. Un jugador en este estado solo puede esperar a que la recolección de basura libere memoria.
error	El jugador encontró un error.

El código de uso simple es el siguiente

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

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);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("视频监控")),
        body: Container(
          alignment: Alignment.center,
          child: FijkView(
            player: player,
          ),
        ));
  }

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

Se puede jugar normalmente después de su uso, pero encuentra que la interfaz de usuario es demasiado fea, o las funciones no son suficientes para su propio uso, y necesita más funciones para usar, ¡no se preocupe! Los proveedores de terceros han pensado en esto durante mucho tiempo, por lo que proporcionan configuraciones de interfaz de usuario que pueden personalizarse por sí mismos. Es necesario modificar el panelBuilder para cambiar la interfaz UI , no mucha tontería, y subir el código. Primero agregue el código de interfaz de interfaz de usuario personalizado

class CustomFijkPanel extends StatefulWidget {
  final FijkPlayer player;
  final BuildContext buildContext;
  final Size viewSize;
  final Rect texturePos;

  const CustomFijkPanel({
    @required this.player,
    this.buildContext,
    this.viewSize,
    this.texturePos,
  });

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

class _CustomFijkPanelState extends State<CustomFijkPanel> {

  FijkPlayer get player => widget.player;
  bool _playing = false;

  @override
  void initState() {
    super.initState();
    widget.player.addListener(_playerValueChanged);
  }

  void _playerValueChanged() {
    FijkValue value = player.value;

    bool playing = (value.state == FijkState.started);
    if (playing != _playing) {
      setState(() {
        _playing = playing;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    Rect rect = Rect.fromLTRB(
        max(0.0, widget.texturePos.left),
        max(0.0, widget.texturePos.top),
        min(widget.viewSize.width, widget.texturePos.right),
        min(widget.viewSize.height, widget.texturePos.bottom));

    return Positioned.fromRect(
      rect: rect,
      child: Container(
        alignment: Alignment.bottomLeft,
        child: IconButton(
          icon: Icon(
            _playing ? Icons.pause : Icons.play_arrow,
            color: Colors.white,
          ),
          onPressed: () {
            _playing ? widget.player.pause() : widget.player.start();
          },
        ),
      ),
    );
  }

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

Aquí está el código cuando se usa

FijkView(
  player: player,
  panelBuilder: (FijkPlayer player, FijkData data, BuildContext context, Size viewSize, Rect texturePos) {
    return CustomFijkPanel(
      player: player,
      buildContext: context,
      viewSize: viewSize,
      texturePos: texturePos);
  },
)

Se hace aquí, uso simple, uso personalizado, si necesita ver más detalles, puede consultar sus documentos oficiales, la dirección es la siguiente: fijkplayer -- Complemento de Flutter para ijkplayer - fijkplayer -- Complemento de Flutter para ijkplayer

Usos del decodificador de video Flutter fijkplayer

Supongo que te gusta