Flutter屏幕流媒体插件screen_streamer的使用

简介

screen_streamer 是一个利用 flutter_webrtc 包实现屏幕共享的 Flutter 插件。该插件的灵感来源于一个已关闭的 Flutter Issue。

该插件支持所有 Flutter 平台，包括 Web，但目前仅在 Android、iOS、MacOS 和 Web 上进行了测试。

该插件提供了两个示例：一个用于发送屏幕（发送示例），另一个用于接收屏幕（接收示例）。

请注意，此库在模拟器或模拟设备上无法工作，因为底层框架不存在。必须使用物理设备来使用此框架。

配置

Android

在 Android 上，您必须添加三个权限：

1. android.permission.ACCESS_NETWORK_STATE
2. android.permission.FOREGROUND_SERVICE
3. android.permission.SCHEDULE_EXACT_ALARM

接下来，在 <application> 标签内，您必须添加以下服务：

<service android:name="id.flutter.flutter_background_service.BackgroundService"
    android:foregroundServiceType="mediaProjection"
    android:enabled="true"
    android:exported="false"
    tools:replace="android:exported" />

您的 AndroidManifest.xml 文件现在将类似于：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.sender">

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />

    <application
        android:label="sender"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme"
            />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to
        generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />

        <service android:name="id.flutter.flutter_background_service.BackgroundService"
            android:foregroundServiceType="mediaProjection"
            android:enabled="true"
            android:exported="false"
            tools:replace="android:exported" />

    </application>
</manifest>

iOS

对于 iOS，无需进行特殊配置。

MacOS

在 Xcode 中打开您的 macOS 工作区，并为所有构建模式启用网络权限：

• Incoming Connections (Server)
• Outgoing Connections (Client)

Linux

对于 Linux，没有已知的特殊配置需求。

Web

对于 Web，没有已知的特殊配置需求。

Windows

对于 Windows，没有已知的特殊配置需求。

使用

发送

要将屏幕发送到远程接收者，您可以使用 ScreenSender 类。

final sender = ScreenSender();
await sender.connect(
  Uri.parse(_controller.text),
  context: context,
);

接收

要接收远程发送的屏幕，您可以使用 ScreenReceiver 类以及 RemoteScreenRenderer。

import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:screen_streamer/screen_streamer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Receiver',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScreenReceiver _receiver = ScreenReceiver();

  bool _connected = false;

  [@override](/user/override)
  void initState() {
    super.initState();

    _receiver.listen().then((value) {
      _connected = true;
      if (mounted) {
        setState(() {});
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_connected ? 'Connected' : 'Waiting'),
      ),
      body: _connected
          ? RemoteScreenRenderer(receiver: _receiver)
          : Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  const CircularProgressIndicator(),
                  FutureBuilder(
                    builder: (context, snapshot) => snapshot.hasData
                        ? Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: Text(snapshot.data.toString()),
                          )
                        : const SizedBox(),
                    future: _receiver.uri,
                  ),
                ],
              ),
            ),
    );
  }
}