RecordRTC to PHP ® Muaz Khan

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Record and POST to Server!


Try Audio+Video Recording on Firefox

  1. RecordRTC / PHP / FFmpeg (synced audio/video in single file!)
  2. RecordRTC-to-Nodejs (used ffmpeg to merge wav/webm in single WebM container)
  3. RecordRTC-to-PHP (audio/video recording and uploading to server)
  4. RecordRTC-to-ASP.NET MVC (audio/video recording and uploading to server)
  5. Canvas Recording! (webpage recording)
  6. MRecordRTC and writeToDisk/getFromDisk!
  7. RecordRTC-to-Socket.io (used ffmpeg to merge wav/webm in single WebM container)
  8. RecordRTC and ffmpeg-asm.js (ffmpeg inside the browser!)
  1. Both files are recorded and uploaded individually (wav/webm)
  2. You can merge/mux them in single format like avi or mkv — using tools like ffmpeg/avconv

Feedback

Enter your email too; if you want "direct" reply!

How to save recorded wav/webm file to PHP server?

  1. Write a PHP file to write recrded blob on disk
  2. Write Javascript to POST recorded blobs to server using XHR2/FormdData

PHP Code

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

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

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

        echo($uploadDirectory);
    }
}
?>

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

How to use RecordRTC?

<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>

How to record audio using RecordRTC?

var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(function(audioURL) {
   window.open(audioURL);
});

How to record video using RecordRTC?

var options = {
   type: 'video',
   video: {
      width: 320,
      height: 240
   },
   canvas: {
      width: 320,
      height: 240
   }
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(videoURL) {
   window.open(videoURL);
});

How to record animated GIF using RecordRTC?

var options = {
   type: 'gif',
   video: {
      width: 320,
      height: 240
   },
   canvas: {
      width: 320,
      height: 240
   },
   frameRate: 200,
   quality: 10
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(gifURL) {
   window.open(gifURL);
});

Possible issues/failures:

The biggest issue is that RecordRTC is unable to record both audio and video streams in single file.

Do you know "RecordRTC" fails recording audio because following conditions fails:

  1. Sample rate and channel configuration must be the same for input and output sides on Windows i.e. audio input/output devices must match
  2. Only the Default microphone device can be used for capturing.
  3. The requesting scheme is must be one of the following: http, https, chrome, extension's, or file (only works with --allow-file-access-from-files)
  4. The browser must be able to create/initialize the metadata database for the API under the profile directory

RecordRTC is MIT licensed on Github! Documentation

Latest Updates