Search code examples
javascriptfirebasegoogle-chromegoogle-cloud-storagefirebase-hosting

Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File

I make a simple audio recording web app using Firebase Hosting. I would like to record audio on browser and upload it to Cloud Storage. When I deploy and access my app, I can record audio. However the app failed to upload the audio to Cloud Storage.

(I use Windows 10, Windows Subsystems for Linux, Debian 10.3 and Google Chrome browser. )

This is an error message in browser's console.

Uncaught 
h
code: (...)
code_: "storage/invalid-argument"
message: (...)
message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File."
name: (...)
name_: "FirebaseError"
serverResponse: (...)
serverResponse_: null
__proto__: Object

This is a screenshot of browser's console.

storage

This is index.html.

<!doctype html>
<html lang="ja">
   <head>
      <title>音読アプリ アドバンス</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   
  
      <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io-stream/0.9.1/socket.io-stream.js"></script>
   </head>

   <body>
      <div>
        <button id="start-recording" disabled>Start Recording</button>
        <button id="stop-recording" disabled>Stop Recording</button>
      </div>

      <script type="text/javascript">
          const startRecording = document.getElementById('start-recording');
          const stopRecording = document.getElementById('stop-recording');
          let recordAudio;
          startRecording.disabled = false;
          console.log(startRecording)

          // on start button handler
          startRecording.onclick = function() {
              // recording started
              startRecording.disabled = true;

              // make use of HTML 5/WebRTC, JavaScript getUserMedia()
              // to capture the browser microphone stream
              navigator.getUserMedia({
                  audio: true
              }, function(stream) {
                      recordAudio = RecordRTC(stream, {
                      type: 'audio',
                      mimeType: 'audio/webm',
                      sampleRate: 44100, // this sampleRate should be the same in your server code

                      // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
                      // CanvasRecorder, GifRecorder, WhammyRecorder
                      recorderType: StereoAudioRecorder,

                      // Dialogflow / STT requires mono audio
                      numberOfAudioChannels: 1,

                      // get intervals based blobs
                      // value in milliseconds
                      // as you might not want to make detect calls every seconds
                      timeSlice: 4000,

                      // only for audio track
                      // audioBitsPerSecond: 128000,

                      // used by StereoAudioRecorder
                      // the range 22050 to 96000.
                      // let us force 16khz recording:
                      desiredSampRate: 16000
                  });

                  recordAudio.startRecording();
                  stopRecording.disabled = false;
              }, function(error) {
                  console.error(JSON.stringify(error));
              });
          };

          // on stop button handler
          stopRecording.onclick = function() {
              // recording stopped
              startRecording.disabled = false;
              stopRecording.disabled = true;

              // stop audio recorder
              recordAudio.stopRecording(function() {

                  // after stopping the audio, get the audio data
                  recordAudio.getDataURL(function(audioDataURL) {
                      var file = {
                          name: 'speech.wav',
                          audio: {
                              type: recordAudio.getBlob().type || 'audio/wav',
                              dataURL: audioDataURL
                          }
                      };
                      
                      // Create a root reference
                      var storageRef = firebase.storage().ref();

                      // Create the file metadata
                      var metadata = {
                        contentType: 'audio/wav'
                      };

                      // Upload file and metadata to the object 'images/mountains.jpg'
                      var uploadTask = storageRef.child('audio/' + file.name).put(file, metadata);

                      // Listen for state changes, errors, and completion of the upload.
                      uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
                        function(snapshot) {
                          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
                          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                          console.log('Upload is ' + progress + '% done');
                          switch (snapshot.state) {
                            case firebase.storage.TaskState.PAUSED: // or 'paused'
                              console.log('Upload is paused');
                              break;
                            case firebase.storage.TaskState.RUNNING: // or 'running'
                              console.log('Upload is running');
                              break;
                          }
                        }, function(error) {

                        // A full list of error codes is available at
                        // https://firebase.google.com/docs/storage/web/handle-errors
                        switch (error.code) {
                          case 'storage/unauthorized':
                            // User doesn't have permission to access the object
                            break;

                          case 'storage/canceled':
                            // User canceled the upload
                            break;


                          case 'storage/unknown':
                            // Unknown error occurred, inspect error.serverResponse
                            break;
                        }
                      }, function() {
                        // Upload completed successfully, now we can get the download URL
                        uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
                          console.log('File available at', downloadURL);
                        });
                      });

                    });
                });
            };
      </script>

      <!-- Import and configure the Firebase SDK -->
      <!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
      <!-- If you do not want to serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
      <script src="/__/firebase/7.14.3/firebase-app.js"></script>
      <script src="/__/firebase/7.14.3/firebase-auth.js"></script>
      <script src="/__/firebase/7.14.3/firebase-storage.js"></script>
      <script src="/__/firebase/7.14.3/firebase-messaging.js"></script>
      <script src="/__/firebase/7.14.3/firebase-firestore.js"></script>
      <script src="/__/firebase/7.14.3/firebase-performance.js"></script>
      <script src="/__/firebase/7.14.3/firebase-functions.js"></script>
      <script src="/__/firebase/init.js"></script>
   </body>
</html>

Could you give me any advices? Thank you in advice.

Solution

  • I don't know much about the .wav file but you seem to be trying to store an object instead of a blob or a file that Firebase Storage is expecting. Try creating a var blob = recordAudio.getBlob() and replace file in your put() function with blob instead.