How to cast app screen/mirror screen to chromecast - flutter

I want to cast my app screen on chromecast. I have implemented the casting function using the package:
https://pub.dev/packages/flutter_video_cast
however it casts only videos from url as it uses the following code to load media:
await _controller.loadMedia('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
So how can I pass my app screen as media source.
Thanks

I am not sure if and how exactly this will work, but worth a try -
Host an HTTP server on your mobile device (or perhaps HTTPS might be necessary for chromecast).
You can get the device IP using the wifi_info_flutter package.
Record the widget (the top-level widget for casting the app). You can use the widget_recorder package for this. It can return image byte data periodically.
You can serve the above image byte data stream somehow, serving a single image is easy but I am not sure about stream data.
Use _controller.loadMedia('http://deviceip:port/appscreen').

Related

How to fetch an image in the Live Activity (ActivityKit) - SwiftUI

Is it possible to load an image from remote in the Live Activity using ActivityKit? I tried various different methods, but none of them are working including:
AsyncImage
Pre-fetching the image in the App and passing that image to Activity as a Data through the context when starting the activity and converting Data back to the Image
I assume you hit the 4KB size limit the docs warn us about.
We are not allowed to make network requests from inside Live Activity widgets, thus the only viable option you have is downloading the image in the App.
Depending on the type of image you use, I advise you find some way to reduce their size by either downscaling, using vectors etc.
Good luck!
I managed to share images from my main app to the Live Activity or Dynamic Island via Core Data.
However for some reason it works fine on Simulator but it doesn't work at all on real device.
The Live activity starts without error, but it doesn't appear on Lock Screen as well as the Dynamic Island.
Sharing an Array of Data containing images, looks like resulting in an error while starting the Activity.
So I really have no clue at this point.

Configure flutter web app to broadcast data to any subscribed listeners with sse

I am currently developing a flutter web app, and would like to implement a feature to broadcast json data to any listeners/subscribers.
To give more detail:
The web app has a flutter front end server running on localhost. A user will be able to fetch some JSON data from an external backend server using a simple GET request.
Once the app has loaded the JSON data, it will need to broadcast it down an SSE stream to any listeners. This listener will be a seperate flutter application.
Now, I understand that there a few problems with this.
Firstly, Flutter web doesn't support dart:io... Fine - I have managed to get round this by using the universal_io dart package instead of dart:io. The api is the same, and after solving a few CORS errors, works a charm for the GET requests in the first bullet above. This means that the json data can be successfully loaded into the Flutter app.
(universal_io dart package -> https://pub.dev/packages/universal_io).
The next issue is with SSE. Part one of this is that there is not much documentation on implementing an SSE server in Flutter - only a client that can listen. However, I have managed to find a solution in the sse dart package example app...
import 'package:shelf/shelf_io.dart' as io;
import 'package:sse/server/sse_handler.dart';
/// A basic server which sets up an SSE handler.
///
/// When a client connnects it will send a simple message and print the
/// response.
void main() async {
var handler = SseHandler(Uri.parse('/sseHandler'));
await io.serve(handler.handler, 'localhost', 0);
var connections = handler.connections;
while (await connections.hasNext) {
var connection = await connections.next;
connection.sink.add('foo');
connection.stream.listen(print);
}
}
(sse dart package -> https://pub.dev/packages/sse)
(continued) Usually, this would be a fine solution, and it could probably be modified a little for implementation within a flutter app. However, the shelf_io.dart package, used to spin up the server, depends on the dart:io package, which doesn't work with Flutter Web.
The other thought is - why do we need to set up a new server connection (with io.server(...)) when the flutter web app is already running on its own localhost server? This begs the question: Is there a way to add this sseHandler endpoint onto the localhost server that the Flutter Web app is running on?
All in all, what i'm trying to ask is:
Is there a way for a Flutter Web App to send SSE messages to a collection of listeners?
At the moment I've hit a bit of a deadend with research on this so if anyone had any bright ideas on a potential solution then the help would be greatly appreciated. Thanks :)
Side Note: Obviously this is something that could very easily be done with Java, J2Html and so on, but wheres the fun in giving up just like that... On the other hand, maybe flutter web is still just too new to support stuff like this?

How to check application state with FlutterDriver?

We're building some integration tests with FlutterDriver, and would like to verify the state of the application.
It seems flutter drive runs in a totally different instance than the app, so they can not communicate indirectly by stashing data in some shared static class.
Are there any common strategies to passing data to the test layer, from the app?
Some ideas I thought of:
We could write json values to disk, but can the test side actually read it?
Have a hidden text widget, that shows a special ui view that renders state so we can then read it from the test layer
fwiw, we have solved this currently by json-encoding some of our app state into an invisible Text widget that we place on screen.
The test can then lookup that text, decode the json, and read the current app state.
Pretty hacky but it works!
test('Check flutter driver health', () async {
Health health = await driver.checkHealth();
print(health.status);
});

How can i use sockets with Flutter web

I'm trying to make a connection between a socket server written in Python using socketio to a client made with Flutter Web.
I tested various socket packages like adhara_socket_io and flutter_socket_io and nothing worked. I tried the same code snippets on Android and they didn't work too.
I kept searching and i found this code snippet. It uses the Socket class from the dart.io package.
Socket socket = await Socket.connect('192.168.2.190', 7003);
print('connected');
// listen to the received data event stream
socket.listen((List<int> event) {
print(utf8.decode(event));
});
// send hello
socket.add(utf8.encode('hello'));
// wait 5 seconds
await Future.delayed(Duration(seconds: 5));
// .. and close the socket
socket.close();
This one connected to the Python server and sent the data from Android but when i tested it from Web i didn't connect.
Is there some things extra i need to add for it to work on Web?
Or in the worst case, is there another way to do what i want to do, my goal is to display a video feed in a website. The video is actually a bunch of images taken from Python, there is some machine learning that will be performed on them and i want to send them over socket and each image is displaying as soon as it is received so it looks like a video feed. (Similar thing was done using React)
dart.io package is not compatible with flutter web. And I suppose As pskink suggested websockets is the way to go. You can use HtmlWebSocketChannel from the web_socket_channel package as documented here. I have used this package and can confirm it works well in flutter web.
In your case should be using something as follows.
var channel = HtmlWebSocketChannel.connect("ws://192.168.2.190:7003");
But do note that this is not inter operable with regular flutter app. If you aim to target both android and flutter web, then you should handle this channel creation conditionally depending on target you are building it for and decide between HtmlWebSocketChannel or IOWebSocketChannel to create the connection. If you are interested you can use a conditional stub based implementation as suggested in this post*.
* Note: its my post. :)

What is the difference between MethodChannel, EventChannel & BasicMessageChannel?

In Flutter, there are three types of platform channels, and I want to know about the difference between them.
These channels are used to communicate between native code (plugins or native code inside of your project) and the Flutter framework.
MethodChannel
A MethodChannel is used for "communicating with platform plugins using asynchronous method calls". This means that you use this channel to invoke methods on the native side and can return back a value and vise versa.
You can e.g. call a method that retrieves the device name this way.
EventChannel
An EventChannel is used to stream data. This results in having a Stream on the Dart side of things and being able to feed that stream from the native side.
This is useful if you want to send data every time a particular event occurs, e.g. when the wifi connection of a device changes.
BasicMessageChannel
This is probably not something you will want to use. BasicMessageChannel is used to encode and decode messages using a specified codec.
An example of this would be working with JSON or binary data. It is just a simpler version because your data has a clear type (codec) and you will not send multiple parameters etc.
Here is a link to a good explanation for you https://medium.com/flutter-io/flutter-platform-channels-ce7f540a104e
Basically there are two main types:
Method Channels: designed for invoking named pieces of code across Dart and Java/Kotlin or Objective-C/Swift. (From flutter to the platform)
Event Channels: specialized platform channel intended for the use case of exposing platform events to Flutter as a Dart stream. (From the platform to flutter)
#creativecreatorormaybenot answer clears the things, let me add more to this.
Method Channel
This is more like RPC call. You invoke a method from your Flutter app to the native code, the native code does something and finally responds with a success or error. This call could be to get the current battery status, network information or temperature data. Once the native side has responded, it can no longer send more information until the next call.
Method Channel provides platform communication using asynchronous method calls.
Note:- If desired, method calls can also be sent in the reverse
direction, with the platform acting as client to methods implemented
in Dart.
Event Channel
This is more like reactive programming where platform communication using asynchronous event streams. These events could be anything that you need streamed to your Flutter application.Streaming data from the native code to Flutter app like continuously updating BLE or WiFi scanning results, accelerometer and gyro, or even periodic status updates from intensive data collection.
Basic Message Channel
It provides basic messaging services similar to BinaryMessages, but with pluggable message codecs in support of sending strings or semi-structured messages. Messages are encoded into binary before being sent, and binary messages received are decoded into Dart values. The MessageCodec used must be compatible with the one used by the platform plugin.