[HELP] How to retrieve the file or byte list from a recording on the flutter_web?

[ReniDelonzek]

I looked in the documentation but found nothing about it. I need the file / bit list to send the recording to the server

[Larpoux]

I do not really understand your question. Downloading a file from internet is something probably easy, but has nothing to do with Flutter Sound. The file can be anything, maybe the picture of a cat, a sound, a video, ... This is not Flutter Sound job to download a remote file.

[ReniDelonzek]

Sorry, I must have expressed myself badly.

What I need to do is retrieve the file recorded by flutter_sound using the command flutterSoundRecorder.startRecorder (toFile: path). This running in the browser (web flutter)

[Larpoux]

So, you record a file "path" (toFile: path). This file contains your recording, and you can upload it to your server.

Do I understand correctly ?

[ReniDelonzek]

Yes. However, it is not possible to recover a file through its path on the web (because the file class comes from dart.io).

In the documentation it is mentioned that the file url on the web is saved in localStorage the LocalSessionStorage key will contain the URL of the recorded object

However there is no mention of any way to recover this url or how to manipulate it

[Larpoux]

Whow! Do you mean that your are using Flutter Sound On Web ?

I did not understood that. Sorry.

Just a moment, please...

[Larpoux]

This thing is a little tricky, because Web App does not have access to a real storage. I am going back in a few minutes...

[Larpoux]

The answer is here.

But I agree that it is not very explicit how to retrieve the URI. I am going to do better doc, now. I will post you something when done. (1/2 hour ?)

[ReniDelonzek]

Whow! Do you mean that your are using Flutter Sound On Web ?

Yes!

I will post you something when done. (1/2 hour ?)

Of course, I wait without problems

[Larpoux]

You can read this

Basically, if you specified "myPath" as the startRecorder() parameter, then you can retrieve the URI doing :

myUrl = window.localStorage['myPath'];

I do not remember well. Just that it was really easy. Please let me know if you succeed. And send me your proposal that could be inserted in τ documentation.

[ReniDelonzek]

Okay, I will test this and put the result here. Thank you very much

[ReniDelonzek]

Hello, I tried with the following code

      String path = '_flutter_sound';
      await recorderModule.openAudioSession();
      await recorderModule.startRecorder(
        toFile: path,
        codec: codec,
        numChannels: 1,
      );

And

await recorderModule.stopRecorder();
await recorderModule.closeAudioSession();

var myPref = window.localStorage['_flutter_sound'];
print('URL: ${myPref}');

However the result produced by window.localStorage ['_ flutter_sound']; was null

I noticed that this may be related to the order of execution of the data, because moments later it was printed on the console

recorder stopped
URL: null
On data available : Blob flutter_sound_recorder.js:278
recorder stopped

recorder stopped It prints twice, once after calling recorderModule.stopRecorder(), and once, a while later

[ReniDelonzek]

It may be relevant to mention that I tested it on the edge browser. From what I understand, it behaves a little differently in Chrome, but neither worked as expected

[Larpoux]

@ReniDelonzek ,

I am going to look to your issue in a few days (you are now near the top of the TODO stack 😉 ). I will finish to complete #590 and I will handle your issue. Perhaps I will create a new API verb to get the URL or erase the recorded object.

Patience...

[ReniDelonzek]

Right. thanks

[Larpoux]

@ReniDelonzek ,

I am working on your issue. I have decided that the instruction stopRecorder() will return a future to the URI of the recorded object.

   URL myURL = await myRecorder.stopRecorder();

But I want also that things are same on iOS and Android.

  myRecorder.startRecorder(path: 'foo'); // 'foo' is not a valid path file, so a temporary file 'foo' will be created
  ...
  URL myURL = await  myRecorder.stopRecorder(); // Returns an URI to the temporary file

I create also two new verbs

      myRecorder.deleteRecord('foo');
      URL myURL = await myRecorder.getRecordURL('foo'); // not sure that it is necessary

[ReniDelonzek]

This looks pretty good. The important thing is to maintain consistency in the way you work for both mobile and web.

Looking forward to testing!

[Larpoux]

Hi @ReniDelonzek ,

I did the improvements that you requested. It works fine on the three platforms :

• Android
• iOS
• Web

I am currently rewriting asynchronous processing done by τ. This is a major change and tricky. After the changes, we will be able to do :

myPlayer.openAudioSession(); // no need to wait
myPlayer.startPlayer(...); // no need to wait anymore the end of `openAudioSession()`

Also if the app is waiting on something (for example) :

await myPlayer.pausePlayer();

and the app does for example :

await myPlayer.pausePlayer(); // another call to the same function

or worst :

myPlayer.stopPlayer();

The first call to pausePlayer will receive an exception instead of being stuck for ever.

τ is in the middle of two asynchronous clients : the OS and the App. Managing asynchronous processing is really tough.

I must do many tests before doing any release. Probably in a few days. Thank you for your patience.

[Larpoux]

@ReniDelonzek , Flutter Sound 7.6.0 is released. stopRecorder() now returns the URL of the recorded file. see here. It works on

• iOS
• Android
• Flutter Web

Sorry for the delay. I hope that I am not too late for your own developments.

[ReniDelonzek]

Hello, first of all thank you for your excellent work! I tried to test this on the web with:

path = '_flutter_sound_${DateTime.now().millisecondsSinceEpoch}';
      await recorderModule.openAudioSession();

      await recorderModule.startRecorder(
        toFile: path,
        codec: codec,
        numChannels: 1,
      );

and

 String url = await recorderModule.stopRecorder();
      print('url: ${url}');

However, recording never starts, and no error log is printed. Am I doing something wrong?

[Larpoux]

Which codec ?

[ReniDelonzek]

Codec.opusWebM

[Larpoux]

Are you using chrome or firefox ? On witch device ? With chrome you can open the console with "More tools > Developer tools"

[ReniDelonzek]

Hello, I am using Edge in MacOs

I am creating min example -> https://github.com/ReniDelonzek/flutter_example

My edge version -> 88.0.705.56 (64 bits)

Flutter Doctor

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.52.1)
[✓] Connected device (4 available)

• No issues found!

[Larpoux]

Reni,

I really needs your logs to help you.

[ReniDelonzek]

What logs can I provide for you? As I said, the application prints few logs, and no errors.

The only logs I have are the ones printed on the browser console:

FS:---> openAudioSession ---> openAudioSession flutter_sound_recorder.js:45 initializeFlautoRecorder main.dart.js:4741 <--- openAudioSession

I hosted my example on github pages, you can try it here

[ReniDelonzek]

Hello @Larpoux, any predictions to look at this, or even some roadmap that I can follow?

[Larpoux]

OK reni, I am going look to your example on Github. I will post you something in a few hours.

[Larpoux]

Reni, I confirm that it seems that there is a big problem in τ for Flutter Web.

I am going to fix it this afternoon. Sorry for this inconvenience.

[Larpoux]

@ReniDelonzek ,

I fixed something in Flutter Sound on Web. But before doing a release, I would like to test your App. Could you post the sources ?

[ReniDelonzek]

@Larpoux My original app is a little too big to share, but you can use the example I published, working on it I can port it to my