如何在 Flutter(Android 和 Ios)中实现与 WebRTC 的电话会议视频聊天

Posted

技术标签:

【中文标题】如何在 Flutter(Android 和 Ios)中实现与 WebRTC 的电话会议视频聊天【英文标题】:How can i implement conference call video chat with WebRTC in flutter (Android & Ios) 【发布时间】:2022-01-24 04:56:17 【问题描述】:

我正在尝试在 Flutter for androidios 中使用 WebRTC 实现会议视频通话,现在无法找到使用 webRTC 进行用户会议视频聊天的任何解决方案

【问题讨论】:

this 将帮助您启动 【参考方案1】:

这是一个例子:


第一个你需要添加这个依赖:

dependencies:
  flutter_webrtc: ^0.8.0

然后:

import 'dart:core';

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;
import 'package:flutter/material.dart';
import 'package:flutter_background/flutter_background.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';

import 'src/data_channel_sample.dart';
import 'src/get_display_media_sample.dart';
import 'src/get_user_media_sample.dart'
    if (dart.library.html) 'src/get_user_media_sample_web.dart';
import 'src/loopback_sample.dart';
import 'src/route_item.dart';

void main() 
  if (WebRTC.platformIsDesktop) 
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
   else if (WebRTC.platformIsAndroid) 
    WidgetsFlutterBinding.ensureInitialized();
    startForegroundService();
  
  runApp(MyApp());


Future<bool> startForegroundService() async 
  final androidConfig = FlutterBackgroundAndroidConfig(
    notificationTitle: 'Title of the notification',
    notificationText: 'Text of the notification',
    notificationImportance: AndroidNotificationImportance.Default,
    notificationIcon: AndroidResource(
        name: 'background_icon',
        defType: 'drawable'), // Default is ic_launcher from folder mipmap
  );
  await FlutterBackground.initialize(androidConfig: androidConfig);
  return FlutterBackground.enableBackgroundExecution();


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  late List<RouteItem> items;

  @override
  void initState() 
    super.initState();
    _initItems();
  

  ListBody _buildRow(context, item) 
    return ListBody(children: <Widget>[
      ListTile(
        title: Text(item.title),
        onTap: () => item.push(context),
        trailing: Icon(Icons.arrow_right),
      ),
      Divider()
    ]);
  

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter-WebRTC example'),
          ),
          body: ListView.builder(
              shrinkWrap: true,
              padding: const EdgeInsets.all(0.0),
              itemCount: items.length,
              itemBuilder: (context, i) 
                return _buildRow(context, items[i]);
              )),
    );
  

  void _initItems() 
    items = <RouteItem>[
      RouteItem(
          title: 'GetUserMedia',
          push: (BuildContext context) 
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) => GetUserMediaSample()));
          ),
      RouteItem(
          title: 'GetDisplayMedia',
          push: (BuildContext context) 
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) =>
                        GetDisplayMediaSample()));
          ),
      RouteItem(
          title: 'LoopBack Sample',
          push: (BuildContext context) 
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) => LoopBackSample()));
          ),
      RouteItem(
          title: 'DataChannel',
          push: (BuildContext context) 
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (BuildContext context) => DataChannelSample()));
          ),
    ];
  

【讨论】:

是的,我已经使用同一个套餐,on call 运行良好,但无法连接多个用户组的视频和音频通话【参考方案2】:

试试下面这个包的例子https://pub.dev/packages/flutter_webrtc

对于 P2P,您需要一个服务器组件,该组件可在 https://github.com/flutter-webrtc/flutter-webrtc-server 获得

【讨论】:

是的,我已经使用同一个套餐,on call 运行良好,但无法连接多个用户组的视频和音频通话 您检查过github.com/flutter-webrtc/flutter-webrtc/discussions/698 和github.com/flutter-webrtc/flutter-webrtc/issues/245。问题一样吗

以上是关于如何在 Flutter(Android 和 Ios)中实现与 WebRTC 的电话会议视频聊天的主要内容,如果未能解决你的问题,请参考以下文章

如何分别在android和ios上本地运行flutter应用程序?

Flutter:不使用AppBar时如何在Android和iOS上更改状态栏文本颜色[重复]

如何在 Flutter(Android 和 Ios)中实现与 WebRTC 的电话会议视频聊天

如何在开发过程中同时使用 Android 和 IOS 模拟器来测试我的 Flutter 应用程序?

如何从付费应用转换为应用内购买? iOS 和 Android + Flutter

如何使 Android 和 iOS 的 Flutter App 崩溃(以测试 Firebase Crashlytics)?