RecordRTC to ASP.NET MVC ® Muaz Khan

Copyright © 2013 Muaz Khan<@@muazkh> » @@WebRTC Experiments » Google+ » What's New?

Record and POST to Server!


  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 IIS server?

  1. Write a csharp class (*.cs) to write recrded blob on disk
  2. Write Javascript to POST recorded blobs to server using XHR2/FormdData

ASP.NET MVC (CSharp) Code

[HttpPost]
public ActionResult PostRecordedAudioVideo()
{
     foreach (string upload in Request.Files)
     {
          var path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
          var file = Request.Files[upload];
          if (file == null) continue;

          file.SaveAs(Path.Combine(path, Request.Form[0]));
     }
     return Json(Request.Form[0]);
}

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('/RecordRTC/PostRecordedAudioVideo', formData, function (fName) {
    window.open(location.href + 'uploads/' + 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);
}

To Delete File

[HttpPost]
public ActionResult DeleteFile()
{
    var fileUrl = AppDomain.CurrentDomain.BaseDirectory + "uploads/" 
                + Request.Form["delete-file"];
    new FileInfo(fileUrl + ".wav").Delete();
    new FileInfo(fileUrl + ".webm").Delete();
    return Json(true);
}

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