updated from @rjmackay and socektio-over-nodejs.

Merged-all and closed muaz-khan#238, closed muaz-khan#239, closed muaz-khan#240, and closed muaz-khan#241
Husniddin · Jul 15, 2014 · 07754da · 07754da
1 parent e53c91c
commit 07754da
Show file tree

Hide file tree

Showing 21 changed files with 912 additions and 424 deletions.
diff --git a/RecordRTC/AudioVideo-on-Firefox.html b/RecordRTC/AudioVideo-on-Firefox.html
@@ -15,6 +15,7 @@
         <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
         <meta name="author" content="Muaz Khan">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
         <link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">
 
         <style>
@@ -50,7 +51,7 @@
         </script>
 
         <!-- script used for audio/video/gif recording -->
-        <script src="//www.webrtc-experiment.com/RecordRTC.js"> </script>
+        <script src="https://www.webrtc-experiment.com/RecordRTC.js"> </script>
     </head>
 
     <body>
@@ -78,6 +79,8 @@ <h1>
                 </p>
             </header>
 
+            <div class="github-stargazers"></div>
+
             <blockquote>
                 This <a href="https://www.webrtc-experiment.com/">WebRTC</a> experiment records both audio/video in single WebM/mp4 container/format using MediaRecorder API! It currently works only on Firefox &gt;= 29.<br /><br />
                 For chrome, please try <a href="https://www.webrtc-experiment.com/RecordRTC/">https://www.webrtc-experiment.com/RecordRTC/</a>.
@@ -89,7 +92,7 @@ <h1>
                 <h2 class="header">Record Audio+Video using Firefox &gt;= 29</h2>
                 <div class="inner">
                     <h2 id="download-url"></h2><br />
-                    <video id="video" autoplay controls></video><hr />
+                    <video id="video"></video><hr />
                     <button id="start-recording">Record Audio+Video</button>
                     <button id="stop-recording" disabled>Stop</button><br />
                 </div>
@@ -121,13 +124,26 @@ <h2 id="download-url"></h2><br />
                     window.audioVideoRecorder.stopRecording(function(url) {
                         downloadURL.innerHTML = '<a href="' + url + '" download="RecordRTC.webm" target="_blank">Save RecordRTC.webm to Disk!</a>';
                         video.src = url;
+                        video.muted = false;
+                        video.play();
+
+                        video.onended = function() {
+                            video.pause();
+
+                            // dirty workaround for: "firefox seems unable to playback"
+                            video.src = URL.createObjectURL(audioVideoRecorder.getBlob());
+                        };
                     });
                 };
 
                 function captureUserMedia(callback) {
                     navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
                     navigator.getUserMedia({ audio: true, video: true }, function(stream) {
                         video.src = URL.createObjectURL(stream);
+                        video.muted = true;
+                        video.controls = true;
+                        video.play();
+
                         callback(stream);
                     }, function(error) { console.error(error); });
                 }

diff --git a/RecordRTC/README.md b/RecordRTC/README.md
@@ -12,6 +12,24 @@
 // Android (Firefox) [ only video ]
 ```
 
+<a href="https://nodei.co/npm/recordrtc/">
+    <img src="https://nodei.co/npm/recordrtc.png">
+</a>
+
+```
+npm install recordrtc
+```
+
+To use it:
+
+```htm
+<script src="./node_modules/recordrtc/RecordRTC.js"></script>
+```
+
+There are some other NPM packages regarding RecordRTC:
+
+* https://www.npmjs.org/search?q=RecordRTC
+
 =
 
 ## How RecordRTC encodes wav/webm?

diff --git a/RecordRTC/RecordRTC-over-Socketio/.gitignore b/RecordRTC/RecordRTC-over-Socketio/.gitignore
@@ -0,0 +1 @@
+node_modules/*
diff --git a/RecordRTC/RecordRTC-over-Socketio/README.md b/RecordRTC/RecordRTC-over-Socketio/README.md
@@ -1,5 +1,20 @@
 #### [RecordRTC over Socket.io](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-over-Socketio)
 
+<a href="https://nodei.co/npm/recordrtc-socketio/">
+    <img src="https://nodei.co/npm/recordrtc-socketio.png">
+</a>
+
+```
+npm install recordrtc-socketio
+
+// to run it!
+node ./node_modules/recordrtc-socketio/server.js
+```
+
+There are some other NPM packages regarding RecordRTC:
+
+* https://www.npmjs.org/search?q=RecordRTC
+
 This experiment:
 
 1. Records audio/video separately as wav/webm
@@ -11,7 +26,7 @@ This experiment:
 Client side stuff:
 
 ```javascript
-var socketio = io.connect('http://localhost:8888/');
+var socketio = io();
 
 var files = {
     audio: {

diff --git a/RecordRTC/RecordRTC-over-Socketio/index.html b/RecordRTC/RecordRTC-over-Socketio/index.html
@@ -23,7 +23,7 @@
         <meta name="author" content="Muaz Khan">
 
         <script src="https://www.webrtc-experiment.com/RecordRTC.js"> </script>
-        <script src="https://www.webrtc-experiment.com/socket.io.js"> </script>
+        <script src="/socket.io/socket.io.js"> </script>
 
         <style>
             html { background-color: #f7f7f7; }
@@ -53,7 +53,7 @@
     <body>
         <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/RecordRTC-over-Socketio">over Socket.io</a></h1>
         <p>
-            <video id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video> 
+            <video id="camera-preview" style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video>
         </p>
 
         <div style="display:none;">
@@ -75,7 +75,9 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
                 cameraPreview.parentNode.innerHTML = '<audio id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></audio> ';
             }
 
-            var socketio = io.connect('http://localhost:8888/');
+            var socketio = io();
+
+            var mediaStream = null;
 
             socketio.on('connect', function() {
                 startRecording.disabled = false;
@@ -95,12 +97,17 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
                         audio: true,
                         video: true
                     }, function(stream) {
+                        mediaStream = stream;
+
                         recordAudio = RecordRTC(stream, {
                             onAudioProcessStarted: function() {
                                 recordVideoSeparately && recordVideo.startRecording();
 
                                 cameraPreview.src = window.URL.createObjectURL(stream);
                                 cameraPreview.play();
+
+                                cameraPreview.muted = true;
+                                cameraPreview.controls = false;
                             }
                         });
 
@@ -120,8 +127,6 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
                 startRecording.disabled = false;
                 stopRecording.disabled = true;
 
-                var fileName = Math.round(Math.random() * 99999999) + 99999999;
-
                 // stop audio recorder
                 recordVideoSeparately && recordAudio.stopRecording(function() {
                     // stop video recorder
@@ -134,18 +139,18 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
                             recordVideo.getDataURL(function(videoDataURL) {
                                 var files = {
                                     audio: {
-                                        name: fileName + '.wav',
                                         type: recordAudio.getBlob().type || 'audio/wav',
                                         dataURL: audioDataURL
                                     },
                                     video: {
-                                        name: fileName + '.webm',
                                         type: recordVideo.getBlob().type || 'video/webm',
                                         dataURL: videoDataURL
                                     }
                                 };
 
                                 socketio.emit('message', files);
+
+                                if(mediaStream) mediaStream.stop();
                             });
 
                         });
@@ -163,13 +168,13 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
                     recordAudio.getDataURL(function(audioDataURL) {
                         var files = {
                             audio: {
-                                name: fileName + '.wav',
                                 type: recordAudio.getBlob().type || 'audio/wav',
                                 dataURL: audioDataURL
                             }
                         };
 
                         socketio.emit('message', files);
+                        if(mediaStream) mediaStream.stop();
                      });
 
                     cameraPreview.src = '';
@@ -189,6 +194,8 @@ <h1><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRT
 
                 cameraPreview.src = href
                 cameraPreview.play();
+                cameraPreview.muted = false;
+                cameraPreview.controls = true;
             });
 
             socketio.on('ffmpeg-output', function(result) {

diff --git a/RecordRTC/RecordRTC-over-Socketio/merger.bat b/RecordRTC/RecordRTC-over-Socketio/merger.bat
diff --git a/RecordRTC/RecordRTC-over-Socketio/merger.sh b/RecordRTC/RecordRTC-over-Socketio/merger.sh
diff --git a/RecordRTC/RecordRTC-over-Socketio/package.json b/RecordRTC/RecordRTC-over-Socketio/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "recordrtc-socketio",
+  "preferGlobal": true,
+  "version": "1.0.5",
+  "author": {
+    "name": "Muaz Khan",
+    "email": "[email protected]"
+  },
+  "description": "Records audio/video separately as wav/webm. Emits both files using socket.io. Socket.io server end receives emitted data; and writes wav/web files to disk. Node.js code invokes ffmpeg to merge wav/webm in single webm file. Socket.io server emits merged event; and passes-back the URL of the merged file",
+  "contributors": [
+    {
+      "name": "Muaz Khan",
+      "email": "[email protected]"
+    }
+  ],
+  "scripts": {
+    "start": "node server.js"
+  },
+  "main": "./server.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muaz-khan/WebRTC-Experiment.git"
+  },
+  "keywords": [
+    "webrtc",
+    "javascript",
+    "RecordRTC",
+    "socket.io",
+    "Node.js",
+    "ffmpeg",
+    "audio-recording",
+    "video-recording",
+    "gif-recording",
+    "audio/video recording",
+    "webp",
+    "webm",
+    "wav"
+  ],
+  "analyze": false,
+  "license": "MIT",
+  "engines": {
+    "node": ">=0.6"
+  },
+  "dependencies": {
+    "socket.io": "^1.0.6",
+    "fluent-ffmpeg": "^1.7.2",
+    "node-uuid": "^1.4.1"
+  },
+  "readmeFilename": "README.md",
+  "bugs": {
+    "url": "https://github.com/muaz-khan/WebRTC-Experiment/issues"
+  },
+  "homepage": "https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs",
+  "_id": "[email protected]",
+  "_from": "recordrtc-socketio@"
+}