Flutter插件iroha的使用方法

Flutter插件iroha的使用方法

Iroha - Flutter 用 Ayame ライブラリ

Iroha 是一个基于 WebRTC 的 Flutter 插件，它为 Ayame WebRTC 签号服务器提供支持。Iroha 几乎实现了与 Ayame Web SDK 相同的 API，并依赖于 flutter-webrtc 来实现 WebRTC 功能。

系统条件

• Flutter 3.3 以降

许可证

• Apache License 2.0

安装Flutter插件iroha

在 pubspec.yaml 文件中添加以下内容：

dependencies:
  iroha: ^最新版本号

然后运行以下命令安装：

flutter pub get

Flutter插件iroha使用方法

以下是一个完整的示例代码，展示如何使用 iroha 插件进行视频聊天和文本聊天：

import 'package:iroha/iroha.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Iroha Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: const MyHomePage(title: 'Iroha Demo'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late AyameConnection _conn;
  bool _connected = false;

  final _localRenderer = RTCVideoRenderer();
  final _remoteRenderer = RTCVideoRenderer();
  bool _renderersInited = false;
  int _navigationIndex = 0;

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

  Future<void> _initRenderers() async {
    if (!_renderersInited) {
      for (final renderer in [_localRenderer, _remoteRenderer]) {
        await renderer.initialize();
      }
      _renderersInited = true;
    }
  }

  Future<void> _disposeRenderers() async {
    if (_renderersInited) {
      for (final renderer in [_localRenderer, _remoteRenderer]) {
        if (renderer.textureId != null) {
          renderer.srcObject = null;
        }
        await renderer.dispose();
      }
      _renderersInited = false;
    }
  }

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

  Future<void> _connect() async {
    final mediaConstraints = {
      'audio': true,
      'video': {
        'mandatory': {
          'minWidth': '640',
          'minHeight': '480',
          'minFrameRate': '30',
        },
        'facingMode': 'user',
        'optional': [],
      },
    };

    final stream = await mediaDevices.getUserMedia(mediaConstraints);

    _conn = Ayame.connection(
      signalingUrl: 'wss://ayame-labo.shiguredo.app/signaling',
      roomId: '<your_room_id>',
      options: Ayame.defaultOptions()
        ..signalingKey = '<your_signaling_key>',
    )..onOpen = (option) async {
      final dataChannel = await _conn.createDataChannel(label: 'chat');
      if (dataChannel != null) {
        dataChannel.onMessage = (message) {
          print('Received message: ${message.text}');
        };
      }
      setState(() {
        _connected = true;
      });
    }..onDisconnect = (error) async {
      print('Disconnected: $error');
      await _disposeRenderers();
      setState(() {
        _connected = false;
      });
    }..onAddStream = (stream) async {
      _remoteRenderer.srcObject = stream;
      setState(() {});
    }..onDataChannel = (channel) {
      channel.onMessage = (message) {
        print('Received data channel message: ${message.text}');
      };
    };

    await _initRenderers();
    await _conn.connect(stream: stream);

    setState(() {
      _localRenderer.srcObject = stream;
    });
  }

  Future<void> _disconnect() async {
    await _disposeRenderers();
    await _conn.disconnect();
    setState(() {
      _connected = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: _navigationView(),
          ),
          _connectButton(),
        ],
      ),
      bottomNavigationBar: _bottomNavigationBar(),
    );
  }

  Widget _navigationView() {
    switch (_navigationIndex) {
      case 0:
        return _videoChatView();
      default:
        return _textChatView();
    }
  }

  Widget _videoChatView() => Padding(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Column(
          children: [
            const SizedBox(height: 16),
            _remoteVideoView(),
            const SizedBox(height: 16),
            _localVideoView(),
          ],
        ),
      );

  Widget _localVideoView() => Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3 - 50,
        decoration: const BoxDecoration(color: Colors.black54),
        child: RTCVideoView(_localRenderer, mirror: true),
      );

  Widget _remoteVideoView() => Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3 - 50,
        decoration: const BoxDecoration(color: Colors.black54),
        child: RTCVideoView(_remoteRenderer),
      );

  Widget _textChatView() => Column(
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: LayoutBuilder(
                builder: (context, constraints) => SingleChildScrollView(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(minHeight: constraints.maxHeight),
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: 0,
                      itemBuilder: (content, index) => Container(
                        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                        decoration: const BoxDecoration(
                          border: Border(bottom: BorderSide(width: 0.3, color: Colors.lightGreen)),
                        ),
                        child: Text('Placeholder'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8),
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: TextEditingController(),
                    onChanged: (value) {},
                  ),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('Send'),
                ),
              ],
            ),
          ),
        ],
      );

  Widget _connectButton() => Padding(
        padding: const EdgeInsets.all(20),
        child: SizedBox(
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.zero,
              fixedSize: const Size(70, 70),
              shape: const CircleBorder(),
              backgroundColor: _connected ? Colors.deepOrange : Colors.lightGreen,
            ),
            onPressed: _connected ? _disconnect : _connect,
            child: ClipOval(
              child: Icon(
                _connected ? Icons.stop : Icons.play_arrow,
                size: 55,
              ),
            ),
          ),
        ),
      );

  Widget _bottomNavigationBar() => BottomNavigationBar(
        currentIndex: _navigationIndex,
        onTap: (index) {
          setState(() {
            _navigationIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.video_camera_front),
            label: 'Video Chat',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Text Chat',
          ),
        ],
      );
}