Tuesday, 22 September 2009

Recording and playing back using Ribbit Javascript library

This post is just a little code sample. The Ribbit Javascript library releases soon.

 

<html>
<
head>
<
script type="text/javascript" src="ribbit.1.5.3.0.min.js"></script>
</
head>

<
script type="text/javascript">
var
callId;
var file;
function startCall(){
Ribbit.exec({
resource:"Calls",
method:"createCall",
params:{legs:[document.getElementById("legId").value]},
callback: function(result){
if (result.hasError){
document.getElementById("result").innerHTML = result.message;
}
else{
callId = result;
document.getElementById("result").innerHTML = "You have started call " + result;
document.getElementById("createCallDiv").style.visibility="hidden";
document.getElementById("startRecordingDiv").style.visibility="visible";

}
}
});
}

function startRecording(){
var filename = document.getElementById("filename").value;
var folder = document.getElementById("folder").value;
var domain = document.getElementById("domain").value;

if (filename.length==0 || folder.length==0 || domain.length ==0){
document.getElementById("result").innerHTML = "Please supply all of domain, folder and filename";
return;
}
if (filename.substring(filename.length-4,filename.length)!=".wav"){
document.getElementById("result").innerHTML = "Please enter a filename ending in .wav";
return;

}
file = "/media/" + domain + "/" + folder + "/" + filename;
Ribbit.exec({
resource:"Calls",
method:"recordCall",
params:{
callId:callId,
record: new Ribbit.CallRecordRequest(file, false, true, null, "1")
},
callback: function(result){
if (result.hasError){
document.getElementById("result").innerHTML = result.message;
}
else{
document.getElementById("result").innerHTML = "Recording file " + file;
document.getElementById("startRecordingDiv").style.visibility="hidden";
document.getElementById("stopRecordingDiv").style.visibility="visible";
}
}
});
}

function stopRecording(){
Ribbit.exec({
resource:"Calls",
method:"stopRecordingCall",
params:{callId:callId},
callback: function (result){
if (result.hasError){
document.getElementById("result").innerHTML = result.message;
}
else{
Ribbit.exec({
resource:"Calls",
method:"playMediaToCall",
params:{
callId:callId,
announce:Ribbit.Call.ANNOUNCE_EN_US_CLASSIC,
play: new Ribbit.CallPlayRequest([new Ribbit.CallPlayMedia("file",file,0,-1)], null,"1",true),

},
callback: function(result){
if (result.hasError){
document.getElementById("result").innerHTML = result.message;
}
else{
document.getElementById("result").innerHTML = "Recording has stopped, and you should be hearing " + file;
document.getElementById("stopRecordingDiv").style.visibility="hidden";
document.getElementById("playbackDiv").style.visibility="visible";
}
}
});
}
}
});
}

function hangupCall(){
Ribbit.exec({
resource:"Calls",
method:"hangupCall",
params:{callId:callId},
callback: function (result){
if (result.hasError){
document.getElementById("result").innerHTML = result.message;
}
else{
document.getElementById("result").innerHTML = "The call should be hung up. The file you recorded was " + file;
document.getElementById("playbackDiv").style.visibility="hidden";
}
}
});
}


</script>

<
body>
<
table><tr><td>
<
h1>Record a Call</h1>
<
hr>
<
div style="color:#ff0000" id="result"></div>
<
br/>

<
div id="createCallDiv">
<
table>
<
tr>
<
td>
Enter a telephone number
</td>
<
td>
<
input type="text" id="legId" value="tel:"/>
</
td>
</
tr>
<
tr>
<
td/>
<
td>
<
input id="but" type="button" type="button" onclick="startCall()" value="Start Call"/>
</
td>
</
tr>
</
table>
</
div>

<
div id="startRecordingDiv" style="visibility:hidden">
<
table>
<
tr>
<
td>
Enter a file name ending in .wav
</td>
<
td>
<
input type="text" id="filename" value=".wav"/>
</
td>
</
tr>
<
tr>
<
td>
Enter a folder name
</td>
<
td>
<
input type="text" id="folder"/>
</
td>
</
tr>
<
tr>
<
td>
Enter a domain name
</td>
<
td>
<
input type="text" id="domain"/>
</
td>
</
tr>
<
tr>
<
td/>
<
td>
<
input id="but" type="button" type="button" onclick="startRecording()" value="Start recording"/>
</
td>
</
tr>
</
table>
</
div>
<
div id="stopRecordingDiv" style="visibility:hidden">
<
table>
<
tr>
<
td>
You should hear a beep to indicate recording has started.
</td>
<
td>
<
input id="but" type="button" type="button" onclick="stopRecording()" value="Stop recording"/>
</
td>
</
tr>
</
table>
</
div>
<
div id="playbackDiv" style="visibility:hidden">
<
table>
<
tr>
<
td>
You should be hearing your recording played back
</td>
<
td>
<
input id="but" type="button" type="button" onclick="hangupCall()" value="Hangup"/>
</
td>
</
tr>
</
table>
</
div>

</
td>
<
td></td></tr></table>

</
body>
</
html>




1 comment:

Tim Stevens said...

Just so as you all know, this will be included in the sample apps that will be shipped with the Ribbit library.

It records from a one legged call, and then plays back the recording to the same leg.

And then hangs up.

Tim Stevens

Tim Stevens
Work
Consume
Obey
Be Silent
Die