Flutter AWS IVS集成插件flutter_aws_ivs的使用

Flutter AWS IVS 集成插件 flutter_aws_ivs 的使用

flutter_aws_ivs 是一个用于 Amazon Interactive Video Service (IVS) 的 Flutter 平台集成插件(适用于 iOS 和 Android)。Amazon IVS 是一种托管式的直播流解决方案,为移动和网页应用快速搭建直播功能。该服务包括自己的视频播放器 SDK,并且非常适合创建交互式视频体验。

示例代码

import 'dart:io';

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

import 'package:flutter_aws_ivs/flutter_aws_ivs.dart';
import 'package:http_proxy/http_proxy.dart';

// 请替换以下变量值为您的实际 AWS 凭证和区域
const region = ''; // 例如:'us-west-2'
const accessKeyId = ''; // 例如:'AKIAIOSFODNN7EXAMPLE'
const secretAccessKey = ''; // 例如:'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY'

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置 HTTP 代理
  HttpProxy httpProxy = await HttpProxy.createHttpProxy();
  HttpOverrides.global = httpProxy;
  
  // 初始化 AWS IVS 服务
  AwsIvsService.init(
      accessKeyId: accessKeyId,
      region: region,
      secretAccessKey: secretAccessKey);

  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  FlutterAwsIvsController? _controller;
  
  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 异步初始化平台状态
  Future<void> initPlatformState() async {
    if (!mounted) return;

    // 如果需要获取平台版本信息,可以取消注释以下部分
    // try {
    //   String platformVersion = await _flutterAwsIvsPlugin.getPlatformVersion() ?? 'Unknown platform version';
    //   setState(() {
    //     _platformVersion = platformVersion;
    //   });
    // } on PlatformException {
    //   setState(() {
    //     _platformVersion = 'Failed to get platform version.';
    //   });
    // }
  }

  // 当 FlutterAwsIvsView 创建时调用此方法
  void _onFlutterAwsIvsViewCreated(FlutterAwsIvsController controller) {
    _controller = controller;
    controller.initView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Container(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  // 音频静音按钮
                  TextButton(
                    onPressed: () {
                      _controller?.toggleLocalAudioMute();
                    },
                    child: const Text('音频静音'),
                  ),
                  // 视频静音按钮
                  TextButton(
                    onPressed: () {
                      _controller?.toggleLocalVideoMute();
                    },
                    child: const Text('视频静音'),
                  ),
                  // 加入舞台按钮
                  TextButton(
                    onPressed: () {
                      _controller?.joinStage(
                          "arn:aws:ivs:ap-northeast-2:615933877737:stage/ZXNBbnOs3u3m");
                    },
                    child: const Text('加入舞台'),
                  ),
                ],
              ),
              // 展示视频流的控件
              Expanded(
                child: FlutterAwsIvsView(
                  onAwsIvsCreated: _onFlutterAwsIvsViewCreated,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter AWS IVS集成插件flutter_aws_ivs的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter AWS IVS集成插件flutter_aws_ivs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要在Flutter应用中集成Amazon Interactive Video Service (IVS),你可以使用flutter_aws_ivs插件。这个插件提供了一个简单的方式来播放和管理IVS流。

以下是如何使用flutter_aws_ivs插件的步骤:

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_aws_ivs插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_aws_ivs: ^1.0.0  # 请检查最新版本

然后运行flutter pub get来获取依赖。

2. 配置Android和iOS项目

Android

android/app/build.gradle文件中,确保minSdkVersion至少为21:

android {
    defaultConfig {
        minSdkVersion 21
    }
}

iOS

ios/Podfile中,确保platform设置为11.0或更高版本:

platform :ios, '11.0'

然后运行flutter pub getflutter pub run build_runner build来生成必要的代码。

3. 使用插件

在你的Flutter代码中,你可以使用AwsIvsPlayer来播放IVS流。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AWS IVS Example'),
        ),
        body: Center(
          child: AwsIvsPlayer(
            playbackUrl: 'https://your-ivs-playback-url',
            autoPlay: true,
          ),
        ),
      ),
    );
  }
}

4. 播放控制

你可以通过AwsIvsPlayerController来控制播放器的行为,例如播放、暂停、停止等。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  AwsIvsPlayerController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AWS IVS Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: AwsIvsPlayer(
              playbackUrl: 'https://your-ivs-playback-url',
              autoPlay: true,
              onViewCreated: (controller) {
                setState(() {
                  _controller = controller;
                });
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: Icon(Icons.play_arrow),
                onPressed: () {
                  _controller?.play();
                },
              ),
              IconButton(
                icon: Icon(Icons.pause),
                onPressed: () {
                  _controller?.pause();
                },
              ),
              IconButton(
                icon: Icon(Icons.stop),
                onPressed: () {
                  _controller?.stop();
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

5. 处理事件

你可以监听播放器的事件,例如播放状态改变、错误等。

_controller.onPlayerStateChanged.listen((state) {
  print('Player state changed: $state');
});

_controller.onPlayerError.listen((error) {
  print('Player error: $error');
});

6. 释放资源

在页面销毁时,确保释放播放器资源:

@override
void dispose() {
  _controller?.dispose();
  super.dispose();
}

7. 运行应用

现在你可以运行你的Flutter应用,并查看IVS流的播放情况。

flutter run
回到顶部