How can i help migrate this package for support flutter web?

[menezes85]

Hello Felix, thanks for this awesome work, i really wang to help you migrate this project for flutter web, how can i help? i have a request on my app to run on web and without this package the project is freeze, i realy apreciate your return

[felixjunghans]

HI, thank you for wanting to help. To make google_speech available for web, it is necessary to use grpc for web. The current implementation of grpc (https://pub.dev/packages/grpc) does not support web.

The protocols of grpc-web are very different from grpc-dart, so a simple port is not so easy.

I have seen that in the current grpc-dart master branch an interface has been created that connects grpc-web and grpc-dart. Maybe this is a first starting point. Unfortunately, I have not been able to get it to work on web yet.

If you don't need streaming support for your web project, it might also be possible to switch to the following package: https://pub.dev/packages/googleapis

[felixjunghans]

Another idea would be to abandon streaming support for web for now. I haven't found a package that supports streaming on the web yet anyway.

Then you could use the Api version of Google Speech for web. If that would be a solution, I could try to implement it.

[menezes85]

Hi Felix, thanks for your reply, and sorry for my late reply.. i had personal problems, btw i also tried grpc-web interface, but thats not simple work to do.

What about APi Version how that could be possible ? count on me on any efforts

[JulianKowalczuk]

The problem with grpc-web is requirement of proxy to make it work. But that's not what we wish while using package like this :/

[gedw99]

i got grpc-web working for flutter web 2 years ago.

it works fine.

https://github.com/amplify-edge/sys-share has working example.
backend if golang
frontend is flutter.

[alaincruz06]

i got grpc-web working for flutter web 2 years ago.

it works fine.

https://github.com/amplify-edge/sys-share has working example. backend if golang frontend is flutter.

Hi @felixjunghans, seeing what @gedw99 just commented is there a light at the end of the tunnel after all?
PS:@menezes85 take a time (if you're still willing to help on this package) and take a look at this.

[menezes85]

Hello Folks, project is more then a year frozen because i was not able to make it work for web :( i will have a check with the commment of @gedw99 , but in order to add this supporte, we will need to make a task force in order to proceed in advancements, thanks for your mutual interest. @gedw99 we need a backend in order to make it work ?

• sys-share/sys-account/service/flu/lib/rpc/v2/

thats the path of usage of grpc-web right ?

[felixjunghans]

Hi @ALL, after @gedw99 comment I tried again today with grpc-web. However, currently I still get CORS errors with Google's Speech Api. Unfortunately I can't find the error. So if someone could help that would be great. I will check in an example with my code I am currently stuck on.

[gedw99]

You need envoy or the golang GRPC- Web project if I recall.

[gedw99]

Here is the main.go that kicks off the backend

https://github.com/amplify-edge/main/blob/master/deploy/templates/maintemplatev2/server_commands.go

github.com/improbable-eng/grpc-web/go/grpcweb Is what does the magic to make GRPC-web work with needed envoy of GRPC gateway.

under the hood , for web, flutter and golang use web sockets.

i stopped using flutter 2 years ago and now use GIO for portable gui btw.
Each to his own but I found more productivity with having the frontend gui and backend all in golang .

If you want more info just yell

[felixjunghans]

Thanks @gedw99.

There is now a new Branch called https://github.com/felixjunghans/google_speech/tree/web-example . In the sample folder there is a project called audio_file_example. This should now be able to be launched on the web. Unfortunately I can't connect to Google's Speech API at the moment. If someone finds the bug, feel free to create a PR.

[menezes85]

@felixjunghans , for CORS errors, check the headers of request:
Try one of those headers:
Access-Control-Allow-Origin: *

other way: syour request to a proxy, or create a own proxy .

[alaincruz06]

Well, I noticed that the package used for streaming the voice input is sound_stream and as we can see it's not supported for the web, maybe changing it for mp_audio_stream or similar.
Ps: when updating remember pedantic is deprecated and now it's suggested to use lints lints

[felixjunghans]

@alaincruz06 In audio_file_example I don't use any streaming packages at all. There is an audio file in the assets folder which should be opened and transcribed.

[alaincruz06]

My bad, I was trying out mic_stream_example

[alaincruz06]

Any updates on this @felixjunghans @menezes85 ?
I'm trying it with FilePicker to select the file because getApplicationDocumentsDirectory(); it's not allowed on web, but keep getting the same error:

Error: gRPC Error (code: 5, codeName: NOT_FOUND, message: HTTP connection completed with 404 instead of 200, details: [], rawResponse: , trailers: {content-length: 0, date: Wed, 25 Jan 2023 16:32:51 GMT, server: dart:io with Shelf, x-content-type-options: nosniff, x-xss-protection: 1; mode=block})
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
packages/grpc/src/shared/status.dart 400:7                                                                                     validateHttpStatusAndContentType
packages/grpc/src/client/transport/xhr_transport.dart 103:7                                                                    [_validateResponseState]
packages/grpc/src/client/transport/xhr_transport.dart 115:10                                                                   [_onHeadersReceived]
packages/grpc/src/client/transport/xhr_transport.dart 62:11                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37317:58                              <fn>

[mainul-atlasprimer]

@alaincruz06 @felixjunghans I am getting the same error:

Error: gRPC Error (code: 5, codeName: NOT_FOUND, message: HTTP connection completed with 404 instead of 200, details: [], rawResponse: , trailers: {content-length: 0, date: Thu, 08 Feb 2024 06:59:18 GMT, x-content-type-options: nosniff, x-powered-by: Dart with package:shelf, x-xss-protection: 1; mode=block})

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3       throw_
packages/grpc/src/shared/status.dart 400:7                                        validateHttpStatusAndContentType
packages/grpc/src/client/transport/xhr_transport.dart 103:7                       [_validateResponseState]
packages/grpc/src/client/transport/xhr_transport.dart 115:10                      [_onHeadersReceived]
packages/grpc/src/client/transport/xhr_transport.dart 62:11                       <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39  dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37241:58                              <fn>