Flutter集成Ionic功能插件flutter_ion的使用

Flutter SDK for Ion

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"> <path d="M64 0C28.652 0 0 28.652 0 64s28.652 64 64 64 64-28.652 64-64S99.348 0 64 0zm0 112c-26.514 0-48-21.486-48-48s21.486-48 48-48 48 21.486 48 48-21.486 48-48 48z"/> </svg>

Flutter SDK for the Ion backend.

安装

编辑你的Flutter项目的pubspec.yaml文件。

添加：

flutter_ion:

平台支持

• Android
• iOS
• macOS
• Web

使用

import 'package:flutter_ion/flutter_ion.dart' as ion;
import 'package:uuid/uuid.dart';

// 连接到ion-sfu。
final signal = ion.JsonRPCSignal("ws://ion-sfu:7000/ws");

final String _uuid = Uuid().v4();

ion.Client client = await ion.Client.create(sid: "test session", uid: _uuid, signal: signal);

client.ontrack = (track, ion.RemoteStream stream) {
    /// 禁用远程流
    stream.mute();
    /// 启用远程流
    stream.unmute();

    if (track.kind == "video") {
       /// 优先选择一个图层
       stream.preferLayer(ion.Layer.medium);
       
       /// 渲染远程流。
       /// remoteRenderer.srcObject = stream.stream;
    }
};

ion.LocalStream localStream = await ion.LocalStream.getUserMedia(
               constraints: ion.Constraints.defaults..simulcast = true);

/// 渲染本地流。
/// localRenderer.srcObject = localStream.stream;

/// 发布流
await client.publish(localStream);

/// 禁用本地流
localStream.mute();

/// 启用本地流
localStream.unmute();

完整示例 Demo

以下是一个完整的示例代码，展示了如何在Flutter项目中使用flutter_ion插件。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:flutter_ion/flutter_ion.dart';
import 'package:uuid/uuid.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _GetMyAppState createState() => _GetMyAppState();
}

class _GetMyAppState extends State<MyApp> {
  final _localRenderer = RTCVideoRenderer();
  final List<RTCVideoRenderer> _remoteRenderers = [];
  final Connector _connector = Connector('http://127.0.0.1:5551');
  final _room = 'ion';
  final _uid = Uuid().v4();
  late RTC _rtc;

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

  void connect() async {
    _rtc = RTC(_connector);
    _rtc.onspeaker = (Map<String, dynamic> list) {
      print('onspeaker: $list');
    };

    _rtc.ontrack = (track, RemoteStream remoteStream) async {
      print('onTrack: remote stream => ${remoteStream.id}');
      if (track.kind == 'video') {
        var renderer = RTCVideoRenderer();
        await renderer.initialize();
        renderer.srcObject = remoteStream.stream;
        setState(() {
          _remoteRenderers.add(renderer);
        });
      }
    };

    _rtc.ontrackevent = (TrackEvent event) {
      print(
          'ontrackevent state = ${event.state},  uid = ${event.uid},  tracks = ${event.tracks}');
      if (event.state == TrackState.REMOVE) {
        setState(() {
          _remoteRenderers.removeWhere(
              (element) => element.srcObject?.id == event.tracks[0].stream_id);
        });
      }
    };

    await _rtc.connect();
    await _rtc.join(_room, _uid, JoinConfig());

    await _localRenderer.initialize();
    // 发布本地流
    var localStream = await LocalStream.getUserMedia(constraints: Constraints.defaults);
    await _rtc.publish(localStream);
    setState(() {
      _localRenderer.srcObject = localStream.stream;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'ion-sfu',
        home: Scaffold(
            appBar: AppBar(
              title: Text('ion-sfu'),
            ),
            body: OrientationBuilder(builder: (context, orientation) {
              return Column(
                children: [
                  Row(
                    children: [Text('Local Video')],
                  ),
                  Row(
                    children: [
                      SizedBox(
                          width: 160,
                          height: 120,
                          child: RTCVideoView(_localRenderer, mirror: true))
                    ],
                  ),
                  Row(
                    children: [Text('Remote Video')],
                  ),
                  Row(
                    children: [
                      ..._remoteRenderers.map((remoteRenderer) {
                        return SizedBox(
                            width: 160,
                            height: 120,
                            child: RTCVideoView(remoteRenderer));
                      }).toList(),
                    ],
                  ),
                ],
              );
            })));
  }
}