我试图实现视频会议与WebRTC在Android的Flutter& iOS现在无法找到任何解决方案,用户会议视频聊天使用WebRTC
qf9go6mv1#
在构建Flutter WebRTC应用程序时,flutter_webrtc包文档并不是很广泛。要使用WebRTC将音频/视频通信添加到Flutter应用程序,请添加依赖项:
flutter_webrtc
flutter pub add flutter_webrtc
为iOS添加权限:将以下权限项添加到Info.plist文件(位于 /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 Manifest file,位于 /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进行一些更改接下来,通过在屏幕上渲染本地用户开始:
build.gradle
然后,我们需要连接到远程用户并渲染他们的视频。为此,我们需要了解WebRTC是如何工作的。与之相关的术语如NAT(网络地址转换)、ICE(交互式连接建立)、STUN(会话遍历实用程序)、TURN等。我们生成一个报价和一个答案来连接两个对等体。
您可以查看此comprehensive guide on Flutter WebRTC以构建音频/视频通信应用程序。
jtjikinw2#
请尝试以下软件包示例https://pub.dev/packages/flutter_webrtc对于P2P,您将需要一个服务器组件,该组件位于https://github.com/flutter-webrtc/flutter-webrtc-server
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())); }), ]; } }
az31mfrm4#
我还使用了一个名为Ant Media的媒体服务器,它为我提供了一种构建SFU和MCU类型会议的简单方法,它们也非常容易集成Flutter,IOS,Android,React Native的SDK。
4条答案
按热度按时间qf9go6mv1#
在构建Flutter WebRTC应用程序时,
flutter_webrtc
包文档并不是很广泛。要使用WebRTC将音频/视频通信添加到Flutter应用程序,请添加依赖项:
为iOS添加权限:将以下权限项添加到
Info.plist
文件(位于 /ios/Runner/Info.plist 中):为Android添加权限:要在Android上启用用户权限,请将以下内容添加到
Android Manifest file
,位于 /android/app/src/main/AndroidManifest.xml:您还需要对
build.gradle
进行一些更改接下来,通过在屏幕上渲染本地用户开始:
然后,我们需要连接到远程用户并渲染他们的视频。为此,我们需要了解WebRTC是如何工作的。与之相关的术语如NAT(网络地址转换)、ICE(交互式连接建立)、STUN(会话遍历实用程序)、TURN等。
我们生成一个报价和一个答案来连接两个对等体。
您可以查看此comprehensive guide on Flutter WebRTC以构建音频/视频通信应用程序。
jtjikinw2#
请尝试以下软件包示例https://pub.dev/packages/flutter_webrtc
对于P2P,您将需要一个服务器组件,该组件位于https://github.com/flutter-webrtc/flutter-webrtc-server
i5desfxk3#
下面是一个例子:
首先,你需要添加这个依赖项:
然后:
az31mfrm4#
我还使用了一个名为Ant Media的媒体服务器,它为我提供了一种构建SFU和MCU类型会议的简单方法,它们也非常容易集成Flutter,IOS,Android,React Native的SDK。