crea file video da ajax fornito dataURI

Question

Ok, ho letto almeno un centinaio di articoli su questo, e non riesco a trovare alcun esempio chiaro per fare esattamente ciò che sto cercando di fare. Sto usando RecordRTC per ottenere i miei video. Posso ottenere l'URI dei dati webm per il video sotto forma di blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c. So che posso sostanzialmente alimentare questa sorgente (utilizzata per il mio elemento video) su un elemento canvas, e quindi ottenere un dataURI codificato con il metodo canvas toDataURL(). Tuttavia, poiché i dati codificati devono essere un video, l'utilizzo di un parametro come video/webm per toDataURL() restituisce comunque una stringa codificata per il tipo image/png. La mia domanda è questa: se passo l'URL blob (blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c) a PHP, come posso creare il file webm sul filesystem del mio server? Se ciò non è possibile, come posso creare una stringa codificata per il mimetype video/webm dall'area di disegno?

Questo è il mio oggetto classe video:

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

Ed è così che il codice viene eseguito in linea nel mio script:

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

Utilizzando var recordedBlob = recordRTC.getBlob();, provate questo seguente frammento di codice:

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 (sono davvero arrugginito) $_POST["video"] dovrebbe contenere il blob.