Flutter媒体管理插件ant_media_flutter的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter媒体管理插件ant_media_flutter的使用

Ant Media Server Logo

Pub Star on Github License: GPL3

简介

ant_media_flutter 是一个用于WebRTC的Flutter插件。要使用它，你需要先有一个Ant Media Server实例。更多信息可以查看 Ant Media Server的网站。

如果你使用的是Ant Media Server社区版，你只能使用WebRTC发布功能。WebRTC播放、会议和数据通道功能在Ant Media Server企业版中可用。

使用方法

AntMediaFlutter.connect

以下是一个使用 AntMediaFlutter.connect 的示例：

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _inCalling = false;
  RTCVideoRenderer _localRenderer = RTCVideoRenderer();
  RTCVideoRenderer _remoteRenderer = RTCVideoRenderer();

  @override
  void initState() {
    super.initState();
    _localRenderer.initialize();
    _remoteRenderer.initialize();
  }

  @override
  void dispose() {
    _localRenderer.dispose();
    _remoteRenderer.dispose();
    super.dispose();
  }

  void _connectToServer() {
    AntMediaFlutter.connect(
      // host
      'wss://<domain>:<port>/<application_name>/websocket',

      // streamID
      'stream1',

      // roomID
      '',

      // token
      '',

      // type
      AntMediaType.Publish,

      // userScreen
      true,

      // onStateChange
      (HelperState state) {
        switch (state) {
          case HelperState.CallStateNew:
            setState(() {
              _inCalling = true;
            });
            break;
          case HelperState.CallStateBye:
            setState(() {
              _localRenderer.srcObject = null;
              _remoteRenderer.srcObject = null;
              _inCalling = false;
              Navigator.pop(context);
            });
            break;
          case HelperState.ConnectionOpen:
            break;
          case HelperState.ConnectionClosed:
            break;
          case HelperState.ConnectionError:
            break;
        }
      },

      // onLocalStream
      ((stream) {
        setState(() {
          _remoteRenderer.srcObject = stream;
        });
      }),

      // onAddRemoteStream
      ((stream) {
        setState(() {
          _remoteRenderer.srcObject = stream;
        });
      }),

      // onDataChannel
      (datachannel) {
        print(datachannel.id);
        print(datachannel.state);
      },

      // onDataChannelMessage
      (channel, message, isReceived) {
        print("Message Received: ${message.received}");
      },

      // onupdateConferencePerson
      (streams) {},

      // onRemoveRemoteStream
      ((stream) {
        setState(() {
          _remoteRenderer.srcObject = null;
        });
      }),

      // ice servers
      [
        {'url': 'stun:stun.l.google.com:19302'},
      ],

      // callbacks
      (command, mapData) {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ant Media Flutter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _connectToServer,
              child: Text('Connect to Server'),
            ),
            SizedBox(height: 20),
            _inCalling
                ? Expanded(
                    child: AspectRatio(
                      aspectRatio: 16 / 9,
                      child: RTCVideoView(_remoteRenderer),
                    ),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}

连接函数的部分说明

Host

Host 是你的Ant Media Server实例的WebSocket URL。

Stream ID

Stream ID 用于标识每个流，以便进行发布和播放。

Room ID

Room ID 用于WebRTC多轨道会议模式。

Type

Type 用于确定不同的模式。可能的选项：

  • AntMediaType.Publish
  • AntMediaType.Play
  • AntMediaType.Peer
  • AntMediaType.Conference
  • AntMediaType.DataChannelOnly

User Screen

User Screen 用于在初始化时切换屏幕和摄像头发布模式。

On State Change

On State Change 是设备与Ant Media Server之间的WebSocket连接状态。可能的选项：

  • HelperState.CallStateNew
  • HelperState.CallStateBye
  • HelperState.ConnectionOpen
  • HelperState.ConnectionClosed
  • HelperState.ConnectionError

On Local Stream

On Local Stream 在我们开始向Ant Media Server发送流时触发。

On Add Remote Stream

On Add Remote Stream 在我们从Ant Media Server接收新的远程流时触发。

On Data Channel

On Data Channel 在数据通道状态改变时触发。

On Data Channel Message

On Data Channel Message 在我们接收到新的数据通道消息时触发。

On Update Conference Person

On Update Conference Person 在会议房间中有人加入或离开时触发。

On Remove Remote Stream

On Remove Remote Stream 在你停止发布自己或你正在播放的流停止发布时触发。

Ice Servers

Ice Servers 是你可以定义自己的turn/stun服务器列表的地方。

Callbacks

Callbacks 你可以监听从Ant Media Server侧发送的所有回调。

其他功能

切换摄像头

AntMediaFlutter.anthelper?.switchCamera();

静音/取消静音麦克风

AntMediaFlutter.anthelper?.muteMic(bool mute);

打开/关闭摄像头

AntMediaFlutter.anthelper?.toggleCam(bool state);

断开对等连接

AntMediaFlutter.anthelper?.disconnectPeer();

获取发送者轨道

AntMediaFlutter.anthelper?.getSender(streamId, type);

设置最大比特率

AntMediaFlutter.anthelper?.setMaxBitrate(streamId, type, maxBitrateKbps);

创建本地流

AntMediaFlutter.anthelper?.createStream(media, userScreen);

设置本地流

AntMediaFlutter.anthelper?.setStream(MediaStream? media);

开始发布

AntMediaFlutter.anthelper?.startStreamingAntMedia(streamId, token);

强制流质量

AntMediaFlutter.anthelper?.forceStreamQuality(streamId, resolution);

加入会议房间（作为播放器）

AntMediaFlutter.anthelper?.join(streamId);

加入会议房间（作为参与者）

AntMediaFlutter.anthelper?.joinroom(streamId);

发送数据通道消息

AntMediaFlutter.anthelper?.sendMessage(RTCDataChannelMessage message);

获取流信息

AntMediaFlutter.anthelper?.getStreamInfo(streamId);

关闭对等连接

AntMediaFlutter.anthelper?.closePeerConnection(streamId);

停止发布

AntMediaFlutter.anthelper?.bye();

关闭所有连接

AntMediaFlutter.anthelper?.close();

示例项目

  • Conference Sample App - 使用Ant Media Server Flutter SDK创建WebRTC多轨道会议应用的示例。
  • Data Channel Sample App - 使用Ant Media Server Flutter SDK创建基于数据通道的文本消息应用的示例。
  • Peer Sample App - 使用Ant Media Server Flutter SDK创建点对点应用的示例。
  • Play Sample App - 使用Ant Media Server Flutter SDK创建WebRTC播放器的示例。
  • Publish Sample App - 使用Ant Media Server Flutter SDK创建WebRTC发布应用的示例。
  • Sample Project - 包含上述所有示例的完整示例项目。

集成

要将Flutter SDK集成到你的项目中，请参考 此链接。

支持

有关Flutter SDK的任何问题，请访问我们的 社区平台。

问题

在 Ant-Media-Server 上创建问题。

Dart 版本

  • Dart 2: >= 2.12

希望这些信息对你有所帮助！如果有任何问题，请随时提问。


更多关于Flutter媒体管理插件ant_media_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter媒体管理插件ant_media_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中集成和使用ant_media_flutter插件的示例代码案例。ant_media_flutter插件通常用于与Ant Media Server进行媒体管理，如视频直播和播放等。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加ant_media_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  ant_media_flutter: ^最新版本号  # 请替换为实际的最新版本号

2. 导入插件

在你的Flutter项目的Dart文件中，导入ant_media_flutter插件：

import 'package:ant_media_flutter/ant_media_flutter.dart';

3. 初始化插件

在你的应用启动时（例如MainActivity.kt或AppDelegate.swift中，具体取决于你的平台），你需要进行插件的初始化。以下是一个Android的示例：

MainActivity.kt

package com.example.yourapp

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import com.antmedia.flutter.AntMediaFlutterPlugin

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        AntMediaFlutterPlugin.registerWith(flutterEngine.dartExecutor.binaryMessenger)
    }
}

对于iOS，通常插件会自动注册，无需额外配置。

4. 使用插件

以下是一个简单的示例，展示如何在Flutter中使用ant_media_flutter插件进行视频直播：

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ant Media Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  AntMediaClient? antMediaClient;

  @override
  void initState() {
    super.initState();
    // 初始化AntMediaClient
    antMediaClient = AntMediaClient(
      serverUrl: 'ws://your-ant-media-server-url:5080/WebSocket',  // 替换为你的Ant Media Server的URL
      streamKey: 'yourStreamKey',  // 替换为你的流密钥
    );

    // 开始直播
    antMediaClient?.startPublish(
      videoSource: VideoSourceType.camera,
      audioSource: AudioSourceType.microphone,
      onStatusChanged: (status) {
        print('Stream status: $status');
      },
      onError: (error) {
        print('Error: $error');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ant Media Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Starting Live Stream...',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 停止直播
          antMediaClient?.stopPublish();
        },
        tooltip: 'Stop Stream',
        child: Icon(Icons.stop),
      ),
    );
  }

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

注意事项

  1. 服务器URL和流密钥：确保替换为你的Ant Media Server的实际URL和流密钥。
  2. 权限：在Android上，你需要在AndroidManifest.xml中添加摄像头和麦克风的权限。
  3. 错误处理：在实际应用中，应该添加更多的错误处理和状态管理。

这个示例演示了如何使用ant_media_flutter插件进行视频直播的基本步骤。你可以根据实际需求进行扩展和修改。

回到顶部