Question

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

我使用MediaStreamRecorder.js录制网络摄像头。然后我用视频标签显示视频结果 URL.createObjectURL（BLOB）;

视频标签src看起来像那样斑点：http://localhost:3000/a2a57a58-b495-527a-b305-6b535bd6174c

在同一页面中，我的轨道表格包含标题说明和附件（回形针属性）。

我的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网址）：

 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/和那里How to upload RecordRTC blob file to Rails paperclip in AJAX，但我总是遇到http响应408。

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

Answer 1

好吧，我明白了！

ajax帖子：

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

感谢stackoverflow和允许我找到解决方案的所有相关线程：）

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

1 个答案: