https://github.com/V-m1r/KinesteXSDK/assets/62508191/a796a98c-55c4-42d5-8ecd-731d2997e488

Configuration

AndroidManifest.xml

Add the following permissions for camera and microphone usage:

<!-- Add this line inside the <manifest> tag -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />

Info.plist

Add the following keys for camera and microphone usage:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for video streaming.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for video streaming.</string>

Add the following dependencies to pubsec.yaml:


permission_handler: ^9.0.0
flutter_inappwebview: ^5.3.2

Available categories to sort plans (param key is planC):

Plan Category (key: planC)
Strength
Cardio
Rehabilitation

Available categories and sub categories to sort workouts:

Category (key: category)
Fitness
Rehabilitation

WebView Camera Access in Flutter with KinesteX AI

This guide provides a detailed walkthrough of the Flutter code that integrates a web view with camera access and communicates with KinesteX.

Initial Setup

  1. Prerequisites:

    • Ensure you've added the necessary permissions in your AndroidManifest.xml and Info.plist for both Android and iOS respectively.
    • Add the required dependencies in your pubspec.yaml.

  2. App Initialization:

    • Before Starting KinesteX, please initialize essential widgets.
    • Then checks and request for camera permission. In the demo code if permission is granted, the main application (MyApp()) runs, else it prints "Permission not granted".
    // similarly on button click you may check for permission before launching KinesteX. Please ensure you handle camera permissions accordingly
if (await Permission.camera.request() == PermissionStatus.granted) {
    runApp(MyApp());
}

Main App Structure

  • The core of the app is MyApp which sets the MyHomePage as the home.

Example code: https://github.com/V-m1r/KinesteXSDK/blob/main/Flutter_SDK/lib/main.dart

Home Page Overview

  1. State Initialization:

    • In _MyHomePageState, there's a setup of post data with required parameters like userId, company, and key.
    • The initState() method initializes controllers for each post data entry and sets web view options.
    postData.forEach((key, value) {
    controllers[key] = TextEditingController(text: value);
});

  2. Building the UI:

    • The main UI is a Scaffold widget. Depending on the showWebview state, it either displays an InAppWebView or a data modification interface.
    • If showWebview is true, the web view is displayed. This web view starts by loading a specified URL. JavaScript handlers are added to enable communication between the Flutter app and the web content.

  3. Message Handling with handleMessage:

    • This function is essential for processing messages received from the web content.
    • It decodes the incoming message, and based on the message type, different actions are taken, and the workoutLogs list is updated.

Certainly! Let's delve deeper into the handleMessage and postMessage mechanisms within the context of the provided code.

handleMessage Function:

The handleMessage function is crucial for interpreting and acting upon messages received from the web content. These messages are primarily generated by the KinesteX embedded within the WebView.

Function Breakdown:

  1. Parsing the Message:

    var parsedMessage = jsonDecode(message);

    This line decodes the incoming JSON message into a Dart object so that its properties (like 'type' and 'data') can be accessed directly.

  2. Switch Statement on Message Type: The core of the handleMessage function is a switch statement that checks the type property of the parsed message. Each case corresponds to a different type of action or event that occurred in KinesteX.

    • kinestex_launched: Logs when KinesteX is successfully launched.
    • workout_opened: Logs when a workout is opened.
    • workout_started: Logs when a workout is started.
    • plan_unlocked: Logs when a user unlocks a plan.
    • finished_workout: Logs when a workout is finished.
    • error_occured: Logs when there's an error. (Coming soon)
    • exercise_completed: Logs when an exercise is completed.
    • exitApp: Logs when the KinesteX window is closed and sets the showWebview to false, which will hide the WebView.
    • default: For all other message types, it just logs the received type and data.

    Each log entry is added to the workoutLogs list, which can be viewed through the app's interface.

postMessage Mechanism:

The postMessage mechanism allows the Flutter app to send data to the web content. It's a standard method for web pages to communicate with each other, and it's also a way for embedded web content (like in a WebView) to communicate with the parent application.

Mechanism Breakdown:

  1. Setting up the Message:

    window.postMessage(${jsonEncode(postData)}, '*');

    Here, the postData map, which contains key-value pairs of data (like userId, category, company, etc.), is encoded into a JSON string and then posted to the web content.

  2. Setting up a Listener in WebView:

    window.addEventListener('message', (event) => {
  if (event.data === 'exitApp') {
    window.flutter_inappwebview.callHandler('exitApp');
  } else {
    window.flutter_inappwebview.callHandler('messageHandler', event.data);
  }
});

    This JavaScript code adds an event listener to the web content. Whenever the web content posts a message (using its own postMessage), this listener picks it up. If the data is 'exitApp', it calls the 'exitApp' handler. For all other data, it calls the 'messageHandler', which in turn triggers the handleMessage function in the Flutter code.

User Interface Overview

  1. WebView Interface:

    • When showWebview is true, the app displays the InAppWebView.
    • It's set up to listen for messages, handle loading errors, progress updates, console messages, and also to manage permission requests on Android.

  2. Form Interface:

    • When showWebview is false, the app provides a form-like interface.
    • You can view and modify post data entries.
    • There are buttons to add new parameters, start the web view, and view the logs.
    • Clicking "Logs" brings up a bottom sheet displaying all the logs captured during the session.

What to keep in mind:

  1. For best feedback please share with us as much info about user as possible:

    • If you can share user's weight, height, and age that would greatly help us recommend the best plans.
    • You can also specify the plans for the user yourselves by choosing the appropriate planC value or recommending workouts through category parameter.

  2. Make sure to use correct secret key and company name when openeing the webview

Conclusion

This Flutter implementation integrates the KinesteX AI within a web view and maintains a logging system for all activities. Proper permission handling is crucial, and it's ensured the camera permission is granted before the app runs. The handleMessage function is central to the app's functionality, processing all communications from the web content and updating the logs accordingly. This provides a comprehensive record of user interactions with KinesteX AI.

Libraries

kinestex_sdk_flutter
models/index
models/plan_category
models/work_out_category