RecordRTC to PHP / Try LIVE Demo

Please check tutorial: RecordRTC and Upload to PHP Server

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:

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

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

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) { + 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);

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
  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


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