Create a video file from ajax provided uri data

Question

Well, I read at least a hundred articles about this, and I can't find a clear example to do what I'm trying to do, for sure. I use RecordRTC to get my videos. I can get the web data URI for the video in blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c form blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c . I know that I can radically load this source (used for my video element) into the canvas element, and then get the encoded dataURI using the canvas toDataURL() method. However, seeing that the encoded data must be video, using a parameter such as video/webm for toDataURL() still returns the encoded string for a tag of type image/png . My question is this: if I pass the blob URL ( blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c ) to PHP, how can I create a webm file on my server file system? If this is not possible, how can I create an encoded string for video/webm mimetype from the canvas?

This is my video class object:

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

And this is how the code runs inline in my 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

Using var recordedBlob = recordRTC.getBlob(); try the following snippet:

 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 (I'm really rusty) $_POST["video"] should contain blob.