screen_streamer

Description:

screen streamer

screen_streamer #


Table of Contents

Introduction
Setup

Android
iOS
MacOS
Linux
Web
Windows


Usage

Sending
Receiving





Introduction #
A package that utilizes the super awesome flutter_webrtc package to be able to send the screen from one device to another. The package was inspired by a closed Flutter Issue.
This is compatible with all Flutter platforms, including Web, but has only been tested on Android, iOS, MacOS, and Web.
This package provides two examples. One to send the screen and the other to receive the screen.
As a note, this library will not work on simulators or emulators as the underlying frameworks don't exist. You must use a physical device when using this framework.

Setup #
Android #
On Android, you must add three permissions:

android.permission.ACCESS_NETWORK_STATE
android.permission.FOREGROUND_SERVICE
android.permission.SCHEDULE_EXACT_ALARM

Next, within the application tag, you must add the following service:
<service android:name="id.flutter.flutter_background_service.BackgroundService"
android:foregroundServiceType="mediaProjection"
android:enabled="true"
android:exported="false"
tools:replace="android:exported" />
copied to clipboard
Your AndroidManifest.xml file will now look similar to:
<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>
copied to clipboard
iOS #
No special configuration needed for iOS

MacOS #
Open your macOS workspace in Xcode and enable both of the network permissions fro all build modes:

Incoming Connections (Server)
Outgoing Connections (Client)


Linux #
No known special configuration needed for Linux

Web #
No known special configuration needed for Web

Windows #
No known special configuration needed for Windows

Usage #
Sending #
To send a screen to a remote listener, you can utilize the ScreenSender class.

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

copied to clipboard

Receiving #
To send a screen to a remote listener, you can utilize the ScreenReceiver
class along with the 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
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
State<MyHomePage> createState() => _MyHomePageState();
}

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

bool _connected = false;

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

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

@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,
),
],
),
),
);
}
}


copied to clipboard