CODEWITHSUNDEEP
ruby-on-railsajaxvideopaperclipblob
julien h.
julien h.

Reputation: 41

rails paperclip - dealing with blob video from webcam record

I'm searching here and on gg since 1 week without finding the result I need.

I'm using MediaStreamRecorder.js to record webcam. Then I display video result in video tag with URL.createObjectURL(blob);

The video tag src is looking like that blob:http://localhost:3000/a2a57a58-b495-527a-b305-6b535bd6174c.

In the same page I have my rails form with title description and attachment (paperclip attributes).

My rails form is a classic form :

<%= form_for @video, :html => { :multipart => true } do |f| %>
  <% if @video.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@video.errors.count, "error") %> prohibited this video from being saved:</h2>
      <ul>
      <% @video.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br />
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :video %><br />
    <%= f.hidden_field :source %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

First though was to upload video through ajax call and adding extra fields (globBlob is the blub url created above) :

 var formData = new FormData();
 formData.append('video[title]', "testing");                 
 formData.append('video[description]', "testing");   
 formData.append('video[source]', globBlob);

 $.ajax({
            url: "/videos",
            type: 'POST',
            beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
            data: formData,
            success: function(resp){ console.log("success");},
            error: function(resp){ console.log("error");}
 });

as found there http://rohitrox.github.io/2013/07/19/canvas-images-and-rails/ and there How to upload RecordRTC blob file to Rails paperclip in AJAX, but I alway encountered http response 408.

I've also looked at the filesaver.js. I can convert blob into webm but the resulting file is alway asked to download through browser popin. Has someone advices on recording blob through rails form ?

Upvotes: 2

Views: 796

Answers (1)

julien h.
julien h.

Reputation: 41

ok, I got it !

ajax post :

var reader = new FileReader();
reader.onload = function(event){
  var video = {};
  video["title"] = $("#video_title").val();
  video["description"] = $("#video_description").val();                    
  video["source"] = event.target.result;      
  var fd = {video};
  $.ajax({
     headers: { 'X-CSRF-Token': '<%= form_authenticity_token.to_s %>'},
     type: 'POST',
     url: '/videos/save',
     data: fd,
     dataType: 'json',
     success: function(data){
              console.log("success");
     },
     error: function(data){
              console.log("error");
     }
  }).done(function(data) {
            console.log("done");
          });
};
reader.readAsDataURL(globBlob);

video controller :

src = Paperclip.io_adapters.for(params[:video][:source]) 
src.original_filename = filename
src.content_type = params[:video][:source].split(",")[0].split(";")[0].split(":")[1]
@video = current_user.videos.new(params[:video])
@video.source = src

thanks to stackoverflow and all the relateds threads that permits me to find solution :)

Upvotes: 1

Related Questions