samien
/
xinhu_gitee
дзеркало https://gitee.com/rainrock/xinhu.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
							<!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>