Rails + WebRTC audio recording + Carrierwave + fog + S3 + Ajax error

Question

I want to collect HTML5 audio from a user and store them on S3. I am using a javasscript resource to record audio and video in a browser using WebRTC called MediaStreamRecorder.js to collect audio. I added Carrierwave and Fog and confirmed that I can successfully upload audio files to S3. I also successfully used MediaStreamRecorder.js to collect Blob audio and play it in an audio tag. My initial idea was to add the blob URL directly as the value of the form’s hidden input and get the audio of the controller and Carrierwave by submitting the form, just like you can use “remote_file_url” to send a link to the remote file, not loading a local file.

This failed. Obviously blob urls cannot be handled this way.

I found this blog post explaining how I can send a file directly to Carrierwave via Javascript. I tried to implement this, but could not. I am using Chrome.

I have a bootloader called Record:

class RecordingUploader < CarrierWave::Uploader::Base def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end end 

I have a reading model:

 class Recitation < ActiveRecord::Base belongs_to :lesson mount_uploader :recording, RecordingUploader end 

The routes reflect that Recitation is embedded in a model called Lesson:

 resources :lessons do resources :parts resources :recitations end 

My new and created method in the read controller:

 def new @lesson = Lesson.find(params[:lesson_id]) @recitation = Recitation.new end def create @lesson = Lesson.find(params[:lesson_id]) @recitation = @lesson.recitations.new(recitation_params) if @recitation.save redirect_to thanks_path else flash[:error] = "There was a problem saving your recording." render :new end end 

And finally, my attempt to pass blob to the controller via AJAX.

 function onMediaSuccess(stream) { mediaRecorder = new MediaStreamRecorder(stream); mediaRecorder.mimeType = 'audio/ogg'; mediaRecorder.ondataavailable = function(blob) { var formData = new FormData(); formData.append('recitation[recording]', blob); $.ajax({ url: "/lessons/#{@lesson.id}/recitations", data: formData, cache: false, contentType: false, processData: false, type: 'PUT' }); }; } 

In the JS console, I get the error "404 (not found)". The problem seems to be in some AJAX related lines in jquery.js, but I guess. I would like an understanding.

Answer 1

I think your problem is with the URL used in AJAX strings:

  $.ajax({ url: "/lessons/#{@lesson.id}/recitations", data: formData, cache: false, contentType: false, processData: false, type: 'PUT' }); 

You need to specify the identifier of the declaration you are trying to update. Try the following:

 $.ajax({ url: "/lessons/#{@lesson.id}/recitations/#{@recitation.id}", data: formData, cache: false, contentType: false, processData: false, type: 'PUT' });