Save the webcam video on the live server


I want to upload the video that records the webcam to the server. Now what I do is record the video and once the recording is finished upload it whole, to record it use RecordRTC, in addition to HTML5 and Javascript. What I want is to upload it while it is being recorded.

Does anyone know how I can upload the video and save it on the server while it is being recorded?

I do not want to use Flash.

asked by Miguel Bastida 27.07.2016 в 12:33

1 answer


Suppose the following javascript code to record the video:

var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm';  // or "wav"

var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);

xhr('save.php', formData, function (fName) { + fName);

function xhr(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {

        if (request.readyState == 4 && request.status == 200) {
            callback(location.href + request.responseText);
    };'POST', url);

The destination script save.php could be the following:

    foreach(array('video', 'audio') as $type) {
        if (isset($_FILES["${type}-blob"])) {

            $fileName = $_POST["${type}-filename"];
            $uploadDirectory = DIR.'/uploads/'.$fileName;

            if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
                echo(" problem moving uploaded file");


You can learn more about it here

answered by 28.07.2016 в 10:21