Comparing version 0.0.3 to 0.0.4
{ | ||
"name": "recordrtc", | ||
"preferGlobal": true, | ||
"version": "0.0.3", | ||
"version": "0.0.4", | ||
"author": { | ||
@@ -9,3 +9,3 @@ "name": "Muaz Khan", | ||
}, | ||
"description": "RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording. Current experiment: 1) Records audio/video separately as wav/webm, 2) POST them in single HttpPost-Request to Node.js (FormData), 3) Node.js code saves them into disk, 4) Node.js code invokes ffmpeg to merge wav/webm in single 'webm' file, 5) The merged webm file is returned and played on the end!", | ||
"description": "RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording. Current experiment: 1. Records audio/video separately as wav/webm 2. POST both files in single HttpPost-Request to Node.js (FormData) 3. Node.js code saves both files into disk 4. Node.js code invokes ffmpeg to merge wav/webm in single WebM file 5. The merged webm file's URL is returned using same HTTP-callback for playback!", | ||
"contributors": [ | ||
@@ -38,3 +38,2 @@ { | ||
}, | ||
"readme": "#### [RecordRTC to Node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs)\r\n\r\nThis experiment:\r\n\r\n1. Records audio/video separately as wav/webm\r\n2. POST them in single HttpPost-Request to Node.js (FormData)\r\n3. Node.js code saves them into disk\r\n4. Node.js code invokes ffmpeg to merge wav/webm in single \"webm\" file\r\n5. The merged webm file is returned and played on the end!\r\n\r\n=\r\n\r\n##### How to install this package?\r\n\r\nIn node.js command prompt window:\r\n\r\n1. Type `npm recordrtc`; it will install in \"node_modules\" directory\r\n2. `cd node_modules\\recordrtc` to locate the directory\r\n3. `node index` to start `http://localhost:8000/`\r\n\r\n=\r\n\r\n##### Windows Batch File (`merger.bat`)\r\n\r\n`merger.bat` file is executed to invoke ffmpeg functionalities:\r\n\r\n```\r\n@echo off\r\n\"C:\\ffmpeg\\bin\\ffmpeg.exe\" -i %1 -i %2 %3\r\n```\r\n\r\n**It is assumed that you already have installed ffmpeg on your system.** Though, EXE file is hard-coded to \"C:\\ffmpeg\\bin\\ffmpeg.exe\" however you can easily edit it according to your own installations.\r\n\r\n=\r\n\r\n##### How to install ffmpeg on windows?\r\n\r\n1. Download ffmpeg and extract ZIP file\r\n2. Rename extracted directory to \"ffmpeg\"\r\n3. Right click over \"My Computer\" icon and select \"Properties\" context-menu option\r\n4. Select \"Advance system settings\" from top-left section\r\n5. Click \"Environment Variables...\" button from \"Advanced\" tab\r\n6. Click \"New...\" button and in the \"Variable name\" box, enter \"Path\".\r\n7. In the \"Variable value\" box, enter extracted directory full URI e.g. \"C:\\ffmpeg\"\r\n8. Click \"OK\" and done!\r\n\r\nhttp://www.wikihow.com/Install-FFmpeg-on-Windows\r\n\r\n=\r\n\r\n##### How to test?\r\n\r\nIn the node.js command prompt window; type `node index`; then open `http://localhost:8000/`.\r\n\r\n=\r\n\r\n##### `index.html`\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<title>RecordRTC over Node.js</title>\r\n\t\t<script src=\"https://www.WebRTC-Experiment.com/RecordRTC.js\"> </script>\r\n\t</head>\r\n\t<body>\r\n <video id=\"camera-preview\" controls style=\"border: 1px solid rgb(15, 158, 238); width: 94%;\"></video><hr />\r\n <button id=\"start-recording\">Start Recording</button>\r\n <button id=\"stop-recording\" disabled=\"\">Stop Recording</button>\r\n\t\t\r\n<script>\r\nvar startRecording = document.getElementById('start-recording');\r\nvar stopRecording = document.getElementById('stop-recording');\r\nvar cameraPreview = document.getElementById('camera-preview');\r\n\r\nvar audio = document.querySelector('audio');\r\n\r\nvar recordAudio, recordVideo;\r\nstartRecording.onclick = function() {\r\n startRecording.disabled = true;\r\n var video_constraints = {\r\n mandatory: { },\r\n optional: []\r\n };\r\n navigator.getUserMedia({\r\n audio: true,\r\n video: video_constraints\r\n }, function(stream) {\r\n cameraPreview.src = window.URL.createObjectURL(stream);\r\n cameraPreview.play();\r\n\r\n recordAudio = RecordRTC(stream, {\r\n bufferSize: 4096\r\n });\r\n\r\n recordVideo = RecordRTC(stream, {\r\n type: 'video'\r\n });\r\n\r\n recordAudio.startRecording();\r\n recordVideo.startRecording();\r\n\r\n stopRecording.disabled = false;\r\n });\r\n};\r\n\r\nvar fileName;\r\nstopRecording.onclick = function() {\r\n startRecording.disabled = false;\r\n stopRecording.disabled = true;\r\n\r\n fileName = Math.round(Math.random() * 99999999) + 99999999;\r\n\r\n recordAudio.stopRecording();\r\n recordVideo.stopRecording();\r\n\r\n recordAudio.getDataURL(function(audioDataURL) {\r\n recordVideo.getDataURL(function(videoDataURL) {\r\n var files = {\r\n audio: {\r\n name: fileName + '.wav',\r\n type: 'audio/wav',\r\n contents: audioDataURL\r\n },\r\n video: {\r\n name: fileName + '.webm',\r\n type: 'video/webm',\r\n contents: videoDataURL\r\n }\r\n };\r\n\r\n cameraPreview.src = '';\r\n cameraPreview.poster = 'ajax-loader.gif';\r\n\r\n xhr('/upload', JSON.stringify(files), function(fileName) {\r\n cameraPreview.src = location.href + 'uploads/' + fileName;\r\n cameraPreview.play();\r\n });\r\n });\r\n });\r\n};\r\n\r\nfunction xhr(url, data, callback) {\r\n var request = new XMLHttpRequest();\r\n request.onreadystatechange = function() {\r\n if (request.readyState == 4 && request.status == 200) {\r\n callback(request.responseText);\r\n }\r\n };\r\n request.open('POST', url);\r\n request.send(data);\r\n}\r\n</script>\r\n\t</body>\r\n</html>\r\n```\r\n\r\n=\r\n\r\n##### `index.js`\r\n\r\n```javascript\r\nvar server = require('./server'),\r\n handlers = require('./handlers'),\r\n router = require('./router'),\r\n handle = { };\r\n\r\nhandle[\"/\"] = handlers.home;\r\nhandle[\"/home\"] = handlers.home;\r\nhandle[\"/upload\"] = handlers.upload;\r\nhandle._static = handlers.serveStatic;\r\n\r\nserver.start(router.route, handle);\r\n```\r\n\r\n=\r\n\r\n##### `server.js`\r\n\r\n```javascript\r\nvar config = require('./config'),\r\n http = require('http'),\r\n url = require('url');\r\n\r\nfunction start(route, handle) {\r\n\r\n function onRequest(request, response) {\r\n\r\n var pathname = url.parse(request.url).pathname,\r\n postData = '';\r\n\r\n request.setEncoding('utf8');\r\n\r\n request.addListener('data', function(postDataChunk) {\r\n postData += postDataChunk;\r\n });\r\n\r\n request.addListener('end', function() {\r\n route(handle, pathname, response, postData);\r\n });\r\n }\r\n\r\n http.createServer(onRequest).listen(config.port);\r\n}\r\n\r\nexports.start = start;\r\n```\r\n\r\n=\r\n\r\n##### `handlers.js`\r\n\r\n```javascript\r\nvar config = require('./config'),\r\n fs = require('fs'),\r\n sys = require('sys'),\r\n exec = require('child_process').exec;\r\n\r\nfunction home(response, postData) {\r\n response.writeHead(200, { 'Content-Type': 'text/html' });\r\n response.end(fs.readFileSync('./static/index.html'));\r\n}\r\n\r\n// this function uploads files\r\n\r\nfunction upload(response, postData) {\r\n var files = JSON.parse(postData);\r\n\r\n // writing audio file to disk\r\n _upload(response, files.audio);\r\n\r\n // writing video file to disk\r\n _upload(response, files.video);\r\n\r\n merge(response, files);\r\n}\r\n\r\n// this function merges wav/webm files\r\n\r\nfunction merge(response, files) {\r\n // following command tries to merge wav/webm files using ffmpeg\r\n var merger = __dirname + '\\\\merger.bat';\r\n var audioFile = __dirname + '\\\\uploads\\\\' + files.audio.name;\r\n var videoFile = __dirname + '\\\\uploads\\\\' + files.video.name;\r\n var mergedFile = __dirname + '\\\\uploads\\\\' + files.audio.name.split('.')[0] + '-merged.webm';\r\n\r\n // if a \"directory\" has space in its name; below command will fail\r\n // e.g. \"c:\\\\dir name\\\\uploads\" will fail.\r\n // it must be like this: \"c:\\\\dir-name\\\\uploads\"\r\n var command = merger + ', ' + videoFile + \" \" + audioFile + \" \" + mergedFile + '';\r\n var cmd = exec(command, function(error, stdout, stderr) {\r\n if (error) {\r\n console.log(error.stack);\r\n console.log('Error code: ' + error.code);\r\n console.log('Signal received: ' + error.signal);\r\n } else {\r\n response.statusCode = 200;\r\n response.writeHead(200, { 'Content-Type': 'application/json' });\r\n response.end(files.audio.name.split('.')[0] + '-merged.webm');\r\n\r\n // removing audio/video files\r\n fs.unlink(audioFile);\r\n fs.unlink(videoFile);\r\n\r\n // auto delete file after 1-minute\r\n setTimeout(function() {\r\n fs.unlink(mergedFile);\r\n }, 60 * 1000);\r\n }\r\n });\r\n}\r\n\r\nfunction _upload(response, file) {\r\n var fileRootName = file.name.split('.').shift(),\r\n fileExtension = file.name.split('.').pop(),\r\n filePathBase = config.upload_dir + '/',\r\n fileRootNameWithBase = filePathBase + fileRootName,\r\n filePath = fileRootNameWithBase + '.' + fileExtension,\r\n fileID = 2,\r\n fileBuffer;\r\n\r\n while (fs.existsSync(filePath)) {\r\n filePath = fileRootNameWithBase + '(' + fileID + ').' + fileExtension;\r\n fileID += 1;\r\n }\r\n\r\n file.contents = file.contents.split(',').pop();\r\n\r\n fileBuffer = new Buffer(file.contents, \"base64\");\r\n\r\n if (config.s3_enabled) {\r\n\r\n var knox = require('knox'),\r\n client = knox.createClient(config.s3),\r\n headers = { 'Content-Type': file.type };\r\n\r\n client.putBuffer(fileBuffer, fileRootName, headers);\r\n\r\n } else {\r\n fs.writeFileSync(filePath, fileBuffer);\r\n }\r\n}\r\n\r\nfunction serveStatic(response, pathname, postData) {\r\n\r\n var extension = pathname.split('.').pop(),\r\n extensionTypes = {\r\n 'js': 'application/javascript',\r\n 'webm': 'video/webm',\r\n 'gif': 'image/gif'\r\n };\r\n\r\n response.writeHead(200, { 'Content-Type': extensionTypes[extension] });\r\n if (extensionTypes[extension] == 'video/webm')\r\n response.end(fs.readFileSync('.' + pathname));\r\n else\r\n response.end(fs.readFileSync('./static' + pathname));\r\n}\r\n\r\nexports.home = home;\r\nexports.upload = upload;\r\nexports.serveStatic = serveStatic;\r\n```\r\n\r\n=\r\n\r\n##### `router.js`\r\n\r\n```javascript\r\nfunction respondWithHTTPCode(response, code) {\r\n response.writeHead(code, { 'Content-Type': 'text/plain' });\r\n response.end();\r\n}\r\n\r\nfunction route(handle, pathname, response, postData) {\r\n\r\n var extension = pathname.split('.').pop();\r\n\r\n var staticFiles = {\r\n js: 'js',\r\n gif: 'gif',\r\n css: 'css',\r\n webm: 'webm'\r\n };\r\n\r\n if ('function' === typeof handle[pathname]) {\r\n handle[pathname](response, postData);\r\n } else if (staticFiles[extension]) {\r\n handle._static(response, pathname, postData);\r\n } else {\r\n respondWithHTTPCode(response, 404);\r\n }\r\n}\r\n\r\nexports.route = route;\r\n```\r\n\r\n=\r\n\r\n##### `config.js`\r\n\r\n```javascript\r\nexports.port = 8000;\r\nexports.upload_dir = './uploads';\r\n\r\nexports.s3 = {\r\n key: '',\r\n secret: '',\r\n bucket: ''\r\n};\r\n\r\nexports.s3_enabled = false;\r\n```\r\n\r\n=\r\n\r\n##### License\r\n\r\n[RecordRTC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/+MuazKhan).\r\n", | ||
"readmeFilename": "README.md", | ||
@@ -45,4 +44,4 @@ "bugs": { | ||
"homepage": "https://github.com/muaz-khan/WebRTC-Experiment", | ||
"_id": "recordrtc@0.0.3", | ||
"_id": "recordrtc@0.0.4", | ||
"_from": "recordrtc@" | ||
} |
160
README.md
#### [RecordRTC to Node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs) | ||
<a href="https://nodei.co/npm/recordrtc/"> | ||
<img src="https://nodei.co/npm/recordrtc.png"> | ||
</a> | ||
``` | ||
@@ -7,3 +11,3 @@ npm install recordrtc | ||
// to run! | ||
node node_modules/recordrtc/index.js | ||
node ./node_modules/recordrtc/index.js | ||
``` | ||
@@ -14,6 +18,6 @@ | ||
1. Records audio/video separately as wav/webm | ||
2. POST them in single HttpPost-Request to Node.js (FormData) | ||
3. Node.js code saves them into disk | ||
2. POST both files in single HttpPost-Request to Node.js (FormData) | ||
3. Node.js code saves both files into disk | ||
4. Node.js code invokes ffmpeg to merge wav/webm in single "webm" file | ||
5. The merged webm file is returned and played on the end! | ||
5. The merged webm file's URL is returned using same HTTP-callback for playback! | ||
@@ -24,3 +28,3 @@ = | ||
`merger.bat` file is executed to invoke ffmpeg functionalities: | ||
`merger.bat` file is executed to invoke ffmpeg functionalities on windows: | ||
@@ -36,2 +40,14 @@ ``` | ||
##### `.sh` file | ||
`merger.sh` file is executed to invoke ffmpeg functionalities on Mac/Linux/etc. | ||
``` | ||
ffmpeg -i video-file.webm -i audio-file.wav -map 0:0 -map 1:0 output-file-name.webm | ||
``` | ||
Using Linux; ffmpeg installation is super-easy! You can install DEVEL packages as well. | ||
= | ||
##### How to install ffmpeg on windows? | ||
@@ -52,7 +68,10 @@ | ||
##### How to install ffmpeg on mac osx? | ||
##### How to install ffmpeg on Mac OSX? | ||
1. make sure you have homebrew installed | ||
2. run `brew install ffmpeg --with-libvpx --with-theora --whit-libogg --with-libvorbis` | ||
Make sure you have **homebrew** installed. Then run following command: | ||
``` | ||
brew install ffmpeg --with-libvpx --with-theora --whit-libogg --with-libvorbis | ||
``` | ||
##### How to test? | ||
@@ -64,17 +83,5 @@ | ||
##### `index.html` | ||
##### RecordRTC invocation code in `index.html` | ||
```html | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>RecordRTC over Node.js</title> | ||
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"> </script> | ||
</head> | ||
<body> | ||
<video id="camera-preview" controls style="border: 1px solid rgb(15, 158, 238); width: 94%;"></video><hr /> | ||
<button id="start-recording">Start Recording</button> | ||
<button id="stop-recording" disabled="">Stop Recording</button> | ||
<script> | ||
```javascript | ||
var startRecording = document.getElementById('start-recording'); | ||
@@ -141,6 +148,7 @@ var stopRecording = document.getElementById('stop-recording'); | ||
cameraPreview.src = ''; | ||
cameraPreview.poster = 'ajax-loader.gif'; | ||
cameraPreview.poster = '//www.webrtc-experiment.com/images/ajax-loader.gif'; | ||
xhr('/upload', JSON.stringify(files), function(fileName) { | ||
cameraPreview.src = location.href + 'uploads/' + fileName; | ||
var href = location.href.substr(0, location.href.lastIndexOf('/') + 1); | ||
cameraPreview.src = href + 'uploads/' + fileName; | ||
cameraPreview.play(); | ||
@@ -162,5 +170,2 @@ }); | ||
} | ||
</script> | ||
</body> | ||
</html> | ||
``` | ||
@@ -251,32 +256,79 @@ | ||
function merge(response, files) { | ||
// following command tries to merge wav/webm files using ffmpeg | ||
var merger = __dirname + '\\merger.bat'; | ||
var audioFile = __dirname + '\\uploads\\' + files.audio.name; | ||
var videoFile = __dirname + '\\uploads\\' + files.video.name; | ||
var mergedFile = __dirname + '\\uploads\\' + files.audio.name.split('.')[0] + '-merged.webm'; | ||
// detect the current operating system | ||
var isWin = !!process.platform.match(/^win/); | ||
// if a "directory" has space in its name; below command will fail | ||
// e.g. "c:\\dir name\\uploads" will fail. | ||
// it must be like this: "c:\\dir-name\\uploads" | ||
var command = merger + ', ' + videoFile + " " + audioFile + " " + mergedFile + ''; | ||
var cmd = exec(command, function(error, stdout, stderr) { | ||
if (error) { | ||
console.log(error.stack); | ||
console.log('Error code: ' + error.code); | ||
console.log('Signal received: ' + error.signal); | ||
} else { | ||
response.statusCode = 200; | ||
response.writeHead(200, { 'Content-Type': 'application/json' }); | ||
response.end(files.audio.name.split('.')[0] + '-merged.webm'); | ||
if (isWin) { | ||
// following command tries to merge wav/webm files using ffmpeg | ||
var merger = __dirname + '\\merger.bat'; | ||
var audioFile = __dirname + '\\uploads\\' + files.audio.name; | ||
var videoFile = __dirname + '\\uploads\\' + files.video.name; | ||
var mergedFile = __dirname + '\\uploads\\' + files.audio.name.split('.')[0] + '-merged.webm'; | ||
// removing audio/video files | ||
fs.unlink(audioFile); | ||
fs.unlink(videoFile); | ||
// if a "directory" has space in its name; below command will fail | ||
// e.g. "c:\\dir name\\uploads" will fail. | ||
// it must be like this: "c:\\dir-name\\uploads" | ||
var command = merger + ', ' + videoFile + " " + audioFile + " " + mergedFile + ''; | ||
var cmd = exec(command, function(error, stdout, stderr) { | ||
if (error) { | ||
console.log(error.stack); | ||
console.log('Error code: ' + error.code); | ||
console.log('Signal received: ' + error.signal); | ||
response.statusCode = 404; | ||
response.end(); | ||
} else { | ||
response.statusCode = 200; | ||
response.writeHead(200, { 'Content-Type': 'application/json' }); | ||
response.end(files.audio.name.split('.')[0] + '-merged.webm'); | ||
// auto delete file after 1-minute | ||
setTimeout(function() { | ||
fs.unlink(mergedFile); | ||
}, 60 * 1000); | ||
} | ||
}); | ||
// removing audio/video files | ||
fs.unlink(audioFile); | ||
fs.unlink(videoFile); | ||
// auto delete file after 1-minute | ||
setTimeout(function() { | ||
fs.unlink(mergedFile); | ||
}, 60 * 1000); | ||
} | ||
}); | ||
} else { // its probably *nix, assume ffmpeg is available | ||
var audioFile = __dirname + '/uploads/' + files.audio.name; | ||
var videoFile = __dirname + '/uploads/' + files.video.name; | ||
var mergedFile = __dirname + '/uploads/' + files.audio.name.split('.')[0] + '-merged.webm'; | ||
var util = require('util'), | ||
exec = require('child_process').exec; | ||
//child_process = require('child_process'); | ||
var command = "ffmpeg -i " + videoFile + " -i " + audioFile + " -map 0:0 -map 1:0 " + mergedFile; | ||
var child = exec(command, function(error, stdout, stderr){ | ||
stdout ? util.print('stdout: ' + stdout) : null; | ||
stderr ? util.print('stderr: ' + stderr) : null; | ||
if (error) { | ||
console.log('exec error: ' + error); | ||
response.statusCode = 404; | ||
response.end(); | ||
} else { | ||
response.statusCode = 200; | ||
response.writeHead(200, { 'Content-Type': 'application/json' }); | ||
response.end(files.audio.name.split('.')[0] + '-merged.webm'); | ||
// removing audio/video files | ||
fs.unlink(audioFile); | ||
fs.unlink(videoFile); | ||
// auto delete file after 1-minute | ||
setTimeout(function() { | ||
fs.unlink(mergedFile); | ||
}, 60 * 1000); | ||
} | ||
}); | ||
} | ||
} | ||
@@ -283,0 +335,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
434
3
93176