tạo tệp video từ ajax cung cấp dataURI

Question

Được rồi, tôi đã đọc ít nhất một trăm bài viết về điều này và tôi không thể tìm thấy ví dụ rõ ràng để làm những gì tôi đang cố gắng làm, chính xác. Tôi đang sử dụng RecordRTC để tải video của mình. Tôi có thể nhận URI dữ liệu webm cho video ở dạng blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c. Tôi biết tôi về cơ bản có thể nguồn cấp dữ liệu này (được sử dụng cho phần tử video của tôi) cho một phần tử canvas, và sau đó nhận được một dataURI được mã hóa bằng phương thức canvas toDataURL(). Tuy nhiên, thấy rằng dữ liệu được mã hóa phải là video, sử dụng thông số như video/webm cho toDataURL() vẫn trả lại chuỗi được mã hóa cho image/png mimetype. Câu hỏi của tôi là: nếu tôi chuyển url blob (blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c) đến PHP, làm cách nào để tạo tệp webm trên hệ thống tệp của máy chủ của tôi? Nếu điều này là không thể, làm thế nào tôi có thể tạo một chuỗi được mã hóa cho video/webm mimetype từ canvas?

Đây là đối tượng lớp video của tôi:

var Video = { 
    eId: '', 
    element: {}, 
    source: {}, 
    RtcOpts: {video: true, audio: true}, 
    RTC: {}, 
    media: {}, 
    init: function(elementId){ 
     Video.eId = elementId; 
     Video.media = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
    }, 
    success: function(stream){ 
     Video.RTC = new MRecordRTC(stream); 
     Video.element = document.getElementById(Video.eId); 

     if(window.webkitURL || window.URL){ 
      Video.source = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream); 
     }else{ 
      Video.source = stream; 
     } 

     Video.element.autoplay = true; 
     Video.element.src = Video.source; 
     Video.RTC.startRecording(); 
     Video.element.play(); 
    }, 
    error: function(e){ 
     console.error('getUserMedia Error', e); 
    }, 
    stop: function(){ 
     Video.RTC.stopRecording(function(WebMURL){ 
      console.log(WebMURL); // prints the blob url 
      var recordedBlob = Video.RTC.getBlob(); 
      console.log(recordedBlob); // prints undefined 
      Video.save(recordedBlob); 
     }); 
    }, 
    save: function(recordedBlob){ 
     var formData = new FormData(); 
     formData.append('mode', 'getusermedia'); 
     formData.append('blob', recordedBlob); 

     var request = new XMLHttpRequest(); 
     request.onreadystatechange = function(){ 
      if(request.readyState == 4 && request.status == 200){ 
       console.log(request.responseText); 
      } 
     }; 
     request.open('POST', rootPath+'ajax/processVideo.php'); 
     request.send(formData); 
    } 
}; 

Và đây là cách mã được chạy nội tuyến trong kịch bản của tôi:

var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2]; 
Video.init(playerId); 

if(Video.media){ 
    document.getElementById('stop-'+playerId).onclick = function(e){ 
     e.preventDefault(); 

     Video.stop(); 
    }; 

    Video.media(Video.RtcOpts, Video.success, Video.error); 
}else{ 
    //fallback 
} 

Answer 1

Sử dụng var recordedBlob = recordRTC.getBlob();, hãy thử này đoạn sau:

var xhr = new XMLHttpRequest(), 
    fd = new FormData(); 
xhr.open("POST", "/submit.php", true); 
fd.append("video", recordedBlob); 
xhr.addEventListener("load", function() { 
    // xhr.statusCode === 200 means it worked 
}); 
xhr.send(fd); 

PHP (Tôi thực sự gỉ) $_POST["video"] nên chứa các đốm màu.