RecordRTC to PHP ® Muaz Khan
Copyright © 2013 Muaz Khan<@muazkh> » @WebRTC Experiments » Google+ » What's New?
Record and POST to Server!
- Both files are recorded and uploaded individually (wav/webm)
- You can merge/mux them in single format like avi or mkv — using tools like ffmpeg/avconv
Feedback
How to save recorded wav/webm file to PHP server?
- Write a PHP file to write recrded blob on disk
- 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:
- Sample rate and channel configuration must be the same for input and output sides on Windows i.e. audio input/output devices must match
- Only the Default microphone device can be used for capturing.
- 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)
- 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