grypp_sdk_flutter 0.0.1

A custom React Native library that enables seamless screen sharing from mobile (iOS or Android) to a web-based PlayConsole. It features secure session management, real-time screen sharing streaming, a [...]

Installation

flutter pub add grypp_sdk_flutter

Overview

grypp_sdk_flutter is a Flutter plugin designed for secure screen sharing between a mobile app and a web-based PlayConsole. It provides seamless session connectivity, privacy-first real-time streaming, and interactive tools such as live drawing and remote cursor access. With user-centric controls, both the app user and remote agent can initiate, pause, or terminate sessions at any point.

Features

• 🔐 Secure screen sharing between mobile and web
• ✍️ Real-time marker annotations
• 🖱️ Live agent cursor interaction
• 🎮 Session lifecycle control (start/stop)
• 📱 Fully optimized for mobile and tablet (iOS & Android)

Example Usage

import 'package:grypp_sdk_flutter/GryppTokManager.dart';

final _gryppManager = GryppTokManager();
bool sessionStatus = false;

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

  _gryppManager.listenToSessionUpdates(
    onEvent: (event) {
      print("Event received in widget: $event");
      final status = event["status"];
      setState(() {
        if (status == 'Connected') {
          print(status);
        } else if (status == 'Publish') {
          sessionStatus = true;
        } else if (status == 'Disconnected' || status == 'Disconnect') {
          sessionStatus = false;
        }
      });
    },
  );
}

enum ButtonName {
  GRYPP("GRYPP"),
  CAPTURING_SCREEN("CAPTURING SCREEN");

  final String label;
  const ButtonName(this.label);
}

Future<void> connectToGryppSession() async {
  try {
    await _gryppManager.connectSession(
      sessionStatus
        ? ButtonName.CAPTURING_SCREEN.label
        : ButtonName.GRYPP.label,
    );
    print("Session connected successfully");
  } catch (e) {
    print("Error: $e");
  }
}

// Trigger this function on button tap:
connectToGryppSession();

iOS Installation

Ensure Info.plist includes the following permissions:

<key>NSCameraUsageDescription</key>
<string>This app requires camera access to enable screen sharing.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires microphone access for voice during screen sharing.</string>

Android Installation

1. Update your app's Gradle configurations to meet the minimum requirements for react-native-sharescreengrypp.

2. Create MainActivity.kt:

import com.sharescreengrypp.BaseActivity

class MainActivity : BaseActivity() {
  override fun getMainComponentName(): String = "grypp"
  override fun createReactActivityDelegate(): ReactActivityDelegate =
    DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

3. Modify MainApplication.kt:

import com.sharescreengrypp.Grypp

override fun getPackages(): List<ReactPackage> =
  PackageList(this).packages.apply {
    add(ScreenShareBridgePackage())
  }

override fun onCreate() {
  super.onCreate()
  Grypp.initialize(this, "grypp_live_xK2P9M7a1LqVb3Wz6JtD4RfXyE8Nc0Q5")
}

4. In settings.gradle:

include ':react-native-sharescreengrypp'
project(':react-native-sharescreengrypp').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sharescreengrypp/android')

5. In app/build.gradle:

dependencies {
  implementation "com.github.bharatKumawatds:ShareScreenGrypp:12.0.0"
  implementation project(':react-native-sharescreengrypp')
}

Floating Button Integration

Use the custom Grypp floating button for initiating screen sharing via FloatingButtonManager.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:grypp_sdk_flutter_example/Helper/Helper.dart';

class GlobalOverlayButton {
  static final GlobalOverlayButton _instance = GlobalOverlayButton._internal();
  factory GlobalOverlayButton() => _instance;

  OverlayEntry? _entry;
  Offset _positionAndroid = Offset(200, 600);
  late Offset _positionIOS;

  GlobalOverlayButton._internal() {
    _positionIOS = Offset.zero;
  }

  void show(BuildContext context, VoidCallback onTap, {String label = ""}) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;

    _positionIOS = Offset(
      (_positionIOS.dx == 0) ? width - 200 : _positionIOS.dx,
      (_positionIOS.dy == 0) ? height - 100 : _positionIOS.dy,
    );

    if (_entry != null) {
      _entry!.markNeedsBuild();
      return;
    }

    _entry = OverlayEntry(
      builder: (context) => Positioned(
        left: Platform.isAndroid ? _positionAndroid.dx : _positionIOS.dx,
        top: Platform.isAndroid ? _positionAndroid.dy : _positionIOS.dy,
        child: Draggable(
          feedback: _buildButton(onTap, label),
          childWhenDragging: const SizedBox.shrink(),
          onDragEnd: (details) {
            final screenWidth = MediaQuery.of(context).size.width;
            final screenHeight = MediaQuery.of(context).size.height;
            final buttonWidth = label == ButtonName.GRYPP.label ? 80.0 : 180.0;
            final buttonHeight = 40.0;

            double newDx = details.offset.dx.clamp(0.0, screenWidth - buttonWidth);
            double newDy = details.offset.dy.clamp(0.0, screenHeight - buttonHeight);

            if (Platform.isAndroid) {
              _positionAndroid = Offset(newDx, newDy);
            } else {
              _positionIOS = Offset(newDx, newDy);
            }

            _entry!.markNeedsBuild();
          },
          child: GestureDetector(
            onTap: onTap,
            child: _buildButton(onTap, label),
          ),
        ),
      ),
    );

    Overlay.of(context, rootOverlay: true)?.insert(_entry!);
  }

  void remove() {
    _entry?.remove();
    _entry = null;
  }

  Widget _buildButton(VoidCallback onTap, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          height: 40,
          width: label == ButtonName.GRYPP.label ? 80 : 180,
          child: FloatingActionButton(
            onPressed: onTap,
            backgroundColor: Color.fromRGBO(27, 84, 170, 1.0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            ),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              child: Text(
                label,
                style: const TextStyle(color: Colors.white, fontSize: 14),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

// In main.dart MaterialApp
navigatorKey: GlobalKey<NavigatorState>(),

// Before returning Scaffold:
WidgetsBinding.instance.addPostFrameCallback((_) {
  GlobalOverlayButton().show(
    context,
    () {
      debugPrint("Global button tapped");
      if (Platform.isIOS) Globalactivityindicator().show(context);
      connectToGryppSession();
    },
    label: sessionStatus
      ? ButtonName.CAPTURING_SCREEN.label
      : ButtonName.GRYPP.label,
  );
});

Author

Created with ❤️ by [dotsquares395]

License: Available under the MIT license. See the [LICENSE] file for details.

© 2024 Dotsquares Ltd.