/* eslint-disable no-cond-assign */ /* global $ TRTC presetting RtcClient ShareClient */ /* eslint-disable require-jsdoc */ let isCamOn = true; let isMicOn = true; let isScreenOn = false; let isJoined = true; let rtc = null; let share = null; let shareUserId = ''; let cameraId = ''; let micId = ''; function login() { presetting.login(false, options => { rtc = new RtcClient(options); join(); }); presetting.login(true, options => { shareUserId = options.userId; share = new ShareClient(options); }); } $(function (){ login(); }) function join() { rtc.join(); $('#login-root').hide(); $('#room-root').show(); $('#header-roomId').html('房间号: ' + $('#roomId').val()); $('#member-me') .find('.member-id') .html(window.uname + '(我)'); } function leave() { $('#mask_main').appendTo($('#main-video')); rtc.leave(); share.leave(); } function publish() { rtc.publish(); } function unpublish() { rtc.unpublish(); } function muteAudio() { rtc.muteLocalAudio(); } function unmuteAudio() { rtc.unmuteLocalAudio(); } function muteVideo() { $('#mask_main').show(); rtc.muteLocalVideo(); } function unmuteVideo() { rtc.unmuteLocalVideo(); $('#mask_main').hide(); } function startSharing() { share.join(); } function stopSharing() { share.leave(); } function setBtnClickFuc() { //userid roomid规格 //$('#userId').on('input', function(e) { // e.preventDefault(); // console.log('userId input ' + e.target.value); // let val = $('#userId').val().slice(5); // $('#userId').val('user_'+val.replace(/[^\d]/g,'')); //}); $('#roomId').on('input', function(e) { e.preventDefault(); console.log('roomId input ' + e.target.value); let val = $('#roomId').val(); $('#roomId').val(val.replace(/[^\d]/g, '')); }); //login $('#login-btn').click(() => { login(); }); //open or close camera $('#video-btn').on('click', () => { if (isCamOn) { $('#video-btn').attr('src', './img/big-camera-off.png'); $('#video-btn').attr('title', '打开摄像头'); $('#member-me') .find('.member-video-btn') .attr('src', 'img/camera-off.png'); isCamOn = false; muteVideo(); } else { $('#video-btn').attr('src', './img/big-camera-on.png'); $('#video-btn').attr('title', '关闭摄像头'); $('#member-me') .find('.member-video-btn') .attr('src', 'img/camera-on.png'); isCamOn = true; unmuteVideo(); } }); //open or close microphone $('#mic-btn').on('click', () => { if (isMicOn) { $('#mic-btn').attr('src', './img/big-mic-off.png'); $('#mic-btn').attr('title', '打开麦克风'); $('#member-me') .find('.member-audio-btn') .attr('src', 'img/mic-off.png'); isMicOn = false; muteAudio(); } else { $('#mic-btn').attr('src', './img/big-mic-on.png'); $('#mic-btn').attr('title', '关闭麦克风'); $('#member-me') .find('.member-audio-btn') .attr('src', 'img/mic-on.png'); isMicOn = true; unmuteAudio(); } }); //share screen or not $('#screen-btn').on( 'click', throttle(() => { if (!TRTC.isScreenShareSupported()) { alert('当前浏览器不支持屏幕分享!'); return; } if ($('#screen-btn').attr('src') == './img/screen-on.png') { $('#screen-btn').attr('src', './img/screen-off.png'); stopSharing(); isScreenOn = false; } else { $('#screen-btn').attr('src', './img/screen-on.png'); startSharing(); isScreenOn = true; } }, 2000) ); //logout $('#logout-btn').on('click', () => { // window.location.hash='edit' // console.log(window.location.hash) var x; var r=confirm("您确认关闭吗?"); if (r==true){ leave(); $('#room-root').hide(); $('#login-root').show(); window.parent.location.href="/regime/live"; } else{ x="你按下了\"取消\"按钮!"; } // leave(); // $('#room-root').hide(); // $('#login-root').show(); }); //switch main video $('#main-video').on('click', () => { let mainVideo = $('.video-box').first(); if ($('#main-video').is(mainVideo)) { return; } //释放main-video grid-area mainVideo.css('grid-area', 'auto/auto/auto/auto'); exchangeView($('#main-video'), mainVideo); //将video-grid中第一个div设为main-video $('.video-box') .first() .css('grid-area', '1/1/3/4'); //chromeM71以下会自动暂停,手动唤醒 if (getBroswer().broswer == 'Chrome' && getBroswer().version < '72') { rtc.resumeStreams(); } }); //chrome60以下不支持popover,防止error if (getBroswer().broswer == 'Chrome' && getBroswer().version < '60') return; //开启popover $(function() { $('[data-toggle="popover"]').popover(); }); $('#camera').popover({ html: true, content: () => { return $('#camera-option').html(); } }); $('#microphone').popover({ html: true, content: () => { return $('#mic-option').html(); } }); $('#camera').on('click', () => { $('#microphone').popover('hide'); $('.popover-body') .find('div') .attr('onclick', 'setCameraId(this)'); }); $('#microphone').on('click', () => { $('#camera').popover('hide'); $('.popover-body') .find('div') .attr('onclick', 'setMicId(this)'); }); //点击body关闭popover $('body').click(() => { $('#camera').popover('hide'); $('#microphone').popover('hide'); }); //popover事件 $('#camera').on('show.bs.popover', () => { $('#camera').attr('src', './img/camera-on.png'); }); $('#camera').on('hide.bs.popover', () => { $('#camera').attr('src', './img/camera.png'); }); $('#microphone').on('show.bs.popover', () => { $('#microphone').attr('src', './img/mic-on.png'); }); $('#microphone').on('hide.bs.popover', () => { $('#microphone').attr('src', './img/mic.png'); }); } function setCameraId(thisDiv) { cameraId = $(thisDiv).attr('id'); console.log('setCameraId: ' + cameraId); } function setMicId(thisDiv) { micId = $(thisDiv).attr('id'); console.log('setMicId: ' + micId); } function addVideoView(id, isLocal = false) { let div = $('
', { id: id, class: 'video-box', style: 'justify-content: center' }); div.appendTo('#video-grid'); //设置监听 div.click(() => { let mainVideo = $('.video-box').first(); if (div.is(mainVideo)) { return; } //释放main-video grid-area mainVideo.css('grid-area', 'auto/auto/auto/auto'); exchangeView(div, mainVideo); //将video-grid中第一个div设为main-video $('.video-box') .first() .css('grid-area', '1/1/3/4'); //chromeM71以下会自动暂停,手动唤醒 if (getBroswer().broswer == 'Chrome' && getBroswer().version < '72') { rtc.resumeStreams(); } }); } function addMemberView(id) { let memberElm = $('#member-me').clone(); memberElm.attr('id', id); // memberElm.attr('class', id); memberElm.css('display', 'flex'); memberElm.find("#video-btn").click((el)=>{ console.log(el) const src = $(el.target).attr("src") == "img/camera-on.png" ? 1 : 0 console.log("video" + id); sendsx(id,src) }) memberElm.find("#mic-btn").click((el)=>{ const src = $(el.target).attr("src") == "img/mic-on.png" ? 1 : 0 console.log("mic" + id); sendjinyan(id,src) }) memberElm.find("#video-btn").removeAttr("id") memberElm.find("#mic-btn").removeAttr("id") console.log("移除") getname(id).then((res)=>{ $("#" + id).find('div.member-id').html(res); // console.log(.length) }) memberElm.appendTo($('#member-list')); } function removeView(id) { console.log("被删除") if ($('#' + id)[0]) { $('#' + id).remove(); //将video-grid中第一个div设为main-video $('.video-box') .first() .css('grid-area', '1/1/3/4'); } } function exchangeView(a, b) { var $div1 = $(a); var $div3 = $(b); var $temobj1 = $('
'); var $temobj2 = $('
'); $temobj1.insertBefore($div1); $temobj2.insertBefore($div3); $div1.insertAfter($temobj2); $div3.insertAfter($temobj1); $temobj1.remove(); $temobj2.remove(); } function isPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'); var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } function getCameraId() { console.log('selected cameraId: ' + cameraId); return cameraId; } function getMicrophoneId() { console.log('selected microphoneId: ' + micId); return micId; } function throttle(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(() => { console.log('duplicate click'); }, remaining); } }; } function resetView() { isCamOn = true; isMicOn = true; isScreenOn = false; isJoined = true; $('#main-video-btns').hide(); $('#video-btn').attr('src', './img/big-camera-on.png'); $('#mic-btn').attr('src', './img/big-mic-on.png'); $('#screen-btn').attr('src', './img/screen-off.png'); $('#member-me') .find('.member-video-btn') .attr('src', 'img/camera-on.png'); $('#member-me') .find('.member-audio-btn') .attr('src', 'img/mic-on.png'); $('.mask').hide(); //清空member-list if ($('#member-list')) { $('#member-list') .find('.member') .each((index, element) => { if ( $(element) .parent() .attr('id') != 'member-me' ) { $(element) .parent() .remove(); } }); } } function getBroswer() { var sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/edge\/([\d.]+)/)) ? (sys.edge = s[1]) : (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? (sys.ie = s[1]) : (s = ua.match(/msie ([\d.]+)/)) ? (sys.ie = s[1]) : (s = ua.match(/firefox\/([\d.]+)/)) ? (sys.firefox = s[1]) : (s = ua.match(/chrome\/([\d.]+)/)) ? (sys.chrome = s[1]) : (s = ua.match(/opera.([\d.]+)/)) ? (sys.opera = s[1]) : (s = ua.match(/version\/([\d.]+).*safari/)) ? (sys.safari = s[1]) : 0; if (sys.edge) return { broswer: 'Edge', version: sys.edge }; if (sys.ie) return { broswer: 'IE', version: sys.ie }; if (sys.firefox) return { broswer: 'Firefox', version: sys.firefox }; if (sys.chrome) return { broswer: 'Chrome', version: sys.chrome }; if (sys.opera) return { broswer: 'Opera', version: sys.opera }; if (sys.safari) return { broswer: 'Safari', version: sys.safari }; return { broswer: '', version: '0' }; } function isHidden() { var hidden, visibilityChange; if (typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; } else if (typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; } else if (typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } return document[hidden]; } function getIPAddress() { return new Promise(resolve => { window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome let pc = new RTCPeerConnection({ iceServers: [] }); let noop = function() {}; let IPAddress = ''; let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/; pc.createDataChannel(''); //create a bogus data channel pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description //listen for candidate events pc.onicecandidate = function(ice) { if ( !ice || !ice.candidate || !ice.candidate.candidate || !ipRegex.exec(ice.candidate.candidate) ) { return; } IPAddress = ipRegex.exec(ice.candidate.candidate)[1]; pc.onicecandidate = noop; resolve(IPAddress); }; }); } let isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry|BB10/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return ( isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() ); }, getOsName: function() { var osName = 'Unknown OS'; if (isMobile.Android()) { osName = 'Android'; } if (isMobile.BlackBerry()) { osName = 'BlackBerry'; } if (isMobile.iOS()) { osName = 'iOS'; } if (isMobile.Opera()) { osName = 'Opera Mini'; } if (isMobile.Windows()) { osName = 'Windows'; } return osName; } }; function detectDesktopOS() { var unknown = '-'; var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var os = unknown; var clientStrings = [ { s: 'Chrome OS', r: /CrOS/ }, { s: 'Windows 10', r: /(Windows 10.0|Windows NT 10.0)/ }, { s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/ }, { s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/ }, { s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/ }, { s: 'Windows Vista', r: /Windows NT 6.0/ }, { s: 'Windows Server 2003', r: /Windows NT 5.2/ }, { s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/ }, { s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/ }, { s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/ }, { s: 'Windows 98', r: /(Windows 98|Win98)/ }, { s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/ }, { s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/ }, { s: 'Windows CE', r: /Windows CE/ }, { s: 'Windows 3.11', r: /Win16/ }, { s: 'Android', r: /Android/ }, { s: 'Open BSD', r: /OpenBSD/ }, { s: 'Sun OS', r: /SunOS/ }, { s: 'Linux', r: /(Linux|X11)/ }, { s: 'iOS', r: /(iPhone|iPad|iPod)/ }, { s: 'Mac OS X', r: /Mac OS X/ }, { s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/ }, { s: 'QNX', r: /QNX/ }, { s: 'UNIX', r: /UNIX/ }, { s: 'BeOS', r: /BeOS/ }, { s: 'OS/2', r: /OS\/2/ }, { s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/ } ]; for (var i = 0, cs; (cs = clientStrings[i]); i++) { if (cs.r.test(nAgt)) { os = cs.s; break; } } var osVersion = unknown; if (/Windows/.test(os)) { if (/Windows (.*)/.test(os)) { osVersion = /Windows (.*)/.exec(os)[1]; } os = 'Windows'; } switch (os) { case 'Mac OS X': if (/Mac OS X (10[/._\d]+)/.test(nAgt)) { // eslint-disable-next-line no-useless-escape osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1]; } break; case 'Android': // eslint-disable-next-line no-useless-escape if (/Android ([\.\_\d]+)/.test(nAgt)) { // eslint-disable-next-line no-useless-escape osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1]; } break; case 'iOS': if (/OS (\d+)_(\d+)_?(\d+)?/.test(nAgt)) { osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer); osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0); } break; } return { osName: os + osVersion }; } function getOS() { if (isMobile.any()) { return isMobile.getOsName(); } else { return detectDesktopOS(); } }