550 lines
17 KiB
HTML
550 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/plugin/trtc.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,
|
||
isuse:false,
|
||
init:function(){
|
||
this.userid = 'rock'+this.id+'';
|
||
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);
|
||
});
|
||
}
|
||
if(window['TRTC']){
|
||
this.isuse = true;
|
||
}else{
|
||
this.stateupdate('未安装插件，无法使用');
|
||
}
|
||
if(NOWURL.substr(0,5)!='https'){
|
||
if(HOST.indexOf('localhost')==0 || HOST.indexOf('127.0.0.1')==0){
|
||
}else{
|
||
js.msg('msg','未使用https，功能受限');
|
||
}
|
||
}
|
||
},
|
||
hujiao:function(o1,lx){
|
||
if(this.hujiaobo)return;
|
||
if(!this.isuse){
|
||
js.msg('msg','未安装插件，无法使用');
|
||
return;
|
||
}
|
||
js.loading('请求中...');
|
||
this.hujiaobo = true;
|
||
this.type = lx;
|
||
js.ajax('tonghua|thinit',{id:this.id,type:lx,rtctype:1},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(){
|
||
trtc = TRTC.create();
|
||
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
|
||
const view = `remote_stream`;
|
||
trtc.startRemoteVideo({ userId, streamType, view });
|
||
});
|
||
//trtc.muteRemoteAudio(this.userid, 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 trtc.startLocalAudio();
|
||
if(this.type==1){
|
||
const view = 'local_stream';
|
||
await trtc.startLocalVideo({ view })
|
||
}
|
||
|
||
try {
|
||
const strRoomId = this.thcan.channel;
|
||
const sdkAppId = this.thcan.appid;
|
||
const userId = 'rock'+this.thcan.uid;
|
||
const userSig = this.thcan.token;
|
||
await trtc.enterRoom({ strRoomId: strRoomId, scene:'rtc', sdkAppId, userId, userSig });
|
||
console.log('进房成功');
|
||
} catch (error) {
|
||
js.msg('msg','接通失败： ' + error);
|
||
}
|
||
},
|
||
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:async function(){
|
||
clearTimeout(this.showmiantime);
|
||
trtc.stopLocalVideo()
|
||
trtc.stopLocalAudio();
|
||
await trtc.exitRoom();
|
||
trtc.destroy();
|
||
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){
|
||
trtc.setRemoteAudioVolume(this.userid, 0);
|
||
this.yuancjinb = true;
|
||
$('#jingyinclltxt').html('开启声音');
|
||
get('jingyincll').className='icon-volume-off';
|
||
}else{
|
||
trtc.setRemoteAudioVolume(this.userid, 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){
|
||
if(!this.isuse && lx==1){
|
||
js.msg('msg','未安装插件，只能拒绝');
|
||
return;
|
||
}
|
||
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');
|
||
}
|
||
|
||
</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> |