RecordRTC to PHP / Try LIVE Demo

This demo allows you record and upload to PHP server. Files on PHP server are auto-deleted as soon as you leave this page.

This demo runs top over RecordRTC: https://github.com/muaz-khan/RecordRTC

This demo works in Chrome, Firefox, Opera and Microsoft Edge. It even works on Android devices.

Following snippets explains how to POST recorded audio/video files to PHP server. It captures Blob and POST them using XHR2/FormData.

PHP code

<?php
foreach(array('video', 'audio') as $type) {
    if (isset($_FILES["${type}-blob"])) {
    
        echo 'uploads/';
        
        $fileName = $_POST["${type}-filename"];
        $uploadDirectory = 'uploads/'.$fileName;
        
        if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
            echo(" problem moving uploaded file");
        }
		
        echo($fileName);
    }
}
?>

JavaScript code

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) {
    window.open(location.href + 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);
        }
    };
    request.open('POST', url);
    request.send(data);
}

RecordRTC Demos

1. RecordRTC to Node.js
2. RecordRTC to PHP
3. RecordRTC to ASP.NET MVC
4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
5. MRecordRTC i.e. Multi-RecordRTC!
6. RecordRTC on Ruby!
7. RecordRTC over Socket.io
8. ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!
9. RecordRTC / PHP / FFmpeg
10. Record Audio and upload to Nodejs server
11. ConcatenateBlobs.js - Concatenate multiple recordings in single Blob!
12. Remote audio-stream recording or a real p2p demo
13. Mp3 or Wav Recording
14. Record entire DIV including video, image, textarea, input, drag/move/resize, everything
15. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
16. Record Canvas2D Animation
17. WebGL animation recording
18. Plotly - WebGL animation recording

RecordRTC Documentation

1. RecordRTC API Reference
2. MRecordRTC API Reference
3. MediaStreamRecorder API Reference
4. StereoAudioRecorder API Reference
5. WhammyRecorder API Reference
6. Whammy API Reference
7. CanvasRecorder API Reference
8. GifRecorder API Reference
9. Global API Reference

License

RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.