Browser 'save-as' dialog and file handling


#1

So I’m using this JavaScript plugin called MediaStreamRecorder https://github.com/streamproc/MediaStreamRecorder
It records audio from the mic. then can call a save method which will prompt a save as dialogue. Now that works all good and well in any browser, but in ionic nothing happens…

is there an event I can listen to or a way I can intercept this file?

the actual recorder.save() method returns nothing, it just invokes the dialogue.


#2

Looks like that plugin outputs to a blob. You can use the following plugin to save the file…

I’ve done an example which saves a PDF to the file system here…


#3

Thanx for your reply, I am trying to use File. I had a look at your code, it helped me see some thing i may change but my issue persists. The real issue is access to this blob.

there is a method:

onMediaSuccess(stream)
    {
      try{
      mediaRecorder = new MediaStreamRecorder(stream);
      mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
      mediaRecorder.ondataavailable = function (blob) 
      {
          //So i get a blob here... i need to store this blob, but if i use 'this.myMethod(blob)'
          // then it tries to use methods within mediaRecorder, which are actually in my .ts
          //and the blob dissapears after this method ...  
          // i use DOM in an attempt to save the blob somewhere
          document.getElementById('myblob').setAttribute('src',blob);
      };
      //start recording with a lenth limit of 100 000ms
      mediaRecorder.start(100000);
      } catch(error)
      {
        alert("mediarecorder catch "+error);
      }
    }

As you can see here i try to save the Blob within a src attribute… i fear that this will not work as intended.
anyways, after the recording is stopped i attempt to save this blob and then play it

      mediaRecorder.stop();
      //mediaRecorder.save();
      var deblob = document.getElementById('myblob').getAttribute('src');
      this.file.writeFile(this.file.cacheDirectory,'recording.wav',deblob,{replace: true}).then(()=>{
        alert('created file');
        this.nativeAudio.preloadComplex('Vocal',this.file.cacheDirectory+'/recording.wav', 1, 1, 0).then(this.loadedFile(), this.onError); 
      });

I then obviously call play for native audio. this seems to be okay, except that the recorded blob never plays anything back… I suspect because the ‘src’ equals ‘[object blob]’ rather than the actual blob file.

Because of the scope issue in the mediarecorder.ondataavailible method i have no other access to this blob.

THERE IS HOWEVER a save() method included in this .js which returns nothing but attemps a savedialog. it will save properly on web, but on ionic nothing will happen.


#4

It’s quite late here so I’m starting to waver a bit.

I can help you in two ways…

  1. I might have a stab at creating this app myself and put it up on a git repo - but only when I get chance.
  2. If you send me your repo I’m happy to have a look as I think you’re 80% there. You have a few issues I can see with the getElementById (should not be used in an Angular app, or in my opinion ANY app with a framework with loadable components). If you do that it’ll be a LOT quicker for me to diagnose and help you out.

The choice is yours.


#5

you are a king! havn’t set-up git like a noob (new PC) but i added the main files to a drive here: https://drive.google.com/open?id=0B0f7m2kkaS4jS2hCZm5JM1dSTm8

The Page doing all the work (and having all the errors) is the arrange-beats page.I also believe i am very very close… have been for the past week! but there is something silly i don’t know about/ am not thinking of to get this blob. I even tried editing the .js file (which is not my own work, and is massive) to return the file or blob with no success.

(I have since restored it to defult)


#6

Nice one.

I’ll have a crack and let you know man


#7

Right - can you put the whole thing in there? This is not a valid ionic project. There’s no config.xml / package.json for example…
Just zip the whole thing


#8

Okay - despite lack of answer re zip file, I’ve created an image / audio / video recorder which SAVES THE FILES TO THE FILE SYSTEM automatically and provides you with links.

It’s using the genuine plugins - so have a look and play.

Please let me know if useful.