rails paperclip - 处理来自网络摄像头记录的 blob 视频

Question

我在这里和 gg 上搜索了 1 周，但没有找到我需要的结果。

我正在使用 MediaStreamRecorder.js 来录制网络摄像头。然后我在视频标签中显示视频结果 URL.createObjectURL(blob);

视频标签 src 看起来像这样 blob:http://localhost:3000/a2a57a58-b495-527a-b305-6b535bd6174c.

在同一页面中，我有我的 rails 表单，其中包含标题描述和附件（回形针属性）。

我的rails表格是经典表格:

<%= 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 %>

首先是通过 ajax 调用上传视频并添加额外字段（globBlob 是上面创建的 blub url）：

 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");}
 });

在那里找到 http://rohitrox.github.io/2013/07/19/canvas-images-and-rails/ and there How to upload RecordRTC blob file to Rails paperclip in AJAX，但我总是遇到 HTTP 响应 408。

我也看过 filesaver.js。我可以将 blob 转换为 webm，但总是要求通过浏览器 popin 下载生成的文件。有人建议通过 rails 表格记录 blob 吗？

Answer 1

好的，我明白了！

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);

视频控制器：

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

感谢 Whosebug 和所有允许我找到解决方案的相关线程:)

rails paperclip - 处理来自网络摄像头记录的 blob 视频

rails paperclip - dealing with blob video from webcam record

ajax

video

blob

ruby-on-rails

paperclip