create video file from ajax provided dataURI

Question

Okay, I've read at least a hundred articles on this, and I can find no clear example to do what I'm trying to do, exactly. I'm using RecordRTC to get my videos. I can get the webm data URI for the video in the form of blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c. I know I can basically feed this source (used for my video element) to a canvas element, and then get an encoded dataURI with the canvas toDataURL() method. However, seeing that the encoded data should be a video, using a parameter such as video/webm for toDataURL() still returns an encoded string for the image/png mimetype. 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 the webm file on my server's filesystem? If this isn't possible, how can I create an encoded string for the 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 is run 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 this 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 the blob.