Erstelle Videodatei von Ajax zur Verfügung gestellt DataURI

Question

Okay, ich habe mindestens hundert Artikel zu diesem Thema gelesen, und ich kann kein klares Beispiel finden, um genau das zu tun, was ich versuche zu tun. Ich verwende RecordRTC, um meine Videos zu erhalten. Ich kann den Webm-Daten-URI für das Video in Form von blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c erhalten. Ich weiß, dass ich diese Quelle (die für mein Videoelement verwendet wird) im Wesentlichen einem Canvas-Element zuführen kann und dann eine codierte DataURI mit der Canvas-Methode toDataURL() abrufen kann. Wenn Sie jedoch sehen, dass die codierten Daten ein Video sein sollen, gibt ein Parameter wie video/webm für toDataURL() immer noch eine codierte Zeichenfolge für den Mimetyp image/png zurück. Meine Frage ist: Wenn ich die Blob-URL (blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c) an PHP übergebe, wie kann ich die Webm-Datei auf dem Dateisystem meines Servers erstellen? Wenn dies nicht möglich ist, wie kann ich eine codierte Zeichenfolge für den video/webm MIME-Typ aus der Zeichenfläche erstellen?

Das ist mein Video Klassenobjekt:

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

Und das ist, wie der Code inline in meinem Skript ausgeführt wird:

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

Mit var recordedBlob = recordRTC.getBlob();, versuchen Sie diesen folgenden Ausschnitt:

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 (Ich bin wirklich rostig) $_POST["video"] sollte den Blob enthalten.