如何将 WebRTC Web应用无缝集成到 Flutter WebView 中

WebRTC （Web Real-Time Communication）是一个开源框架和协议套件，可实现浏览器、移动应用程序或其他设备之间的实时点对点通信。它主要用于音频/视频通话、屏幕共享和数据传输等任务，无需中间服务器。

本文将分享如何把 WebRTC Web 应用无缝集成到 Flutter WebView 中。

步骤1：创建 Flutter 应用程序

假设您已经设置好环境，请在终端运行以下命令。

flutter create my_webrtc_app

步骤2：安装重要的 Flutter 插件：

运行：

flutter pub add permission_handler webview_flutter flutter_inappwebview

您需要编辑 iOS 的 info.plist 文件和 Android 的清单文件，以申请使用设备麦克风和摄像头的权限。

对于 Android（在 android/app/src/main/AndroidManifest.xml 中）：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />

对于 iOS（iOS/Runner/info.plist中）：

<key>NSCameraUsageDescription</key>
<string>We need access to your camera for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for audio calls</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library for saving media.</string>

步骤3：创建一个呼叫屏幕（call_sreen.dart），并添加以下几行来处理权限：

import 'package:permission_handler/permission_handler.dart';

class _CallScreenState extends State<CallScreen> {
.......
  @override
  void initState() {
    super.initState();
    _checkPermissions();
  }

  Future<void> _checkPermissions() async {
    // 请求摄像头和麦克风的权限
    await [
      Permission.camera,
      Permission.microphone,
    ].request();
  }

  .......
}

呼叫屏幕的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:rigour_os/modules/dashboard/dashboard.dart';
import 'package:rigour_os/state/riverpop/visit_history_provider.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class CallScreen extends StatefulWidget {
  final String url;

  const CallScreen({
    super.key,
    required this.url,
  });

  @override
  State<CallScreen> createState() => _CallScreenState();
}

class _CallScreenState extends State<CallScreen> {
  bool isLoading = true;
  late InAppWebViewController webViewController;

  @override
  void initState() {
    super.initState();
    _checkPermissions();
  }

  Future<void> _checkPermissions() async {
    // 请求摄像头和麦克风的权限
    await [
      Permission.camera,
      Permission.microphone,
    ].request();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Back",
            style: TextStyle(
                fontSize: 12, color: Color.fromARGB(255, 133, 114, 114))),
        backgroundColor: const Color.fromARGB(255, 255, 255, 255),
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back, // 或您想要的任何其他图标
            size: 16,
            color: Color.fromARGB(255, 152, 140,
                140), // 更改此值以设置图标的大小
          ),
          onPressed: () {
            // 定义按下按钮时的操作（可选）
            Navigator.pop(context);
          },
        ),
        titleSpacing: 0,
      ),
      body: SafeArea(
        child: Stack(
          children: [
            InAppWebView(
              initialUrlRequest:
                  URLRequest(url: WebUri(widget.url)), // 转换为 WebUri
              onWebViewCreated: (controller) {
                webViewController = controller;
              },
              initialSettings: InAppWebViewSettings(
                // 使用 initialSettings
                mediaPlaybackRequiresUserGesture: false,
                allowsInlineMediaPlayback: true,
              ),
              androidOnPermissionRequest:
                  (controller, origin, resources) async {
                // 自动授予摄像头/麦克风权限
                return PermissionRequestResponse(
                  resources: resources,
                  action: PermissionRequestResponseAction.GRANT,
                );
              },
              onLoadStart: (controller, url) {
                setState(() {
                  isLoading = true;
                });
              },
              onLoadStop: (controller, url) async {
                setState(() {
                  isLoading = false;
                });
              },
            ),
            if (isLoading)
              const Center(
                child: CircularProgressIndicator(),
              ),
          ],
        ),
      ),
    );
  }
}

使用以下命令运行应用：