rails + WebRTC录音+ Carrierwave + fog + S3 + Ajax错误

Question

I want to collect HTML5 audio recordings from a user and store them in S3. I am using a javasscript resource for in-browser audio and video recording with WebRTC called MediaStreamRecorder.js to collect the audio recording. I have added Carrierwave and Fog, and verified that I can successfully upload audio files to S3. I have also successfully used MediaStreamRecorder.js to collect the audio Blob and play it back in an audio tag. My original idea was to add the blob URL directly as value of a hidden form input and get the audio to the controller and Carrierwave through a form submission, the same way you can use "remote_file_url" to submit a link to a remote file rather than uploading a local file.

That failed. Evidently, blob URLs cannot be handled this way.

I found this blog post explaining how I can submit a file directly to Carrierwave via Javascript. I tried to implement this but failed. I am using Chrome.

I have an uploader called "Recording":

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

I have a model "Recitation":

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

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

resources :lessons do
    resources :parts
    resources :recitations
end

My new and create method in the Recitation 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 the 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 a "404 (Not Found)" error. The trouble seems to be in some AJAX related lines in jquery.js, but I am guessing. Would appreciate any insight.

Answer 1

I think your issue is related to the url used in the AJAX lines:

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

You need to specify the the id of the recitation that you're trying to update. Try the following to see if it works:

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