flutter如何实现拉流直播

现在rtmp推流以及推流服务器已经搭建好了,在flutter中如何实现拉流直播

在 Flutter 中,播放视频流可以使用以下插件:

1. video_player

  • 功能: 支持播放本地和网络视频流。
  • 特点: 官方维护,支持多种视频格式和协议(如 HLS、DASH)。
  • 使用场景: 适用于大多数视频播放需求。
  • 安装:
    dependencies:
      video_player: ^2.4.7
  • 示例:
    import 'package:video_player/video_player.dart';
    import 'package:flutter/material.dart';
    
    class VideoPlayerScreen extends StatefulWidget {
      @override
      _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
    }
    
    class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
      late VideoPlayerController _controller;
    
      @override
      void initState() {
        super.initState();
        _controller = VideoPlayerController.network('https://www.example.com/sample.m3u8')
          ..initialize().then((_) {
            setState(() {});
          });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Video Player')),
          body: Center(
            child: _controller.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  )
                : CircularProgressIndicator(),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                _controller.value.isPlaying
                    ? _controller.pause()
                    : _controller.play();
              });
            },
            child: Icon(
              _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
            ),
          ),
        );
      }
    
      @override
      void dispose() {
        super.dispose();
        _controller.dispose();
      }
    }

2. chewie

  • 功能: 基于 video_player 的封装,提供更丰富的 UI 控件。
  • 特点: 支持播放控制、全屏等功能。
  • 使用场景: 需要更多播放控制功能时。
  • 安装:
    dependencies:
      chewie: ^1.3.4
      video_player: ^2.4.7
  • 示例:
    import 'package:chewie/chewie.dart';
    import 'package:video_player/video_player.dart';
    import 'package:flutter/material.dart';
    
    class ChewieDemo extends StatefulWidget {
      @override
      _ChewieDemoState createState() => _ChewieDemoState();
    }
    
    class _ChewieDemoState extends State<ChewieDemo> {
      late VideoPlayerController _videoPlayerController;
      late ChewieController _chewieController;
    
      @override
      void initState() {
        super.initState();
        _videoPlayerController = VideoPlayerController.network('https://www.example.com/sample.m3u8');
        _chewieController = ChewieController(
          videoPlayerController: _videoPlayerController,
          autoPlay: true,
          looping: true,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Chewie Demo')),
          body: Chewie(
            controller: _chewieController,
          ),
        );
      }
    
      @override
      void dispose() {
        _videoPlayerController.dispose();
        _chewieController.dispose();
        super.dispose();
      }
    }

3. fijkplayer

  • 功能: 基于 ijkplayer 的 Flutter 插件,支持更多格式和协议。
  • 特点: 支持 RTMP、RTSP 等流媒体协议。
  • 使用场景: 需要播放 RTMP、RTSP 等协议的视频流时。
  • 安装:
    dependencies:
      fijkplayer: ^0.10.1
  • 示例:
    import 'package:fijkplayer/fijkplayer.dart';
    import 'package:flutter/material.dart';
    
    class FijkPlayerScreen extends StatefulWidget {
      @override
      _FijkPlayerScreenState createState() => _FijkPlayerScreenState();
    }
    
    class _FijkPlayerScreenState extends State<FijkPlayerScreen> {
      final FijkPlayer player = FijkPlayer();
    
      @override
      void initState() {
        super.initState();
        player.setDataSource('rtmp://example.com/live/stream', autoPlay: true);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('FijkPlayer Demo')),
          body: FijkView(
            player: player,
          ),
        );
      }
    
      @override
      void dispose() {
        super.dispose();
        player.release();
      }
    }

4. better_player

  • 功能: 基于 video_player 的高级封装,支持更多功能。
  • 特点: 支持字幕、画中画、播放速度控制等。
  • 使用场景: 需要高级播放功能时。
  • 安装:
    dependencies:
      better_player: ^0.0.81
  • 示例:
    import 'package:better_player/better_player.dart';
    import 'package:flutter/material.dart';
    
    class BetterPlayerScreen extends StatefulWidget {
      @override
      _BetterPlayerScreenState createState() => _BetterPlayerScreenState();
    }
    
    class _BetterPlayerScreenState extends State<BetterPlayerScreen> {
      late BetterPlayerController _betterPlayerController;
    
      @override
      void initState() {
        super.initState();
        BetterPlayerDataSource dataSource = BetterPlayerDataSource(
          BetterPlayerDataSourceType.network,
          'https://www.example.com/sample.m3u8',
        );
        _betterPlayerController = BetterPlayerController(
          BetterPlayerConfiguration(),
          betterPlayerDataSource: dataSource,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Better Player Demo')),
          body: BetterPlayer(
            controller: _betterPlayerController,
          ),
        );
      }
    
      @override
      void dispose() {
        _betterPlayerController.dispose();
        super.dispose();
      }
    }

总结

  • video_player: 基础播放功能。
  • chewie: 提供更多播放控制。
  • fijkplayer: 支持 RTMP、RTSP 等协议。
  • better_player: 高级功能,如字幕、画中画等。

根据需求选择合适的插件。

2 回复

关于Flutter直播的视频教程:https://www.itying.com/goods-1120.html

更多关于flutter如何实现拉流直播的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter中实现直播

Flutter中实现直播的话,我们可以使用第三方插件flutter_ijkplayer来实现。

https://pub.dev/packages/flutter_ijkplayer

1、安装依赖

dependencies:
  flutter_ijkplayer: ^0.3.5+1

2、引入插件

import 'package:flutter_ijkplayer/flutter_ijkplayer.dart';

3、实例化IjkMediaController

 IjkMediaController controller = IjkMediaController();

4、设置拉流地址

  @override
  void initState() {
    super.initState();
    this.initPlayer();
  }  
   initPlayer() async{
     await controller.setNetworkDataSource(
              'http://192.168.0.11:8000/live/itying.flv',
              autoPlay: false);
          print("set data source success");
   }

5、定义视频播放组件

Widget buildIjkPlayer() {
    return Container(
      height: 200, // 设置高度
      child: IjkPlayer(
        mediaController: controller        
      ),
    );
 }

6、销毁

 @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!