├── package.json
├── README.md
├── ConcatenateBlobs.js
└── index.html


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "concatenateblobs",
 3 |   "preferGlobal": true,
 4 |   "version": "1.0.3",
 5 |   "author": {
 6 |     "name": "Muaz Khan",
 7 |     "email": "muazkh@gmail.com",
 8 |     "url": "http://www.muazkhan.com/"
 9 |   },
10 |   "description": "Simply pass array of blobs. This javascript library will concatenate all blobs in single Blob object.",
11 |   "scripts": {
12 |     "start": "node ConcatenateBlobs.js"
13 |   },
14 |   "main": "./ConcatenateBlobs.js",
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/muaz-khan/ConcatenateBlobs.git"
18 |   },
19 |   "keywords": [
20 |     "concatenateblobs",
21 |     "library",
22 |     "javascript",
23 |     "chrome",
24 |     "firefox",
25 |     "opera",
26 |     "ie",
27 |     "internet-explorer",
28 |     "android",
29 |     "concatenate-blobs",
30 |     "concatenateblobs.js",
31 |     "mergeblobs",
32 |     "merge-blobs",
33 |     "javascript-library",
34 |     "muaz",
35 |     "muaz-khan"
36 |   ],
37 |   "analyze": false,
38 |   "license": "MIT",
39 |   "readmeFilename": "README.md",
40 |   "bugs": {
41 |     "url": "https://github.com/muaz-khan/ConcatenateBlobs/issues",
42 |     "email": "muazkh@gmail.com"
43 |   },
44 |   "homepage": "https://www.webrtc-experiment.com/ConcatenateBlobs/",
45 |   "_id": "concatenateblobs@",
46 |   "_from": "concatenateblobs@"
47 | }
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## [ConcatenateBlobs.js](https://github.com/muaz-khan/ConcatenateBlobs)  [![npm](https://img.shields.io/npm/v/concatenateblobs.svg)](https://npmjs.org/package/concatenateblobs) [![downloads](https://img.shields.io/npm/dm/concatenateblobs.svg)](https://npmjs.org/package/concatenateblobs)
 2 | 
 3 | Demo: https://www.WebRTC-Experiment.com/ConcatenateBlobs/
 4 | 
 5 | > Simply pass array of blobs.
 6 | > This javascript library will concatenate all blobs in single "Blob" object.
 7 | 
 8 | It is <a href="https://www.webrtc-experiment.com/licence/">MIT Licenced</a>, which means that you can use it in any commercial/non-commercial product, free of cost.
 9 | 
10 | ```
11 | npm install concatenateblobs
12 | 
13 | # to use in nodejs
14 | var ConcatenateBlobs = require('concatenateblobs');
15 | ConcatenateBlobs(array_of_blobs, blob_type, function(resultingBlob) {
16 | 	console.log(resultingBlob);
17 | });
18 | ```
19 | 
20 | To use it:
21 | 
22 | ```htm
23 | <script src="./node_modules/concatenateblobs/ConcatenateBlobs.js"></script>
24 | ```
25 | 
26 | ## 1. Link The Library
27 | 
28 | ```
29 | https://cdn.webrtc-experiment.com/ConcatenateBlobs.js
30 | 
31 | // or
32 | https://www.webrtc-experiment.com/ConcatenateBlobs.js
33 | ```
34 | 
35 | ## 2. Use it
36 | 
37 | ```javascript
38 | // 2nd argument is type of "resulting-blob"
39 | ConcatenateBlobs([arrayOfBlobs], 'audio/wav', function(resultingBlob) {
40 | 
41 |     POST_to_Server(resultingBlob);
42 |     
43 |     // or preview locally
44 |     localVideo.src = URL.createObjectURL(resultingBlob);
45 | });
46 | ```
47 | 
48 | ## Credits
49 | 
50 | * [Muaz Khan](http://www.MuazKhan.com/)
51 | 
52 | ## License
53 | 
54 | [ConcatenateBlobs.js](https://github.com/muaz-khan/ConcatenateBlobs) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
55 | 


--------------------------------------------------------------------------------
/ConcatenateBlobs.js:
--------------------------------------------------------------------------------
 1 | // Last time updated at May 23, 2015, 08:32:23
 2 | 
 3 | // Latest file can be found here: https://cdn.webrtc-experiment.com/ConcatenateBlobs.js
 4 | 
 5 | // Muaz Khan    - www.MuazKhan.com
 6 | // MIT License  - www.WebRTC-Experiment.com/licence
 7 | // Source Code  - https://github.com/muaz-khan/ConcatenateBlobs
 8 | // Demo         - https://www.WebRTC-Experiment.com/ConcatenateBlobs/
 9 | 
10 | // ___________________
11 | // ConcatenateBlobs.js
12 | 
13 | // Simply pass array of blobs.
14 | // This javascript library will concatenate all blobs in single "Blob" object.
15 | 
16 | (function() {
17 |     function ConcatenateBlobs (blobs, type, callback) {
18 |         var buffers = [];
19 | 
20 |         var index = 0;
21 | 
22 |         function readAsArrayBuffer() {
23 |             if (!blobs[index]) {
24 |                 return concatenateBuffers();
25 |             }
26 |             var reader = new FileReader();
27 |             reader.onload = function(event) {
28 |                 buffers.push(event.target.result);
29 |                 index++;
30 |                 readAsArrayBuffer();
31 |             };
32 |             reader.readAsArrayBuffer(blobs[index]);
33 |         }
34 | 
35 |         readAsArrayBuffer();
36 | 
37 |         function concatenateBuffers() {
38 |             var byteLength = 0;
39 |             buffers.forEach(function(buffer) {
40 |                 byteLength += buffer.byteLength;
41 |             });
42 |             
43 |             var tmp = new Uint16Array(byteLength);
44 |             var lastOffset = 0;
45 |             buffers.forEach(function(buffer) {
46 |                 // BYTES_PER_ELEMENT == 2 for Uint16Array
47 |                 var reusableByteLength = buffer.byteLength;
48 |                 if (reusableByteLength % 2 != 0) {
49 |                     buffer = buffer.slice(0, reusableByteLength - 1)
50 |                 }
51 |                 tmp.set(new Uint16Array(buffer), lastOffset);
52 |                 lastOffset += reusableByteLength;
53 |             });
54 | 
55 |             var blob = new Blob([tmp.buffer], {
56 |                 type: type
57 |             });
58 | 
59 |             callback(blob);
60 |         }
61 |     }
62 | 
63 |     if(typeof modules !== 'undefined') {
64 |         modules.export = ConcatenateBlobs;
65 |     }
66 | 
67 |     if(typeof window !== 'undefined') {
68 |         window.ConcatenateBlobs = ConcatenateBlobs;
69 |     }
70 | })();
71 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <title>ConcatenateBlobs | JavaScript</title>
  2 | 
  3 | <h1>ConcatenateBlobs | JavaScript - <a href="https://github.com/muaz-khan/ConcatenateBlobs">Source Code</a></h1>
  4 | 
  5 | <blockquote>
  6 |     You can record multiple blobs; then click "concatenateBlobs" button to concatenate all recorded blobs in single Blob. The resulting "single" Blob can be either played-back locally or pushed to server.
  7 | </blockquote>
  8 | 
  9 | <style>
 10 | button, select {
 11 |     font-family: Myriad, Arial, Verdana;
 12 |     font-weight: normal;
 13 |     border-top-left-radius: 3px;
 14 |     border-top-right-radius: 3px;
 15 |     border-bottom-right-radius: 3px;
 16 |     border-bottom-left-radius: 3px;
 17 |     padding: 4px 12px;
 18 |     text-decoration: none;
 19 |     color: rgb(27, 26, 26);
 20 |     display: inline-block;
 21 |     box-shadow: rgb(255, 255, 255) 1px 1px 0px 0px inset;
 22 |     text-shadow: none;
 23 |     background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(241, 241, 241)), to(rgb(230, 230, 230)));
 24 |     font-size: 20px;
 25 |     border: 1px solid red;
 26 |     outline:none;
 27 | }
 28 | button:active, button:focus, select:active {
 29 |     background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(5%, rgb(221, 221, 221)), to(rgb(250, 250, 250)));
 30 |     border: 1px solid rgb(142, 142, 142);
 31 | }
 32 | button[disabled], select[disabled] {
 33 |     background: rgb(249, 249, 249);
 34 |     border: 1px solid rgb(218, 207, 207);
 35 |     color: rgb(197, 189, 189);
 36 | }
 37 | blockquote {
 38 |     font-size: 20px;
 39 |     color: rgb(172, 10, 10);
 40 |     border: 1px solid rgb(172, 10, 10);
 41 |     padding: 5px 10px;
 42 |     border-radius: 5px;
 43 |     margin: 9px 10px;
 44 | }
 45 | span {
 46 |     border: 1px dotted red;
 47 |     background: yellow;
 48 |     padding: 0 5px;
 49 | }
 50 | </style>
 51 | 
 52 | <hr />
 53 | <button id="concatenateBlobs" disabled style="float:right;">concatenateBlobs</button>
 54 | <button id="startRecording">startRecording</button>
 55 | <button id="stopRecording" disabled>stopRecording</button>
 56 | <p style="display:inline-block;">
 57 |     <span id="output">0 blobs</span> recorded. To concatenate all, click right-side button.
 58 | </p>
 59 | <hr />
 60 | 
 61 | <select>
 62 |     <option>Audio</option>
 63 |     <option>Video</option>
 64 | </select><br><br>
 65 | <audio controls data-type="audio/wav"></audio>
 66 | 
 67 | <script src="https://cdn.webrtc-experiment.com/RecordRTC.js" autoplay> </script>
 68 | <script src="https://cdn.webrtc-experiment.com/ConcatenateBlobs.js" autoplay> </script>
 69 | 
 70 | <script>
 71 | var mediaElement = document.querySelector('audio');
 72 | 
 73 | var recordRTC;
 74 | var allBlobs = [];
 75 | var localMediaStream;
 76 | document.querySelector('#startRecording').onclick = function() {
 77 |     this.disabled = true;
 78 |     document.querySelector('#concatenateBlobs').disabled = true;
 79 |     
 80 |     navigator.getUserMedia({
 81 |         audio: mediaElement.getAttribute('data-type') == 'audio/wav',
 82 |         video: mediaElement.getAttribute('data-type') == 'video/webm'
 83 |     }, function(stream) {
 84 |         localMediaStream = stream;
 85 |         
 86 |         mediaElement.src = URL.createObjectURL(stream);
 87 |         mediaElement.play();
 88 | 
 89 |         recordRTC = RecordRTC(stream, {
 90 |             type: mediaElement.getAttribute('data-type') == 'audio/wav' ? 'audio' : 'video',
 91 |             video: mediaElement
 92 |         });
 93 |         recordRTC.startRecording();
 94 | 
 95 |         document.querySelector('#stopRecording').disabled = false;
 96 |     }, function(error) {});
 97 | };
 98 | 
 99 | document.querySelector('#stopRecording').onclick = function() {
100 |     this.disabled = true;
101 |     recordRTC.stopRecording(function() {
102 |         if(localMediaStream) localMediaStream.stop();
103 |         
104 |         allBlobs.push(recordRTC.getBlob());
105 |         
106 |         var totalBytes = 0;
107 |         allBlobs.forEach(function(blob) {
108 |             totalBytes += blob.size;
109 |         });
110 |         
111 |         output.innerHTML = allBlobs.length + ' blobs (total size: ' + bytesToSize(totalBytes) + ')';
112 |         
113 |         document.querySelector('#startRecording').disabled = false;
114 |         document.querySelector('#concatenateBlobs').disabled = false;
115 |     });
116 | };
117 | 
118 | document.querySelector('#concatenateBlobs').onclick = function() {
119 |     this.disabled = true;
120 |     document.querySelector('#startRecording').disabled = true;
121 |     document.querySelector('#stopRecording').disabled = true;
122 |     
123 |     var parent = output.parentNode;
124 |     parent.innerHTML =  'Concatenating ' + allBlobs.length + ' blobs.';
125 |     ConcatenateBlobs(allBlobs, mediaElement.getAttribute('data-type'), function(resultingBlob) {
126 |         parent.innerHTML =  'Concatenated. Resulting blob size: <span>' + bytesToSize(resultingBlob.size) + '</span>. Playing-back locally in &lt;audio&gt; tag.';
127 |         
128 |         mediaElement.src = URL.createObjectURL(resultingBlob);
129 |         mediaElement.play();
130 |     });
131 | };
132 | 
133 | var output = document.querySelector('#output');
134 | 
135 | // below function via: http://goo.gl/B3ae8c
136 | function bytesToSize(bytes) {
137 |     var k = 1000;
138 |     var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
139 |     if (bytes === 0) return '0 Bytes';
140 |     var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
141 |     return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
142 | }
143 | 
144 | document.querySelector('select').onchange = function() {
145 |     if(this.value == 'Video') {
146 |         var video = document.createElement('video');
147 |         video.setAttribute('data-type', 'video/webm');
148 |         video.setAttribute('controls', 'true');
149 |         mediaElement.parentNode.replaceChild(video, mediaElement);
150 |         mediaElement = video;
151 |     }
152 |     
153 |     if(this.value == 'Audio') {
154 |         var video = document.createElement('audio');
155 |         video.setAttribute('data-type', 'audio/wav');
156 |         video.setAttribute('controls', 'true');
157 |         mediaElement.parentNode.replaceChild(video, mediaElement);
158 |         mediaElement = video;
159 |     }
160 | };
161 | </script>
162 | 
163 | <h2>How to use?</h2>
164 | <pre>
165 | // https://cdn.webrtc-experiment.com/ConcatenateBlobs.js
166 | // or: npm install concatenateblobs
167 | 
168 | // 2nd argument is type of "resulting-blob"
169 | ConcatenateBlobs(<span>[arrayOfBlobs]</span>, <span>'audio/wav'</span>, function(<span>resultingBlob</span>) {
170 | 
171 |     POST_to_Server(<span>resultingBlob</span>);
172 |     
173 |     // or preview locally
174 |     localVideo.src = URL.createObjectURL(<span>resultingBlob</span>);
175 | });
176 | </pre>
177 | 


--------------------------------------------------------------------------------