我怎么能实现电话会议视频聊天与WebRTC在Flutter(Android & IOS)

nbnkbykc  于 2023-06-07  发布在  Flutter
关注(0)|答案(4)|浏览(610)

我试图实现视频会议与WebRTC在Android的Flutter& iOS现在无法找到任何解决方案,用户会议视频聊天使用WebRTC

qf9go6mv

qf9go6mv1#

在构建Flutter WebRTC应用程序时,flutter_webrtc包文档并不是很广泛。
要使用WebRTC将音频/视频通信添加到Flutter应用程序,请添加依赖项:

flutter pub add flutter_webrtc

为iOS添加权限:将以下权限项添加到Info.plist文件(位于 /ios/Runner/Info.plist 中):

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>

为Android添加权限:要在Android上启用用户权限,请将以下内容添加到Android Manifest file,位于 /android/app/src/main/AndroidManifest.xml

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

您还需要对build.gradle进行一些更改
接下来,通过在屏幕上渲染本地用户开始:

然后,我们需要连接到远程用户并渲染他们的视频。为此,我们需要了解WebRTC是如何工作的。与之相关的术语如NAT(网络地址转换)、ICE(交互式连接建立)、STUN(会话遍历实用程序)、TURN等。
我们生成一个报价和一个答案来连接两个对等体。

您可以查看此comprehensive guide on Flutter WebRTC以构建音频/视频通信应用程序。

jtjikinw

jtjikinw2#

请尝试以下软件包示例https://pub.dev/packages/flutter_webrtc
对于P2P,您将需要一个服务器组件,该组件位于https://github.com/flutter-webrtc/flutter-webrtc-server

i5desfxk

i5desfxk3#

下面是一个例子:
首先,你需要添加这个依赖项:

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()));
          }),
    ];
  }
}
az31mfrm

az31mfrm4#

我还使用了一个名为Ant Media的媒体服务器,它为我提供了一种构建SFU和MCU类型会议的简单方法,它们也非常容易集成Flutter,IOS,Android,React Native的SDK。

相关问题