Skip to content

Commit

Permalink
Fixed #71
Browse files Browse the repository at this point in the history
  • Loading branch information
@muaz-khan
muaz-khan committed Mar 6, 2017
1 parent c77a242 commit 2b68910
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 111 deletions.
2 changes: 1 addition & 1 deletion PHP-and-FFmpeg/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# RecordRTC / PHP / FFmpeg

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/PHP-and-FFmpeg
https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg

This demo can:

Expand Down
179 changes: 86 additions & 93 deletions PHP-and-FFmpeg/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,7 @@

<body style="text-align: center;">
<h1>
<a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>
<a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC-to-PHP">PHP</a>
<a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg">FFmpeg</a>
RecordRTC / PHP / FFmpeg
</h1>
<section class="experiment">
<p style="text-align: center;">
Expand All @@ -81,108 +79,103 @@ <h1>
<div id="container" style="padding: 1em 2em;"></div>
</section>

<script>
// todo: this demo need to be updated for Firefox.
// it currently focuses only chrome.

function PostBlob(audioBlob, videoBlob, fileName) {
var formData = new FormData();
formData.append('filename', fileName);
formData.append('audio-blob', audioBlob);
formData.append('video-blob', videoBlob);
xhr('save.php', formData, function(ffmpeg_output) {
document.querySelector('h1').innerHTML = ffmpeg_output.replace(/\\n/g, '<br />');
preview.src = 'uploads/' + fileName + '-merged.webm';
preview.play();
preview.muted = false;
<script>
function PostBlob(audioBlob, videoBlob, fileName) {
var formData = new FormData();
formData.append('filename', fileName);
formData.append('audio-blob', audioBlob);
formData.append('video-blob', videoBlob);
xhr('save.php', formData, function(ffmpeg_output) {
document.querySelector('h1').innerHTML = ffmpeg_output.replace(/\\n/g, '<br />');
preview.src = 'uploads/' + fileName + '-merged.webm';
preview.play();
preview.muted = false;
});
}

var record = document.getElementById('record');
var stop = document.getElementById('stop');

var audio = document.querySelector('audio');

var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('preview');

var container = document.getElementById('container');

var recordAudio, recordVideo;
record.onclick = function() {
record.disabled = true;
!window.stream && navigator.getUserMedia({
audio: true,
video: true
}, function(stream) {
window.stream = stream;
onstream();
}, function(error) {
alert(JSON.stringify(error, null, '\t'));
});

window.stream && onstream();

function onstream() {
preview.src = window.URL.createObjectURL(stream);
preview.play();
preview.muted = true;

recordAudio = RecordRTC(stream, {
type: 'audio',
recorderType: StereoAudioRecorder,
// bufferSize: 16384,
onAudioProcessStarted: function() {
recordVideo.startRecording();
}
});
}

var record = document.getElementById('record');
var stop = document.getElementById('stop');

var audio = document.querySelector('audio');

var recordVideo = document.getElementById('record-video');
var preview = document.getElementById('preview');

var container = document.getElementById('container');

var isFirefox = !!navigator.mozGetUserMedia;

var recordAudio, recordVideo;
record.onclick = function() {
record.disabled = true;
!window.stream && navigator.getUserMedia({
audio: true,
video: true
}, function(stream) {
window.stream = stream;
onstream();
}, function(error) {
alert(JSON.stringify(error, null, '\t'));
var videoOnlyStream = new MediaStream();
videoOnlyStream.addTrack(stream.getVideoTracks()[0]);
type: 'video',
// recorderType: MediaStreamRecorder || WhammyRecorder
});

window.stream && onstream();

function onstream() {
preview.src = window.URL.createObjectURL(stream);
preview.play();
preview.muted = true;

recordAudio = RecordRTC(stream, {
// bufferSize: 16384,
onAudioProcessStarted: function() {
if (!isFirefox) {
recordVideo.startRecording();
}
}
});
recordAudio.startRecording();

recordVideo = RecordRTC(stream, {
type: 'video'
});

recordAudio.startRecording();

stop.disabled = false;
}
};
stop.disabled = false;
}
};

var fileName;
stop.onclick = function() {
document.querySelector('h1').innerHTML = 'Getting Blobs...';
var fileName;
stop.onclick = function() {
document.querySelector('h1').innerHTML = 'Getting Blobs...';

record.disabled = false;
stop.disabled = true;
record.disabled = false;
stop.disabled = true;

preview.src = '';
preview.poster = 'ajax-loader.gif';
preview.src = '';
preview.poster = 'ajax-loader.gif';

fileName = Math.round(Math.random() * 99999999) + 99999999;
fileName = Math.round(Math.random() * 99999999) + 99999999;

if (!isFirefox) {
recordAudio.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Got audio-blob. Getting video-blob...';
recordVideo.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Uploading to server...';
PostBlob(recordAudio.getBlob(), recordVideo.getBlob(), fileName);
});
});
recordAudio.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Got audio-blob. Getting video-blob...';
recordVideo.stopRecording(function() {
document.querySelector('h1').innerHTML = 'Uploading to server...';
PostBlob(recordAudio.getBlob(), recordVideo.getBlob(), fileName);
});
});
};

function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};

function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
};
request.open('POST', url);
request.send(data);
}
</script>
request.open('POST', url);
request.send(data);
}
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion PHP-and-FFmpeg/save.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?php
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Documentation - github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
// Documentation - github.com/muaz-khan/RecordRTC

// make sure that you're using newest ffmpeg version!

Expand Down
2 changes: 1 addition & 1 deletion PHP-and-FFmpeg/uploads/README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/PHP-and-FFmpeg
https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg
29 changes: 18 additions & 11 deletions RecordRTC-to-PHP/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,17 @@ Following snippets explains how to POST recorded audio/video files to PHP server
<?php
foreach(array('video', 'audio') as $type) {
if (isset($_FILES["${type}-blob"])) {

echo 'uploads/';

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

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

echo($uploadDirectory);
echo($fileName);
}
}
?>
Expand Down Expand Up @@ -56,19 +58,24 @@ function xhr(url, data, callback) {

## RecordRTC Demos

1. [RecordRTC to Node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs)
2. [RecordRTC to PHP](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP)
3. [RecordRTC to ASP.NET MVC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-ASPNETMVC)
4. [RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/Canvas-Recording)
5. [MRecordRTC i.e. Multi-RecordRTC!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC)
1. [RecordRTC to Node.js](https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs)
2. [RecordRTC to PHP](https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP)
3. [RecordRTC to ASP.NET MVC](https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC)
4. [RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!](https://github.com/muaz-khan/RecordRTC/tree/master/Canvas-Recording)
5. [MRecordRTC i.e. Multi-RecordRTC!](https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC)
6. [RecordRTC on Ruby!](https://github.com/cbetta/record-rtc-experiment)
7. [RecordRTC over Socket.io](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-over-Socketio)
7. [RecordRTC over Socket.io](https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio)
8. [ffmpeg-asm.js and RecordRTC! Audio/Video Merging & Transcoding!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg)
9. [RecordRTC / PHP / FFmpeg](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/PHP-and-FFmpeg)
9. [RecordRTC / PHP / FFmpeg](https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg)
10. [Record Audio and upload to Nodejs server](https://www.npmjs.org/package/record-audio)
11. [ConcatenateBlobs.js](https://github.com/muaz-khan/ConcatenateBlobs) - Concatenate multiple recordings in single Blob!
12. [Remote stream recording](https://www.webrtc-experiment.com/demos/remote-stream-recording.html)
12. [Remote audio-stream recording](https://www.webrtc-experiment.com/demos/remote-stream-recording.html) or [a real p2p demo](https://www.webrtc-experiment.com/RTCMultiConnection/RecordRTC-and-RTCMultiConnection.html)
13. [Mp3 or Wav Recording](https://www.webrtc-experiment.com/RecordRTC/Record-Mp3-or-Wav.html)
14. [Record entire DIV including video, image, textarea, input, drag/move/resize, everything](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/)
15. [Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html)
16. [Record Canvas2D Animation](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording.html)
17. [WebGL animation recording](https://www.webrtc-experiment.com/RecordRTC/webgl/)
18. [Plotly - WebGL animation recording](https://www.webrtc-experiment.com/RecordRTC/plotly.html)

## RecordRTC Documentation

Expand Down
6 changes: 3 additions & 3 deletions RecordRTC-to-PHP/save.php
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<?php
// Muaz Khan - www.MuazKhan.com
// MIT License - https://www.webrtc-experiment.com/licence/
// Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
// Documentation - https://github.com/muaz-khan/RecordRTC
foreach(array('video', 'audio') as $type) {
if (isset($_FILES["${type}-blob"])) {

echo 'uploads/';

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

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

echo($fileName);
echo($fileName);
}
}
?>
2 changes: 1 addition & 1 deletion RecordRTC-to-PHP/uploads/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
## Source Code:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP
https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP

This directory contains wav/webm files.

0 comments on commit 2b68910

Please sign in to comment.