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>
