demo-webrtc.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <!-- NewPage -->
  3. <html lang="zh">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>软电话DEMO</title>
  7. <link rel="stylesheet" type="text/css" href="./qlSoftPhone//styles/newSoftPhone.css">
  8. <script type="text/javascript" src="qlSoftPhone/js/jquery-1.9.1.min.js"></script>
  9. <script type="text/javascript" src="qlSoftPhone/js/QL.SoftPhone-cticaas.js"></script>
  10. <script type="text/javascript" src="sipphone/phone.js"></script>
  11. <script type="text/javascript" src="sipphone/sipUtil.js"></script>
  12. <script type="text/javascript">
  13. $(function(){
  14. /**************分机初始化开始*********************/
  15. var $this = this;
  16. // 调用SIP发起语音
  17. $($this).mySipPhone({
  18. wss: "ws://10.1.43.10:8088/ws", // webSocket 地址
  19. uri: "10.1.43.10:8052", // sip服务器的IP和端口
  20. user: "6001", // sip分机号
  21. pwd: "a6001", // 分机号密码
  22. callNumber: "", // 培训默认外呼号码
  23. options: {
  24. audioBW: "", // 设置音频带宽
  25. videoBW: "", // 设置视频带宽
  26. ice: true, // ICE穿透NAT/防火墙
  27. stunUrl: "", // STUN穿透
  28. turnUrl: "", // TURN穿透
  29. turnUserName: "", // TURN用户名
  30. turnCredential: "" // TURN证书
  31. },
  32. registered: function (evt) {
  33. // 注册成功
  34. //registered = true;
  35. console.log("webRTC话机初始化成功!");
  36. alert("webRTC话机初始化成功!");
  37. },
  38. failed: function (type,evt) {
  39. console.log("分机呼叫失败!");
  40. if(evt.cause != undefined && evt.cause != ""){
  41. console.log("分机呼叫失败:"+ evt.cause);
  42. }
  43. },
  44. ended: function (type,evt) {
  45. console.log("分机呼叫结束!");
  46. if(evt.cause != undefined && evt.cause != "" && evt.cause != "Terminated"){
  47. console.log("分机呼叫异常结束:" + evt.cause);
  48. }
  49. },
  50. accepted: function (callType,evt) {
  51. console.log("分机呼叫接通!");
  52. },
  53. stream: function (callType, localStream, remoteStream) {
  54. console.log("分机语音流,stream!");
  55. console.log("callType:"+callType);
  56. try {
  57. $("#remoteVideo")[0].srcObject = remoteStream;
  58. $("#localVideo")[0].srcObject = localStream;
  59. } catch (error) {
  60. $("#audioRemote")[0].src = window.URL.createObjectURL(remoteStream);
  61. $("#localVideo")[0].src = window.URL.createObjectURL(localStream);
  62. }
  63. },
  64. ringing: function (evt) {
  65. console.log("振铃"+evt);
  66. //座席分机自动接听
  67. mySipPhone.answer(false);
  68. },
  69. unregister: function () {
  70. console.log("分机注销");
  71. }
  72. });
  73. mySipPhone.register();
  74. /**************分机初始化结束*********************/
  75. /******************软电话初始化开始*******************/
  76. //初始化软电话
  77. var softPhone = $("#qlSoftPhone").softphones({
  78. host: "http://10.1.43.10:9215/cti",//软电话地址
  79. agentId: "1001",//坐席工号
  80. agentName:"1001",//默认和工号一致
  81. extension: "6001",//分机号码
  82. password: "1001",//登陆密码
  83. isDefaultSkill:true,//是否默认一个技能组
  84. isDisableAcw:false,//是否禁用后处理操作
  85. softPhoneType:'0',//软电话类型,0:顶部软电话,1:右侧软电话
  86. marginBottom:0,//底部间距
  87. marginTop:10,//顶部间距
  88. marginLeft:10,//顶部间距
  89. tenant:"tenant1",// 租户
  90. platformFlag:"gkx", //平台名称,华为:huawei,Aspect:aspect,Awaya:awaya,思科:cisco, 中兴:zte
  91. agentType:"common",// 座席类型 (common:普通座席, manager:管理员)
  92. skillGroupCode:"-1",// 技能组编号
  93. skillGroupName:"默认技能组", // 技能组名称
  94. consultativeGroup :"{\"-1\":\"默认技能组\"}", // 可咨询组
  95. transferGroup :"{\"-1\":\"默认技能组\"}", // 可咨询组
  96. manageGroup:"{\"-1\":\"默认技能组\"}",//可管理组
  97. ejectScreen:function(data){//电话接通后(包括呼入,呼出)主动触发事件
  98. console.log("软电话收到弹屏事件");
  99. //alert("弹屏");
  100. },
  101. onCall:function(data){//电话接通后(包括呼入,呼出)主动触发事件
  102. console.log("软电话接通事件");
  103. console.log("开始修改录音接通时间");
  104. //alert("接通事件");
  105. },
  106. addRecord:function(data){//电话挂断后主动触发事件
  107. console.log("开始新增录音记录");
  108. //alert("增加录音");
  109. },
  110. logout:function(data){//软电话退出后主动触发事件
  111. alert("签出成功");
  112. },
  113. onDial:function(data){
  114. //alert("onDial外呼成功回调事件!");
  115. console.log("onDial外呼成功回调事件!");
  116. },
  117. hangUp:function(data){//软电话挂断触发事件
  118. console.log("软电话挂断触发事件!");
  119. //主动挂断座席分机
  120. //mySipPhone.hangUp();
  121. }
  122. });
  123. /******************软电话初始化结束*******************/
  124. //主动触发事件,主动触发事件必须在软电话初始化后才可以调用
  125. //坐席操作页面如需要拨号按钮,需要调用此事件
  126. //qlSoftPhone.makeCall(phone,type);
  127. //phone:需要拨打的电话号码
  128. //type:电话类型 1:内部电话,2:外部电话
  129. //退出软电话方法,坐席需要退出软电话时,需要调用此事件
  130. //qlSoftPhone.logOff();
  131. //qlSoftPhone.completeCall("81");
  132. });
  133. function call(){
  134. //呼分机
  135. //mySipPhone.call(false,"2001");
  136. //呼外线
  137. //mySipPhone.call(false,"18565665810");
  138. }
  139. </script>
  140. </head>
  141. <body>
  142. <div id="qlSoftPhone"></div>
  143. <div>
  144. <video id="remoteVideo" class="corner" autoplay playsinline style="display: none;"></video>
  145. <video id="localVideo" class="full" autoplay playsinline muted style="display: none;"></video>
  146. <!-- <input type="button" value="呼叫" onclick="call()"/>-->
  147. </div>
  148. </body>
  149. </html>