Skip to content

Commit 8a994c9

Browse files
imalhasarangaimalhasaranga
committed
Major update to the library
1 parent 4882414 commit 8a994c9

File tree

5 files changed

+668
-456
lines changed

5 files changed

+668
-456
lines changed

‎README.md

Lines changed: 176 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,84 +8,213 @@ This project is using HTML5 getUserMedia() spec to record audio and video in a s
88
linking script files
99

1010
```html
11-
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" ></script>
1211
<script src="whammy.js" type="text/javascript"></script>
1312
<script src="recorder.js" type="text/javascript"></script>
14-
<script src="im365.js" type="text/javascript"></script>
13+
<script src="VIRecorder.js" type="text/javascript"></script>
1514
```
1615

17-
Create a container
18-
19-
20-
```html
21-
<div id="videorecorder" ></div>
22-
```
23-
24-
Create Buttons for Start and stop recording
16+
Initializing
2517

2618
```html
27-
<input id="startRecrodBut1" value="Start Recording" type="button" />
28-
<input id="stopRecBut1" value="Stop Recording" type="button" />
29-
```
3019

31-
Finally initiate the component using the following jquery
20+
var virec = new VIRecorder.initVIRecorder(
21+
{
22+
recorvideodsize : 0.4, // recorded video dimentions are 0.4 times smaller than the original
23+
webpquality : 0.7, // chrome and opera support webp imags, this is about the aulity of a frame
24+
framerate : 15, // recording frame rate
25+
videotagid : "viredemovideoele",
26+
videoWidth : "640",
27+
videoHeight : "480",
28+
} ,
29+
function(){
30+
//success callback. this will fire if browsers supports
31+
},
32+
function(err){
33+
//onerror callback, this will fire if browser does not support
34+
console.log(err.code +" , "+err.name);
35+
}
36+
);
3237

33-
```html
34-
<script type="text/javascript">
35-
$(function(){
36-
$("#videorecorder").initVideoAudioRec(
37-
{ quality : 0.4,
38-
startButtonId : "startRecrodBut1" ,
39-
stopButtonId : "stopRecBut1" ,
40-
videoWidth : "320",
41-
videoHeight : "240",
42-
uploadURL : "php/fileupload.php"
43-
} );
44-
});
45-
</script>
4638
```
47-
>"quality" : This parameter indicates the quality of the recorded video so lower the value higher the upload speed
39+
>"recorvideodsize" : indicates the recorded video dimentions relative to the actual size
40+
>"webpquality" : this indicate the quality of a single frame in the video
41+
>"framerate" : frame rate
4842
4943

5044
###Here is a Complete Example
5145

5246
```html
53-
5447
<html>
5548
<head>
5649
</head>
5750
<body>
58-
<div id="videorecorder" >
59-
<input id="startRecrodBut1" value="Start Recording" type="button" />
60-
<input id="stopRecBut1" value="Stop Recording" type="button" />
51+
<div id="videorecorder" >
52+
<video id="viredemovideoele" ></video>
53+
<span style="font-size:20px;" id ="countdown"></span>
6154
</div>
55+
56+
<input id="playback" value="PlayBack" type="button" />
57+
<input id="clearrecording" value="Clear Recording" type="button" />
58+
<input id="startRecrodBut1" value="Start Recording" type="button" />
59+
<input id="stopRecBut1" value="Stop Recording" type="button" />
60+
<input id="uploadrecord" value="Upload Recording" type="button" />
61+
62+
63+
</br>
64+
<p id="status"></p>
65+
<video id="recordedvideo" controls></video>
66+
<audio id="audiored" controls></audio>
67+
<a id="downloadurl">Download</a>
68+
<div id="progressNumber" style="font-size:20px;"></div>
69+
6270

63-
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" ></script>
6471
<script src="whammy.js" type="text/javascript"></script>
6572
<script src="recorder.js" type="text/javascript"></script>
66-
<script src="im365.js" type="text/javascript"></script>
73+
<script src="VIRecorder.js" type="text/javascript"></script>
6774

6875
<script type="text/javascript">
69-
$(function(){
70-
$("#videorecorder").initVideoAudioRec(
71-
{ quality : 0.4,
72-
startButtonId : "startRecrodBut1" ,
73-
stopButtonId : "stopRecBut1" ,
74-
videoWidth : "320",
75-
videoHeight : "240",
76-
uploadURL : "php/fileupload.php"
77-
} );
78-
});
76+
77+
78+
79+
var startRecord = document.getElementById("startRecrodBut1");
80+
var stopRecord = document.getElementById("stopRecBut1");
81+
var countdownElement = document.getElementById("countdown");
82+
var playBackRecord = document.getElementById("playback");
83+
var discardRecordng = document.getElementById("clearrecording");
84+
var uploadrecording = document.getElementById("uploadrecord");
85+
var progressNumber = document.getElementById("progressNumber");
86+
87+
88+
89+
var virec = new VIRecorder.initVIRecorder(
90+
{
91+
recorvideodsize : 0.4, // recorded video dimentions are 0.4 times smaller than the original
92+
webpquality : 0.7, // chrome and opera support webp imags, this is about the aulity of a frame
93+
framerate : 15, // recording frame rate
94+
videotagid : "viredemovideoele",
95+
videoWidth : "640",
96+
videoHeight : "480",
97+
} ,
98+
function(){
99+
//success callback. this will fire if browsers supports
100+
},
101+
function(err){
102+
//onerror callback, this will fire if browser does not support
103+
console.log(err.code +" , "+err.name);
104+
}
105+
);
106+
107+
108+
startRecord.addEventListener("click" , function(){
109+
virec.startCapture(); // this will start recording video and the audio
110+
startCountDown(null);
111+
});
112+
113+
stopRecord.addEventListener("click" , function(){
114+
/*
115+
stops the recording and after recording is finalized oncaptureFinish call back
116+
will occur
117+
*/
118+
virec.stopCapture(oncaptureFinish);
119+
});
120+
121+
playBackRecord.addEventListener("click" , function(){
122+
/*
123+
Clientside playback,
124+
*/
125+
virec.play();
126+
});
127+
128+
discardRecordng.addEventListener("click" , function(){
129+
/*
130+
Clears the current recorded video + audio allowing
131+
another recording to happen
132+
*/
133+
virec.clearRecording();
134+
});
135+
136+
uploadrecording.addEventListener("click" , function(){
137+
/*
138+
Uploading the content to the server, here I have sliced the blobs into chunk size
139+
of 1048576 bits so that uploading time will reduce.
140+
Gmail uses this same technique when we attach some files to a mail, it slize the file
141+
in the client side and then uploads chunk by chunk
142+
*/
143+
var uploadoptions = {
144+
blobchunksize : 1048576,
145+
requestUrl : "php/fileupload.php",
146+
requestParametername : "filename",
147+
videoname : "video.webm",
148+
audioname : "audio.wav"
149+
};
150+
virec.uploadData( uploadoptions , function(totalchunks, currentchunk){
151+
/*
152+
This function will callback during, each successfull upload of a blob
153+
so you can use this to show a progress bar or something
154+
*/
155+
progressNumber.innerHTML = ((currentchunk/totalchunks)*100);
156+
console.log(currentchunk +" OF " +totalchunks);
157+
});
158+
});
159+
160+
161+
//------------------------------- few functions that demo, how to play with the api --------------------------
162+
163+
var countdowntime = 15;
164+
var functioncalltime = 0;
165+
166+
function oncaptureFinish(audioblob, videoblob){
167+
168+
var audiobase64 = window.URL.createObjectURL(audioblob);
169+
var videobase64 = window.URL.createObjectURL(videoblob);
170+
document.getElementById('audiored').src = audiobase64;
171+
document.getElementById('recordedvideo').src = videobase64;
172+
document.getElementById('downloadurl').style.display = '';
173+
document.getElementById('downloadurl').href = videobase64;
174+
document.getElementById('status').innerHTML = "video="+Math.ceil(videoblob.size / (1024))+"KB, Audio="+Math.ceil(audioblob.size / (1024))+" Total= "+ (Math.ceil(videoblob.size / (1024))+ Math.ceil(audioblob.size / (1024))) + "KB";
175+
}
176+
177+
function setCountDownTime(time){
178+
countdownElement.innerHTML = time;
179+
if(time == 0){
180+
return -1;
181+
}else{
182+
return 1;
183+
}
184+
}
185+
186+
187+
function startCountDown(interval){
188+
if(interval == null){
189+
functioncalltime = countdowntime;
190+
setCountDownTime(--functioncalltime);
191+
var intervalcount = setInterval( function(){ startCountDown(intervalcount); }, 1000 );
192+
}else{
193+
var val = setCountDownTime(--functioncalltime);
194+
if(val == -1){
195+
clearInterval(interval);
196+
virec.stopCapture(oncaptureFinish);
197+
}
198+
}
199+
}
200+
79201
</script>
80202
</body>
81203
</html>
82-
>
83204

84205
```
206+
###Server Side Code
207+
I have used php but you can use any server side language
208+
85209

86210
###Fixes
211+
87212
1. increased the flexibility of the component
88-
2. new audio file is now ridiculously small comparing to the previous one thanks to [Octavian Naicu](https://github.com/nusofthq/Recordmp3js)
213+
2. provided support for Opera latest version
214+
3. removed the dependancy of JQuery and make it pure javascript
215+
4. uploading time reduced by uploading blob as chunks
216+
5. old Library previously supported direct mp3 recording using a library provided by [Octavian Naicu](https://github.com/nusofthq/Recordmp3js) but with this version I removed it because of few bugs in that project, and it takes conciderable time to encode to mp3
217+
89218

90-
####This project is an experiment by me, and this will work Only for Chrome so all are invited to contribute to this Repo
219+
####This project is an experiment, and this will work Only for Chrome, Opera so all are invited to contribute....
91220

0 commit comments

Comments
 (0)