投稿
  1. 首页
  2. 技术文章
  3. WebRTC

Flutter WebRTC详解(flutter webrtc接入)

webrtc学习和实践 • • WebRTC

WebRTC 是一种强大的工具，可以在 Web 浏览器之间进行实时通信，非常适合构建视频聊天应用程序等内容。但您可能不知道 WebRTC 还可以与 Flutter 框架一起使用来构建原生 iOS 和 Android 应用程序。

这篇文章将为您提供使用 Flutter WebRTC 的综合指南。我们将涵盖从设置开发环境到创建简单的视频聊天应用程序的所有内容。因此，如果您准备好开始使用 Flutter WebRTC，请继续阅读！

什么是Flutter？

Flutter 是一个移动应用程序 SDK，用于为 iOS 和 Android 构建高性能、高保真度的应用程序。Flutter 框架使您可以轻松构建用户界面，这些界面可以流畅地响应触摸、手势和其他输入事件。

此外，Flutter 框架提供了一组丰富的 Material Design 小部件和功能来支持动画和图形。

什么是 Flutter-WebRTC？

Flutter-WebRTC 是 Fl​​utter 框架的插件，支持构建具有实时视频和音频调用功能的 Web 应用程序。

使用 Flutter-WebRTC，您可以轻松构建视频通话应用程序，而无需处理底层技术的复杂性。

Flutter-WebRTC 是如何工作的？

Flutter-WebRTC 使用 W3C WebRTC API 和组件允许开发人员构建跨平台的视频通话应用程序。该插件处理所有繁重的工作，因此您可以专注于构建您的应用程序。

处理错误和调试您的应用程序

如果您在使用 Flutter-WebRTC 插件时遇到任何错误，您可以查看该插件的 GitHub 页面以了解已知问题和解决方案。

您还可以启用调试日志记录以帮助对您的应用程序进行故障排除。要启用调试日志记录，您需要创建 WebrtcLog 类的新实例：

WebrtcLog _webrtcLog；

然后，您可以使用 WebrtcLog 方法来启动和停止日志记录：

_webrtcLog = WebrtcLog(onMessage: (String message) {});
await _webrtcLog.start();
// To stop logging:
await _webrtcLog.stop();

WebrtcLog 类为生成日志消息时提供回调方法。您可以使用此回调在应用的 UI 中显示日志消息。

使用信令服务器

要建立 WebRTC 连接，对等方需要交换信令数据。此数据通常包括诸如会话描述和 ICE 候选者之类的信息。

Flutter-WebRTC 插件不提供信令服务器，因此您需要自己实现才能使用该插件。您可以使用多种开源信令服务器，也可以使用您喜欢的任何编程语言实现自己的信令服务器。

实现信令服务器后，您可以使用 WebrtcPeerConnection 方法连接和断开连接：

_webrtcPeerConnection = WebrtcPeerConnection(
    onSignalingStateChange: (SignalingState state) {},
    onIceGatheringStateChange: (IceGatheringState state) {},
    onIceConnectionStateChange: (IceConnectionState state) {},
);
await _webrtcPeerConnection.connect("ws://localhost:8080");
// To disconnect from the signaling server:
await _webrtcPeerConnection.disconnect();

WebrtcPeerConnection 类提供了信令状态、ICE 收集状态和 ICE 连接状态更改时的回调方法。您可以使用这些回调来相应地更新应用程序的 UI。

Flutter-WebRTC 高级特性

Flutter-WebRTC 插件提供了许多高级功能，您可以使用它们来创建更复杂的应用程序。

数据通道

除了音频和视频数据，您还可以使用数据通道在对等点之间发送任意数据。数据通道对于文件共享、游戏和实时数据交换应用程序很有用。

要创建数据通道，您需要创建 WebrtcDataChannel 类的新实例：

WebrtcDataChannel _dataChannel;

然后，您可以使用 WebrtcDataChannel 方法连接和断开数据通道：

_dataChannel = WebrtcDataChannel(
    id: "channel_id",
    label: "channel_label",
    onStateChange: (DataChannelState state) {},
);
await _dataChannel.connect();
// To disconnect from the data channel:
await _dataChannel.disconnect();

WebrtcDataChannel 类提供了数据通道状态更改时的回调方法。您可以使用此回调相应地更新应用程序的 UI。

截屏

Flutter-WebRTC 插件支持 Android 和 iOS 屏幕捕获。屏幕捕获允许您与其他同行共享您的整个屏幕或特定窗口。

要开始屏幕捕获，您需要创建 WebrtcScreenCapturer 类的新实例：

WebrtcScreenCapturer _screenCapturer;

然后，您可以使用 WebrtcScreenCapturer 方法开始和停止捕获屏幕：

_screenCapturer = WebrtcScreenCapturer(onFrame: (Bitmap bitmap) {});
await _screenCapturer.initialize();
await _screenCapturer.start();
// To stop capturing your screen:
await _screenCapturer.stop();

WebrtcScreenCapturer 类提供了捕获帧时的回调方法。您可以使用此回调相应地更新应用程序的 UI。

使用WebRTC

首先，在您的 IDE 或文本编辑器中创建一个新的 Flutter 项目。对于这个例子，我们将我们的项目称为“webrtc_example”。

接下来，打开项目中的 pubspec.yaml 文件并添加以下依赖项：

““ dependencies: flutter: SDK: flutter webrtc_plugin: ^0.2.1 ““

webrtc_plugin 包将使我们能够访问 Flutter 中的 WebRTC API。安装后，我们现在可以开始编写一些代码。

在 main.dart 文件中，导入 webrtc_plugin 包并创建一个名为 _WebRTCExampleState 的新类，它扩展了 StatelessWidget：

import 'package:dyte_client/dyte.dart';
import 'package:dyte_client/dyteMeeting.dart';

class _WebRTCExampleState extends StatelessWidget {
    @override

    Widget build(BuildContext context) {

        return Scaffold(

            appBar: AppBar(

                title: Text('WebRTC Example'),

            ),

            body: Center(

                child: Text('Hello World'),

            ),

        );

    }

}

在 _WebRTCExampleState 类中，我们首先需要创建一个 Widget 来呈现我们的视频源。对于这个例子，我们将使用一个简单的容器小部件。将以下代码添加到 _WebRTCExampleState 类：

Widget _videoView() {
    return Container();
}

现在我们有了一个地方来呈现我们的视频提要，让我们设置一种捕获它的方法。将以下代码添加到 _WebRTCExampleState 类：


Future & #60;bool&# 62;
_initVideoCapturer() async {
    final Map & #60;String, dynamic&# 62;
    response = await WebRTC.initialize(options: {
        "audio": true,
        "video": true
    });
    if (response["success"]) {
        final List & #60;dynamic&# 62;
        devices = await WebRTC.getMediaDevices();
        for (var device in devices) {
            if (device["kind"] == "videoInput") {
                final Map & #60;String, dynamic&# 62;
                constraints = {
                    "facingMode": "user",
                    "mandatory": {
                        "minWidth": '640',
                        "minHeight": '480'
                    }
                };
                await WebRTC.selectDevice(deviceId: device["deviceId"], constraints: constraints);
            }
        }
        return true;
    } else {
        return false;
    }
}

此代码初始化 WebRTC 插件，然后枚举可用的媒体设备。然后它使用我们指定的约束设置视频捕获器。这些限制确保视频源的质量足以满足我们的目的。

设置 Flutter-WebRTC 项目

以下是如何设置 Flutter-Webrtc 项目：

1. 安装 Flutter 并创建一个新项目

您需要做的第一件事是安装 Flutter。您可以按照 Flutter 官方网站上的说明执行此操作。

安装 Flutter 后，您可以通过运行以下命令来创建一个新项目：

flutter create <project_name>.

这将创建一个具有指定名称的新 Flutter 项目。

2. 添加必要的 WebRTC 依赖项

接下来，您需要将必要的 Webrtc 依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
flutter:
SDK: flutter
webrtc_plugin: ^0.2.0+1

这将确保您拥有最新版本的 Webrtc 依赖项。

3. 使用 Flutter-WebRTC 进行基本调用

现在您已经有了一个 Flutter-Webrtc 项目，您可以开始构建您的应用程序了。

要进行基本调用，您必须创建 WebrtcCall 类的新实例：WebrtcCall _call;

然后，您可以使用 WebrtcCall 方法与远程对等方建立连接并发送和接收视频和音频数据

_call = WebrtcCall(
    onSignalingStateChange: (SignalingState state) {},
    onPeersUpdate: (List & #60;dynamic&# 62; peers) {},
    onLocalStream: (MediaStream stream) {},
    onAddRemoteStream: (MediaStream stream) {},
    onRemoveRemoteStream: (MediaStream stream) {},
);
await _call.makeCall('remote_peer_id');

WebrtcCall 方法为信令状态更改时、对等点列表更新时以及添加或删除本地和远程流时提供回调。您可以使用这些回调来相应地更新应用程序的 UI。

4. 与远程对等点建立连接

要与远程对等方建立连接，您需要创建 WebrtcSignaling 类的新实例：WebrtcSignaling _signaling;

然后，您可以使用 WebrtcSignaling 方法连接到信令服务器并与远程对等方建立连接：

_signaling = WebrtcSignaling(
    onStateChange: (SignalingState state) {},
    onPeersUpdate: (List & #60;dynamic&# 62; peers) {},
);
await _signaling.connect('ws://localhost:1234/ws');
await _signaling.call('remote_peer_id');

WebrtcSignaling 类为信号状态更改和对等点列表更新时提供回调方法。您可以使用这些回调来相应地更新应用程序的 UI。

5. 发送和接收视频和音频数据

与远程对等方建立连接后，您就可以开始发送和接收视频和音频数据。

要发送视频数据，您需要创建一个新的 WebrtcVideoCapturer 类实例：

WebrtcVideoCapturer_videoCapturer;

然后，您可以使用 WebrtcVideoCapturer 方法开始和停止捕获视频：

_videoCapturer = WebrtcVideoCapturer();

await _videoCapturer.initialize();
await _videoCapturer.startCapture( & #60;MediaStreamConstraints&# 62;
    []);

// To stop capturing video:
await _videoCapturer.stopCapture();

WebrtcVideoCapturer 类提供了视频捕获状态变化的回调方法。您可以使用此回调相应地更新应用程序的 UI。

要发送音频数据，您需要创建一个新的 WebrtcAudioCapturer 类实例：

WebrtcAudioCapturer_audioCapturer;

然后，您可以使用 WebrtcAudioCapturer 方法开始和停止捕获音频

_audioCapturer = WebrtcAudioCapturer();

await _audioCapturer.initialize();
await _audioCapturer.startCapture( & #60;MediaStreamConstraints&# 62;
    []);

// To stop capturing audio:
await _audioCapturer.stopCapture();

WebrtcAudioCapturer 类提供了音频捕获状态更改时的回调方法。您可以使用此回调相应地更新应用程序的 UI。

要接收视频和音频数据，您需要创建一个新的 WebrtcMediaStream 类实例：

WebrtcMediaStream _mediaStream;

然后，您可以使用 WebrtcMediaStream 方法开始和停止接收视频和音频数据：

_mediaStream = WebrtcMediaStream(onAddRemoteStream: (MediaStream stream) {}, onRemoveRemoteStream: (MediaStream stream) {});

await _mediaStream.initialize();
await _mediaStream.start();

// To stop receiving video and audio data:
await _mediaStream.stop();

WebrtcMediaStream 类为添加或删除远程流时提供回调方法。您可以使用此回调相应地更新应用程序的 UI。

在 iOS 上访问相机和麦克风

要在 iOS 上访问摄像头和麦克风，您需要将以下键添加到您的 Info.plist 文件中：

NSMicrophoneUsageDescription – 描述为什么你的应用需要访问麦克风

NSCameraUsageDescription – 描述您的应用需要访问相机的原因

您还需要将以下键添加到您的 Info.plist 文件中：io.flutter.embedded_views_preview – 将此键设置为 true

Android 清单文件更改要在 Android 上使用 Flutter-WebRTC 插件，您需要对 AndroidManifest.xml 文件进行以下更改：

添加以下权限：

<uses-permission android:name="android.permission.RECORD_AUDIO" >
<uses-permission android:name="android.permission.CAMERA" />
Add the following uses-feature elements:

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Flutter-WebRTC 演示示例

下面是如何使用 Flutter-WebRTC 插件的完整示例：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {

        return MaterialApp(

            home: MyHomePage(),

        );

    }
}
class MyHomePage extends StatefulWidget {

    @override

    _MyHomePageState createState() => _MyHomePageState();

}
class _MyHomePageState extends State & #60;MyHomePage&# 62; {

    WebrtcPlugin _webrtcPlugin = WebrtcPlugin();

    Widget _videoView;

    Widget _switchCameraButton;

    bool _isFrontCamera = true;

    void _onVideoViewCreated(FlutterNativeView view) {

        setState(() {

            this._videoView = view;

        });
    }
    void _initWebrtcPlugin() async {

        await this._webrtcPlugin.initialize();

        await this._webrtcPlugin.enableVideo();

        await this._webrtcPlugin.enableAudio();
    }
    void _startCall() async {

        String id = "call1";

        await this._webrtcPlugin.startCall(id);
    }
    void _endCall() async {

        String id = "call1";

        await this._webrtcPlugin.endCall(id);
    }
    void _switchCamera() async {

        this._isFrontCamera = !this._isFrontCamera;

        await this._webrtcPlugin.switchCamera();
    }
    Widget build(BuildContext context) {

        this._initWebrtcPlugin();

        if (this._videoView == null) {

            return Scaffold(

                appBar: AppBar(

                    title: const Text('Flutter-WebRTC Demo'),
                ),
                body: Center(

                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: & #60;Widget&# 62;
                        [
                            RaisedButton(
                                onPressed: this._startCall,
                                child: Text("Start Call"), ),
                            SizedBox(height: 10.0),
                            RaisedButton(
                                onPressed: this._endCall,
                                child: Text("End Call"), ),
                        ],

                    ),
                ),

            );

        } else {

            return Scaffold(

                appBar: AppBar(

                    title: const Text('Flutter-WebRTC Demo'),
                ),
                body: Center(

                    child: Stack(

                        children: & #60;Widget&# 62;
                        [
                            this._videoView,
                            Positioned(
                                bottom: 0.0,
                                right: 0.0,
                                child: Container(
                                    child: Row(
                                        children: & #60;Widget&# 62;
                                        [
                                            this._switchCameraButton ?? Container(),
                                        ],

                                    ),

                                ),

                            ),
                        ],

                    ),
                ),

            );

        }
    }
}

后记：

如果您需要非常轻松地将实时视频和语音通话功能添加到您的 Flutter 应用程序中。可通过集成第三方flutter音视频sdk来实现，推荐阅读。

本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/webrtc/7808.html

赞 (2)
webrtc学习和实践的头像webrtc学习和实践认证作者
0 0

相关推荐

发表回复

登录后才能评论