554 lines
17 KiB
HTML
554 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title><?=$da['title']?></title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
|
|
<link rel="stylesheet" type="text/css" href="web/res/css/webimcss.css"/>
|
|
<link rel="stylesheet" type="text/css" href="web/res/fontawesome/css/font-awesome.min.css">
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/js.js"></script>
|
|
<script type="text/javascript" src="js/base64-min.js"></script>
|
|
<script type="text/javascript" src="mode/agora/AgoraRTC_N-4.7.1.js"></script>
|
|
<script type="text/javascript" src="mode/plugin/jquery-rockmodels.js"></script>
|
|
<script>
|
|
adminid = <?=$da['adminid']?>;
|
|
var localAudioTrack=false,localVideoTrack = false,remoteAudioTrack=false,remoteVideoTrack=false;
|
|
function initbody(){
|
|
c.init();
|
|
}
|
|
function bodyunload(){
|
|
c.bodyunload(false);
|
|
}
|
|
var c = {
|
|
iscall:<?=$ars['iscall']?>,
|
|
type:0,
|
|
callshu:30,
|
|
id:<?=$ars['id']?>,
|
|
nwwin:false,
|
|
init:function(){
|
|
this.typearr = ['语音','视频'];
|
|
this.name = '<?=$ars['name']?>';
|
|
this.playobj = get('notify_sound_tonghua');
|
|
js.initbtn(this);
|
|
//接收端
|
|
if(!this.iscall){
|
|
this.type = <?=$thrs['type']?>;
|
|
this.channel = '<?=$thrs['channel']?>';
|
|
this.jieshoucall();
|
|
}else{
|
|
$('#calldiv').show();
|
|
}
|
|
if(nwjsgui){
|
|
this.nwwin = nw.Window.get();
|
|
this.nwwin.on('close', function(){
|
|
c.bodyunload(this);
|
|
});
|
|
}
|
|
},
|
|
hujiao:function(o1,lx){
|
|
if(this.hujiaobo)return;
|
|
js.loading('请求中...');
|
|
this.hujiaobo = true;
|
|
this.type = lx;
|
|
js.ajax('tonghua|thinit',{id:this.id,type:lx},function(ret){
|
|
c.hujiaoback(ret);
|
|
}, 'get', function(str){
|
|
js.msgerror(str);
|
|
c.stateupdate(str);
|
|
c.hujiaobo=false;
|
|
});
|
|
},
|
|
stateupdate(str, bo){
|
|
$('#wiatling').html(str);
|
|
$('#wiatlings').html(str);
|
|
document.title = str;
|
|
if(bo)this.showtoast(str);
|
|
},
|
|
showtoast:function(str){
|
|
js.msg('success',str);
|
|
},
|
|
hujiaoback:function(ret){
|
|
this.thcan = ret.data;
|
|
this.channel = this.thcan.channel;
|
|
$('#backbtn').hide();
|
|
$('#hujiaobtn').remove();
|
|
$('#cancelbtn').show();
|
|
this.initagoraRtc();
|
|
this.callstartplay();
|
|
this.callstrimes = js.now('time');
|
|
this.callmiashue();
|
|
this.hujiaobool = true;
|
|
},
|
|
callstartplay:function(){
|
|
this.playobj.src='web/res/sound/call.mp3';
|
|
if(this.playobj.play)this.playobj.play();
|
|
},
|
|
callstopplay:function(){
|
|
if(this.playobj.pause)this.playobj.pause();
|
|
},
|
|
cancalpayls:function(){
|
|
this.playobj.src='web/res/sound/gua.mp3';
|
|
this.playobj.loop='';
|
|
if(this.playobj.play)this.playobj.play();
|
|
},
|
|
|
|
callmiashue:function(){
|
|
clearTimeout(this.callmiashuetime);
|
|
var sj = parseInt((js.now('time')-this.callstrimes)*0.001);
|
|
if(sj>this.callshu){
|
|
this.cancelhus(5);
|
|
return;
|
|
}
|
|
if(sj%2==0 && sj>0 && !this.ztpandbool){
|
|
this.ztpandbool = true;
|
|
js.ajax('tonghua|state',{channel:this.channel}, function(ret){
|
|
var zt = ret.data.state;
|
|
c.ztpandbool = false;
|
|
if(!c.calljutong && (zt=='tongyi' || zt=='jujue'))c.callbackss(zt);
|
|
},'get', function(st1){
|
|
c.ztpandbool = false;
|
|
js.msg();
|
|
});
|
|
}
|
|
this.stateupdate(''+this.typearr[this.type]+'通话呼叫中已呼叫'+sj+'秒...');
|
|
this.callmiashuetime = setTimeout(function(){c.callmiashue()},1000);
|
|
},
|
|
initagoraRtc:async function(){
|
|
client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
|
|
|
|
client.on("user-published", async (user, mediaType) => {
|
|
await client.subscribe(user, mediaType);
|
|
if (mediaType === "video") {
|
|
remoteVideoTrack = user.videoTrack;
|
|
remoteVideoTrack.play('remote_stream');
|
|
}
|
|
if (mediaType === "audio") {
|
|
remoteAudioTrack = user.audioTrack;
|
|
remoteAudioTrack.play();
|
|
}
|
|
});
|
|
client.on("user-joined", (user) => {
|
|
//showSuccess('有人来('+JSON.stringify(user)+')');
|
|
});
|
|
client.on("user-left", (user, reason) => {
|
|
//showAlert('有人退出['+reason+']('+JSON.stringify(user)+')');
|
|
c.guaduanok(false);
|
|
});
|
|
},
|
|
cancelhu:function(){
|
|
this.cancelhus(3);
|
|
},
|
|
closewin:function(bo){
|
|
if(bo){
|
|
if(this.nwwin){
|
|
this.nwwin.close(true);
|
|
}else{
|
|
window.close();
|
|
}
|
|
}else{
|
|
setTimeout(function(){c.closewin(true)},2000);
|
|
}
|
|
},
|
|
cancelhus:function(zt){
|
|
$('#cancelbtn').hide();
|
|
this.hujiaobool = false;
|
|
clearTimeout(this.callmiashuetime);
|
|
var ss1='';if(zt==5)ss1='无人接听';
|
|
js.loading(''+ss1+'取消呼叫中...');
|
|
this.stateupdate(''+ss1+'取消呼叫中...');
|
|
this.callstopplay();
|
|
js.ajax('tonghua|cancel',{channel:this.thcan.channel,state:zt},function(ret){
|
|
c.stateupdate(''+ss1+'已取消呼叫', true);
|
|
c.closewin();
|
|
}, 'get', function(str){
|
|
$('#cancelbtn').show();
|
|
js.msgerror(str);
|
|
c.stateupdate(str);
|
|
});
|
|
},
|
|
|
|
//接通后显示视频
|
|
localvadio:async function(){
|
|
if(this.localvadiobool)return;
|
|
this.localvadiobool = true;
|
|
this.isjietong = true;
|
|
this.showtoast(''+this.typearr[this.type]+'已接通');
|
|
this.stateupdate('与'+this.name+''+this.typearr[this.type]+'通话中(00:00)');
|
|
$('#backbtn').hide();
|
|
this.starttime = js.now('time');
|
|
this.showmian();
|
|
|
|
|
|
$('#calldiv').remove();
|
|
$('#canceldiv').show();
|
|
|
|
if(this.type==1){
|
|
$('#shipindiv').show();
|
|
$('#yuyindiv').hide();
|
|
$('#local_stream').show();
|
|
$('#remote_stream').show();
|
|
}
|
|
|
|
await client.join(this.thcan.appid, this.thcan.channel, this.thcan.token, this.thcan.uid);
|
|
|
|
// 通过麦克风采集的音频创建本地音频轨道对象。
|
|
localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
|
|
await client.publish(localAudioTrack);
|
|
|
|
if(this.type==1){
|
|
// 通过摄像头采集的视频创建本地视频轨道对象。
|
|
localVideoTrack = await AgoraRTC.createCameraVideoTrack();
|
|
// 将这些音视频轨道对象发布到频道中。
|
|
await client.publish(localVideoTrack);
|
|
localVideoTrack.play('local_stream'); //播放视频
|
|
}
|
|
},
|
|
showmian:function(){
|
|
var sj = parseInt((js.now('time')-this.starttime)*0.001);
|
|
this.tonghuasj = sj;
|
|
var fz = 0;
|
|
if(sj>59)fz = parseInt(sj/60);
|
|
var ms = sj-fz*60;
|
|
this.stateupdate(''+this.typearr[this.type]+'通话中('+xy10(fz)+':'+xy10(ms)+')');
|
|
if(sj>0 && sj%2==0 && !this.showmiaobool){
|
|
this.showmiaobool = true;
|
|
js.ajax('tonghua|stateth',{channel:this.channel}, function(ret){
|
|
var zt = ret.data.state;
|
|
c.showmiaobool = false;
|
|
if(zt=='jiesu')c.callbackss(zt);
|
|
},'get', function(st1){
|
|
c.showmiaobool = false;
|
|
js.msg();
|
|
});
|
|
}
|
|
this.showmiantime = setTimeout(function(){c.showmian()},1000);
|
|
},
|
|
|
|
guaduan:function(){
|
|
this.guaduanok(true);
|
|
},
|
|
guaduanok:function(bo){
|
|
if(this.guaduanbool)return;
|
|
this.guaduanbool = true;
|
|
if(bo){
|
|
this.showtoast('挂断中...');
|
|
js.ajax('tonghua|jiesu',{channel:this.thcan.channel,toid:this.id}, function(ret){
|
|
c.guaduanokok();
|
|
},'get', function(str){
|
|
c.guaduanokok();
|
|
});
|
|
}else{
|
|
this.guaduanokok();
|
|
}
|
|
},
|
|
guaduanokok:function(){
|
|
clearTimeout(this.showmiantime);
|
|
if(localAudioTrack)localAudioTrack.close();
|
|
if(localVideoTrack)localVideoTrack.close();
|
|
client.unpublish();
|
|
client.leave();
|
|
this.stateupdate('通话已结束', true);
|
|
$('#canceldiv').remove();
|
|
this.cancalpayls();
|
|
this.closewin();
|
|
},
|
|
|
|
|
|
payerstart:function(){
|
|
this.playobj.src='web/res/sound/mi.mp3';
|
|
if(this.playobj.play)this.playobj.play();
|
|
},
|
|
payerend:function(){
|
|
this.callstopplay();
|
|
},
|
|
qiehysq:function(){
|
|
if(!this.yuancjinb){
|
|
remoteAudioTrack.setVolume(0);
|
|
this.yuancjinb = true;
|
|
$('#jingyinclltxt').html('开启声音');
|
|
get('jingyincll').className='icon-volume-off';
|
|
}else{
|
|
remoteAudioTrack.setVolume(100);
|
|
this.yuancjinb = false;
|
|
$('#jingyinclltxt').html('静音');
|
|
get('jingyincll').className='icon-volume-up';
|
|
}
|
|
},
|
|
|
|
//接电话端处理初始化
|
|
jieshoucall:function(){
|
|
$('#backbtn').hide();
|
|
$('#anjiandiv').show();
|
|
js.ajax('tonghua|receopen',{channel:this.channel});
|
|
this.jieshoutimes(-1);
|
|
this.isyaoqbool = true;
|
|
this.payerstart();
|
|
},
|
|
jieshoutimes:function(i1){
|
|
var str = this.typearr[this.type];
|
|
var sys = this.callshu - <?=$thrs['sytime']?> -i1;
|
|
if(sys<0){
|
|
this.stateupdate('超时自动取消', true);
|
|
this.jiedianha(false,3);
|
|
}else{
|
|
if(i1%2==0 && i1>0 && !this.ztpandbool){
|
|
this.ztpandbool = true;
|
|
js.ajax('tonghua|state',{channel:this.channel}, function(ret){
|
|
var zt = ret.data.state;
|
|
c.ztpandbool = false;
|
|
if(zt=='cancel' || zt=='tongyi' || zt=='jujue')c.callbackss(zt);
|
|
},'get', function(st1){
|
|
c.ztpandbool = false;
|
|
js.msg();
|
|
});
|
|
}
|
|
this.stateupdate('邀请与您'+str+'通话('+sys+')...');
|
|
this.jieshoutimesa = setTimeout(function(){c.jieshoutimes(i1+1)},1000);
|
|
}
|
|
},
|
|
jiedianha:function(o1,lx){
|
|
clearTimeout(this.jieshoutimesa);
|
|
this.ismybool = true;
|
|
this.isyaoqbool = false;
|
|
$('#anjiandiv').hide();
|
|
this.payerend();
|
|
if(lx==1){
|
|
this.stateupdate('接通中...');
|
|
this.initagoraRtc();
|
|
js.ajax('tonghua|jietong',{channel:this.channel,state:1},function(ret){
|
|
c.jietongback(ret);
|
|
}, 'get', function(str){
|
|
js.msgerror(str);
|
|
c.stateupdate(str);
|
|
$('#anjiandiv').show();
|
|
});
|
|
}
|
|
if(lx==2){
|
|
this.stateupdate('拒绝中...');
|
|
js.ajax('tonghua|jie',{channel:this.channel,state:2},function(ret){
|
|
var ms2 = '已拒绝通话';
|
|
if(ret.data.satype)ms2 = ret.data.satype;
|
|
c.jiequxian(ms2);
|
|
},'get', function(str){
|
|
js.msgerror(str);
|
|
c.stateupdate(str);
|
|
$('#anjiandiv').show();
|
|
});
|
|
}
|
|
if(lx==3){
|
|
this.closewin();
|
|
}
|
|
},
|
|
jiequxian:function(s1){
|
|
this.stateupdate(s1, true);
|
|
this.closewin();
|
|
},
|
|
jietongback:function(ret){
|
|
this.thcan = ret.data;
|
|
if(ret.data.satype){
|
|
this.jiequxian(ret.data.satype);
|
|
}else{
|
|
this.stateupdate(''+this.typearr[this.type]+'通话中...');
|
|
this.localvadio();//被叫端接通
|
|
}
|
|
},
|
|
bodyunload:function(win){
|
|
var lx = '';
|
|
if(this.isjietong){
|
|
this.guaduan();
|
|
lx = '挂断中...';
|
|
}else{
|
|
if(this.hujiaobool){
|
|
this.cancelhu();
|
|
lx='取消中...';
|
|
}
|
|
if(this.isyaoqbool){
|
|
this.jiedianha(false,2);
|
|
lx='邀请中..';
|
|
}
|
|
}
|
|
if(!lx){
|
|
win.close(true);
|
|
}
|
|
},
|
|
callbackss:function(lx){
|
|
this.callstopplay();
|
|
clearTimeout(this.callmiashuetime);
|
|
clearTimeout(this.jieshoutimesa);
|
|
if(lx=='jujue'){
|
|
this.calljutong = true;
|
|
this.hujiaobool = false;
|
|
if(this.iscall){
|
|
$('#cancelbtn').remove();;
|
|
this.stateupdate('对方拒绝通话', true);
|
|
this.closewin();
|
|
}
|
|
if(!this.iscall && !this.ismybool){
|
|
this.stateupdate('已在另端拒绝', true);
|
|
$('#anjiandiv').remove();
|
|
this.closewin();
|
|
}
|
|
}
|
|
if(lx=='tongyi'){
|
|
this.calljutong = true;
|
|
this.hujiaobool = false;
|
|
if(this.iscall){
|
|
this.stateupdate('接通中...');
|
|
this.localvadio(); //主叫端接通
|
|
}
|
|
if(!this.iscall && !this.ismybool){
|
|
this.stateupdate('已在另端接通', true);
|
|
$('#anjiandiv').remove();
|
|
this.closewin();
|
|
}
|
|
}
|
|
|
|
//----以下是接收端处理----
|
|
//呼叫已经取消
|
|
if(lx=='cancel' && get('anjiandiv')){
|
|
$('#anjiandiv').remove();
|
|
clearTimeout(this.jieshoutimesa);
|
|
this.stateupdate('对方已取消', true);
|
|
this.closewin();
|
|
}
|
|
//对方挂电话
|
|
if(lx=='jiesu'){
|
|
this.guaduanok(false);
|
|
}
|
|
}
|
|
}
|
|
js.ajax=function(lex,ds,fun,lxss,efun){
|
|
var lexa = lex.split('|');
|
|
if(!lxss)lxss='type';
|
|
var cans = {
|
|
url:js.apiurl(lexa[0],lexa[1]),
|
|
data:ds,
|
|
type:lxss,
|
|
dataType:'json',
|
|
success:function(ret){
|
|
js.unloading();
|
|
if(ret.success){
|
|
if(fun)fun(ret);
|
|
}else{
|
|
if(efun)efun(ret.msg)
|
|
}
|
|
},
|
|
error:function(e){
|
|
js.unloading();
|
|
if(efun)efun('处理出错:'+e.responseText+'');
|
|
}
|
|
}
|
|
$.ajax(cans);
|
|
}
|
|
js.initbtn = function(obj){
|
|
var o = $("[clickevt]"),i,o1,cl;
|
|
for(i=0; i<o.length; i++){
|
|
o1 = $(o[i]);
|
|
cl = o1.attr('clickadd');
|
|
if(cl!='true'){
|
|
o1.click(function(eo){
|
|
var cls = $(this).attr('clickevt');
|
|
if(typeof(cls)=='string'){
|
|
cls=cls.split(',');
|
|
obj[cls[0]](this, cls[1], cls[2], eo);
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
}
|
|
o.attr('clickadd','true');
|
|
}
|
|
function showAlert(str,col){
|
|
var obj = $('div[temp="div"]'),hei=0;
|
|
for(var i=0;i<obj.length;i++)hei+=$(obj[i]).height()+15;
|
|
if(!col)col='red';
|
|
var str = '<div temp="div" onclick="$(this).remove()" style="background:rgba(0,0,0,0.8);position:fixed;left:0px;top:'+hei+'px;padding:5px;color:'+col+'">'+str+'</div>';
|
|
$('body').append(str);
|
|
}
|
|
|
|
|
|
function showSuccess(str){
|
|
showAlert(str,'white');
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body style="overflow:hidden;background:#555555">
|
|
|
|
<div id="local_stream" style="width:100px;height:150px;right:0px;top:0px;border:0px red solid;position:fixed;z-index:2;display:none"></div>
|
|
<div id="remote_stream" style="width:100%;height:100%;left:0px;top:0px;border:0px red solid;position:fixed;z-index:1;display:none"></div>
|
|
|
|
<div align="left" style="padding:0px 10px;height:60px;overflow:hidden;display:none;position:fixed;z-index:9;left:0;top:0" id="shipindiv">
|
|
<table style="margin-top:10px"><tr>
|
|
<td><img id="tonghuafaces" src="<?=$ars['face']?>" width="40px" height="40px" style="border-radius:50%"></td>
|
|
<td width="5"></td>
|
|
<td style="color:white"><?=$ars['name']?></td>
|
|
<td width="10"></td>
|
|
<td><div id="wiatlings" style="color:#888888;font-size:14px">等待呼叫</div></td>
|
|
</tr></table>
|
|
</div>
|
|
<div align="center" style="position:fixed;z-index:9;left:0;top:0;width:100%" id="yuyindiv">
|
|
<div style="margin-top:50px"><img id="tonghuaface" src="<?=$ars['face']?>" width="100px" height="100px" style="border-radius:50%"></div>
|
|
<div style="color:white"><?=$ars['name']?></div>
|
|
<div id="wiatling" style="color:#888888;font-size:14px;margin-top:5px">等待呼叫</div>
|
|
</div>
|
|
|
|
|
|
<div align="center" id="calldiv" style="position:fixed;bottom:50px;width:100%;display:none;z-index:9">
|
|
<div id="hujiaobtn">
|
|
<div style="color:#888888;font-size:12px">请选择通话类型</div>
|
|
<table><tr>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="hujiao,0" align="center" style="width:90px;height:90px;background:#ff6600;color:white;line-height:90px;border-radius:50%;font-size:16px;margin-top:10px;padding:0"><i class="icon-volume-up"></i> 语音</div>
|
|
</td>
|
|
<td width="50"></td>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="hujiao,1" align="center" style="width:90px;height:90px;background:#339933;color:white;line-height:90px;border-radius:50%;font-size:16px;padding:0;margin-top:20px"><i class="icon-facetime-video"></i> 视频</div>
|
|
</td>
|
|
</tr></table>
|
|
</div>
|
|
<div id="cancelbtn" style="display:none">
|
|
<div class="webbtn" clickevt="cancelhu" style="width:80px;height:80px;background:#FF6666;color:white;line-height:80px;border-radius:50%;font-size:40px;padding:0;margin-top:20px;transform:rotate(135deg);"><i class="icon-phone"></i></div>
|
|
<div style="color:#888888;font-size:12px;margin-top:5px">取消</div>
|
|
</div>
|
|
</div>
|
|
<div align="center" id="canceldiv" style="position:fixed;bottom:0px;width:100%;display:none;height:120px;overflow:hidden;z-index:9">
|
|
<table style="margin-top:10px"><tr>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="guaduan" style="width:80px;height:80px;background:#FF6666;color:white;line-height:80px;border-radius:50%;font-size:40px;padding:0;margin-top:20px;margin:0;transform:rotate(135deg);"><i class="icon-phone"></i></div>
|
|
<div style="color:#888888;font-size:12px;margin-top:5px">挂断</div>
|
|
</td>
|
|
<td width="30"></td>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="qiehysq" style="width:80px;height:80px;background:white;color:#000000;line-height:80px;border-radius:50%;font-size:40px;padding:0;margin-top:20px;margin:0"><i id="jingyincll" class="icon-volume-up"></i></div>
|
|
<div id="jingyinclltxt" style="color:#888888;font-size:12px;margin-top:5px">静音</div>
|
|
</td>
|
|
|
|
</tr></table>
|
|
</div>
|
|
|
|
<div align="center" id="anjiandiv" style="position:fixed;bottom:50px;width:100%;display:none;z-index:9">
|
|
<div>
|
|
<table><tr>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="jiedianha,2" style="width:80px;height:80px;background:#FF6666;color:white;line-height:80px;border-radius:50%;font-size:40px;padding:0;margin-top:20px;transform:rotate(135deg);"><i class="icon-phone"></i></div>
|
|
<div style="color:#888888;font-size:12px;margin-top:5px">拒绝</div>
|
|
</td>
|
|
<td width="50"></td>
|
|
<td align="center">
|
|
<div class="webbtn" clickevt="jiedianha,1" style="width:80px;height:80px;background:#339933;color:white;line-height:80px;border-radius:50%;font-size:40px;padding:0;margin-top:20px"><i class="icon-phone"></i></div>
|
|
<div style="color:#888888;font-size:12px;margin-top:5px">接听</div>
|
|
</td>
|
|
</tr></table>
|
|
</div>
|
|
|
|
</div>
|
|
<audio id="notify_sound_tonghua" hidden="true" loop="loop" autoplay="autoplay" src=""></audio>
|
|
</body>
|
|
</html> |