我正在尝试在 Android 和 Ios 的 flutter 中使用 WebRTC 实现会议视频通话,现在无法找到使用 webRTC 进行用户会议视频聊天的任何解决方案
在构建 Flutter WebRTC 应用程序时,
flutter_webrtc
包文档并不是非常广泛。
要使用 WebRTC 将音频/视频通信添加到 Flutter 应用程序,请添加依赖项:
flutter pub add flutter_webrtc
添加iOS权限: 将以下权限条目添加到位于
/ios/Runner/Info.plist的
Info.plist
文件中:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
添加Android权限: 要在 Android 上启用用户权限,请将以下内容添加到位于
/android/app/src/main/AndroidManifest.xml的
Android Manifest file
:
<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 等。
我们生成一个报价和一个答案来连接两个对等点。
您可以查看这个Flutter WebRTC综合指南来构建音频/视频通信应用程序。
尝试此包的以下示例https://pub.dev/packages/flutter_webrtc
对于 P2P,您需要一个服务器组件,可在 https://github.com/flutter-webrtc/flutter-webrtc-server
获取这是一个例子:
首先您需要添加此依赖项:
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()));
}),
];
}
}
要在 Android 和 iOS 版 Flutter 中使用 WebRTC 实现电话会议视频聊天,您需要集成 WebRTC 插件、设置通信信令并同时管理多个连接。使用 WebRTC 的点对点功能并维护中央服务器来协调参与者之间的连接。您还需要处理用于管理多个视频流的 UI 组件,并确保与 Android 和 iOS 平台的兼容性。