Flutter一对一通话插件transmedika_one_to_one_call的使用

Flutter一对一通话插件transmedika_one_to_one_call的使用

Transmedika SDK Video Call

支持平台

  • Android
  • IOS
  • Web

功能性

特性 Android iOS Web
音频/视频 ✔️ [WIP] ✔️

示例

我在main.dart文件中使用了示例。

import 'dart:io';
import 'package:flutter/material.dart';
import 'one_to_one_page.dart';

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context){
    return super.createHttpClient(context)
      ..badCertificateCallback = (X509Certificate cert, String host, int port) => true;
  }
}

void main() {
  HttpOverrides.global = MyHttpOverrides();
  runApp(const MyApp());
}

接收呼叫

要接收呼叫，应用程序将通过Firebase接收通知。你可以从通知中获取myself、other、consultationId等数据，并将其传递给OneToOneScreen构造函数。 以下是示例：

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

  @override
  Widget build(BuildContext context) {

    const urlWebSocket = "";

    const iceServers = {
      'iceServers': [
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        }
      ]
    };

    final mySelf = {
      'email': "maman@rskp.com",
      'name': 'TN, MAMAN',
      'uuid': '7bfb1588-fc6a-4878-a96f-126cd6a6692c',
      'profilePicture': 'https://upload.wikimedia.org/wikipedia/commons/0/04/Elon_Musk_and_Hans_Koenigsmann_at_the_SpaceX_CRS-8_post-launch_press_conference_%2826223624532%29_%28cropped%29.jpg',
      'token': 'xxxxxxxxxxxx'
    };

    final other = {
      'email': "dion@rskp.com",
      'name': 'dr. Dionisius Panji Wijanarko, Sp.B',
      'uuid': '42c6145f-8143-4d67-ad30-6f84571e0f65',
      'profilePicture': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Donald_Trump_official_portrait.jpg/710px-Donald_Trump_official_portrait.jpg',
    };

    String consultationId = '224';

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: OneToOneScreen(
          mySelf: mySelf,
          other: other,
          consultationId: consultationId,
          urlWebSocket: urlWebSocket,
          iceServers: iceServers,
          onMessage: (message){
            ///put your toast or widget for display message
          },
        )
    );
  }
}

发起呼叫

要发起呼叫，你需要向auth/check-device-id-multiple端点发送GET请求以获取设备的Firebase令牌。Firebase令牌是可选的，仅在你想要拨打电话时才需要。以下是一个示例：

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

  @override
  Widget build(BuildContext context) {

    const urlWebSocket = "";

    const iceServers = {
      'iceServers': [
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        },
        {
          'url': '',
        }
      ]
    };

    final mySelf = {
      'email': "maman@rskp.com",
      'name': 'TN, MAMAN',
      'uuid': '7bfb1588-fc6a-4878-a96f-126cd6a6692c',
      'profilePicture': 'https://upload.wikimedia.org/wikipedia/commons/0/04/Elon_Musk_and_Hans_Koenigsmann_at_the_SpaceX_CRS-8_post-launch_press_conference_%2826223624532%29_%28cropped%29.jpg',
      'token': 'xxxxxxxxxxxx'
    };

    final other = {
      'email': "dion@rskp.com",
      'name': 'dr. Dionisius Panji Wijanarko, Sp.B',
      'uuid': '42c6145f-8143-4d67-ad30-6f84571e0f65',
      'profilePicture': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Donald_Trump_official_portrait.jpg/710px-Donald_Trump_official_portrait.jpg',
    };

    String consultationId = '224';
    
    List<String> fcmTokens = ['fYSu5ILSvcKFUwyPRo--kl:APA91bF7c3EVBX7jvGvhQZrFC-Y2t83sjZ79gljq03WE9finRILE608KHAZkrX0MRIjAZL2Fi2Cvy1orZY8C9sgNfTH_eHWJl0X7quGSyusbTDaCnwVtGuwT22H3PbQwhaPmAXgqX6Oq'];

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: OneToOneScreen(
          mySelf: mySelf,
          other: other,
          consultationId: consultationId,
          fcmTokens: fcmTokens,
          urlWebSocket: urlWebSocket,
          iceServers: iceServers,
          onMessage: (message){
            ///put your toast or widget for display message
          },
        )
    );
  }
}

加入群组呼叫

class MyApp extends StatelessWidget {
  const MyApp({Key? key}): super(key: key);

  @override
  Widget build(BuildContext context) {
    const urlWebSocket = Constants.devUrlGroupCallWebSocket;
    const Map<String, List<dynamic>> iceServers = Constants.roomIceServers;

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: ManyToManyScreen(
          roomID: 'myroom',
          name: 'Widiyanto02',
          urlWebSocket: urlWebSocket,
          iceServers: iceServers,
          onMessage: (message) {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              backgroundColor: Colors.red,
              behavior: SnackBarBehavior.floating,
              dismissDirection: DismissDirection.up,
              showCloseIcon: true,
              closeIconColor: Colors.white,
              content: Text('$message, Try again?'),
            ));
          },
          onLeave: () {

          },
          placeHolder: (context) {
            return const Center(
              child: Text("Place Holder"),
            );
          },
        )
    );
  }
}

预览图片

Screenshot_20230405-143410 Screenshot_20230405-143434 web

结论

祝你一天愉快！


更多关于Flutter一对一通话插件transmedika_one_to_one_call的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter一对一通话插件transmedika_one_to_one_call的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 transmedika_one_to_one_call 插件进行 Flutter 一对一通话的示例代码。请注意，这个示例假设你已经按照插件的文档完成了必要的设置，包括在 pubspec.yaml 文件中添加依赖、配置 Android 和 iOS 相关的权限和设置等。

1. 添加依赖

首先，确保在 pubspec.yaml 文件中添加了 transmedika_one_to_one_call 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  transmedika_one_to_one_call: ^latest_version  # 替换为最新版本号

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

2. 初始化插件

在你的 Flutter 应用的入口文件（通常是 main.dart）中，初始化插件并设置必要的配置：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter One-to-One Call',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CallScreen(),
    );
  }
}

class CallScreen extends StatefulWidget {
  @override
  _CallScreenState createState() => _CallScreenState();
}

class _CallScreenState extends State<CallScreen> {
  late TransmedikaOneToOneCall _callPlugin;

  @override
  void initState() {
    super.initState();
    _callPlugin = TransmedikaOneToOneCall();

    // 初始化插件，配置必要的参数（根据插件文档进行配置）
    _callPlugin.initialize(
      apiKey: "YOUR_API_KEY",  // 替换为你的API密钥
      userId: "USER_ID",       // 替换为用户ID
      // 其他必要的初始化参数...
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('One-to-One Call'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                try {
                  // 发起通话请求
                  await _callPlugin.startCall(
                    calleeId: "CALLEE_ID",  // 替换为被叫用户的ID
                    // 其他可选参数...
                  );
                } catch (e) {
                  print("Failed to start call: $e");
                }
              },
              child: Text('Start Call'),
            ),
            ElevatedButton(
              onPressed: () async {
                try {
                  // 接收或挂断通话
                  await _callPlugin.endCall();
                } catch (e) {
                  print("Failed to end call: $e");
                }
              },
              child: Text('End Call'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 处理通话状态

你可能还需要监听通话状态的变化，比如通话开始、结束、错误等。可以通过插件提供的回调或监听器来实现。以下是一个简单的示例，展示如何监听通话状态的变化：

class _CallScreenState extends State<CallScreen> {
  late TransmedikaOneToOneCall _callPlugin;
  late StreamSubscription<CallEvent> _callEventSubscription;

  @override
  void initState() {
    super.initState();
    _callPlugin = TransmedikaOneToOneCall();

    _callPlugin.initialize(
      apiKey: "YOUR_API_KEY",
      userId: "USER_ID",
      // 其他必要的初始化参数...
    );

    // 监听通话事件
    _callEventSubscription = _callPlugin.onCallEvent.listen((CallEvent event) {
      if (event is CallStartedEvent) {
        print("Call started with callee: ${event.calleeId}");
      } else if (event is CallEndedEvent) {
        print("Call ended with reason: ${event.reason}");
      } else if (event is CallErrorEvent) {
        print("Call error: ${event.error.message}");
      }
      // 处理其他事件类型...
    });
  }

  @override
  void dispose() {
    // 取消订阅通话事件
    _callEventSubscription.cancel();
    super.dispose();
  }

  // ... 其他代码与上面的示例相同 ...
}

请注意，以上代码只是一个示例，具体实现可能会根据 transmedika_one_to_one_call 插件的实际 API 和功能有所不同。务必参考插件的官方文档和示例代码，以确保正确集成和使用。

回到顶部