## 网页通话
>[info] **功能说明**
>webRTC (Web Real-Time Communications) ,是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。
> 在CTI应用中,webRTC可以理解为直接使用浏览器拨打电话,支持PC端与移动端。
> 我们已经将webRTC封装为JavaScript(js),开发者无需掌握webRTC底层技术,仅需要简单的js调用即可实现通过网页拨打电话。
* **调用方式**
```
在项目开发中我们会提供已经开发好的demo文件,
开发者只需引用已经封装好的js文件,并拷贝demo文件中的js调用方法到自己的业务系统中即可。
```
![](https://img.kancloud.cn/3d/c2/3dc2223741efaa535f0053ea9fa1066c_493x633.png)
* **js调用方法**
```
以下为部分代码,在实际开发中我们会有提供demo文件并提供一对一技术支持。
```
~~~
//定义 SoftPhone 类
var SoftPhone = function(config) {
var that = this;
JsSIP.debug.disable('JsSIP:*');//关闭调试
JsSIP.C.SESSION_EXPIRES = 3600;//sip注册周期
JsSIP.C.MIN_SESSION_EXPIRES = 120; // 修改定义 JsSIP 的 SESSION_TIMER 常量,默认 FreeSwitch 的 Session Timer 范围为 120,而 JsSIP 默认为 90
var socket=new JsSIP.WebSocketInterface(config.WSS_URI); // 构建用于信令传输的 WebSocket 接口
var audioRemote=config.audioRemote;//播放远端通话声的audio标签
var audioRingin=config.audioRingin;//播放来电振铃声的audio标签
var audioRingback=config.audioRingback;//播放外呼回铃声的audio标签
var audioHangup=config.audioHangup;//播放挂机声音的audio标签
//通过拼接构造 JsSIP.UA 实例的配置参数
var configuration = {
sockets : [ socket ],
uri : 'sip:' + config.user + '@' + config.SIP_DOMAIN,
password : config.password,
display_name : config.user,
contact_uri : 'sip:' + config.user + '@' + config.SIP_DOMAIN + ';transport=wss',
register_expires : config.register_expires
};
//构造 JsSIP.UA 类的实例
var ua = new JsSIP.UA(configuration);
this.ua = ua;
// 邦定 RTCSession 实例监听的事件
var eventHandlers = {
'getusermediafailed': function(e) {
alert('找不到麦克风设备!');
},
'progress': function(e) {
// 外呼/呼入进行中事件
console.log('call is in progress');
that.updateView();
audioRingin[0].pause();
},
'failed': function(e) {
// 呼叫失败事件处理
console.log('call failed with cause: '+ e.cause);
that.updateView();
audioRingin[0].pause();
audioRingback[0].pause();
audioHangup[0].currentTime = 0;
//audioHangup[0].play();
},
'ended': function(e) {
// 呼叫结束事件
console.log('call ended with cause: '+ e.cause);
that.updateView();
audioRingin[0].pause();
audioRingback[0].pause();
audioHangup[0].currentTime = 0;
audioHangup[0].play();
},
'confirmed': function(e) {
// 呼叫建立事件
console.log('call confirmed');
that.updateView();
audioRingin[0].pause();
audioRingback[0].pause();
},
"peerconnection": function(e) {
// RTCPeerConnection 对象创建成功后的事件,用于将 Early Media 以及远端的声音,通过 audioRemote 的 DOM:audio 对象实时播放出来
console.log('peer connection');
//监听 RTCPeerConnection 实例的 OnAddStream 事件,一旦有远端流被添加进来,就赋予给 audioRemote 进行还原播放
e.peerconnection.addEventListener('track', function(event) {
console.log('onaddstream');
audioRingback[0].pause();
audioRemote[0].srcObject = event.streams[0];
audioRemote[0].play();//播放远端声音
});
}
};
//拨打电话
$('#btn_call').click(function() {
var telnum = $('#tel').val();
telnum=telnum.replace(/[ ]/g,'');//删除所有空格
if(!telnum){
return false;
}
var session = phone.call(telnum);
});
//挂机
$('#btn_end').click(function() {
phone.endcall();
});
~~~